bem-structure

Expert guidance for writing, refactoring, and structuring CSS using BEM (Block Element Modifier) methodology. Provides proper CSS class naming conventions, component structure, and Optics design system integration for maintainable, scalable stylesheets.

Quality

69%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/bem-structure/SKILL.md

Quality

Content

68%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The content is highly actionable with comprehensive executable examples and clear structure, but it is held back by repeated rule restatements across sections and the absence of validation checkpoints for a CSS-refactoring skill.

Suggestions

Consolidate the duplicated `__`/`--`/`&` and 'classes only, no IDs' rules into a single canonical 'Rule Summary' section, removing the restatements in 'Basic Syntax', per-element 'Naming' blocks, and 'Miscellaneous Rules'.

Add an explicit validation step or checklist (e.g., 'Verify every selector is a flat BEM class using `__` for elements and `--` for modifiers with `&` only as a textual reference') to close the workflow-clarity gap.

Consider moving the long GOOD/BAD example catalogs into a referenced file if the body grows further, to preserve a lean overview and lift progressive disclosure.

Dimension	Reasoning	Score
Conciseness	The body is mostly efficient and stays on-topic about BEM, but the `__`/`--`/`&` and 'classes only, no IDs' rules are restated across 'Basic Syntax', 'Rule Summary', per-element 'Naming' subsections, and 'Miscellaneous Rules', creating noticeable redundancy that could be tightened.	3 / 5
Actionability	Copy-paste-ready GOOD/BAD CSS and HTML examples comprehensively cover block, element, modifier, naming, and the `&` usage rules, matching anchor 5 for fully executable guidance over the common cases.	5 / 5
Workflow Clarity	This is a convention reference rather than a sequenced multi-step workflow; the apply-then-document-deviation guidance is present but there are no explicit validation checkpoints to verify output conforms to BEM, and the under-50-line simple-skill exception does not apply.	3 / 5
Progressive Disclosure	The single file is well-organized with clear headers (Overview, What is BEM, Rule Summary, Block/Element/Modifier, Miscellaneous Rules) and no external references are needed, but some inlined GOOD/BAD redundancy keeps it just below anchor 5.	4 / 5
	Total	15 / 20 Passed

Description

70%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description clearly conveys what the skill does and occupies a distinct niche, but it omits an explicit 'Use when...' trigger clause, which caps its completeness. Specificity and trigger-term quality are strong but not maximal.

Suggestions

Add an explicit 'Use when...' clause naming concrete trigger phrases (e.g., 'Use when writing, refactoring, or reviewing CSS, or when the user asks to BEM-ify stylesheets or integrate with the Optics design system').

Move natural trigger synonyms currently only in the body ('review my CSS', 'fix my BEM') into the description so users' actual phrasing is captured there.

Trim the outcome framing ('maintainable, scalable stylesheets') in favor of one more concrete capability to push specificity toward anchor 5.

Dimension	Reasoning	Score
Specificity	Lists several concrete actions ('writing, refactoring, and structuring CSS', 'Provides proper CSS class naming conventions, component structure, and Optics design system integration'), falling just short of anchor 5 because 'maintainable, scalable stylesheets' is outcome framing rather than an additional concrete action.	4 / 5
Completeness	The 'what' is clear, but there is no explicit 'Use when...' clause or equivalent trigger guidance in the description field, so per the judging guideline completeness is capped at 3.	3 / 5
Trigger Term Quality	Natural terms like 'CSS', 'BEM (Block Element Modifier)', 'refactoring', and (via metadata) 'refactor css', 'bem-ify' give good coverage of phrases users would say, but a few common variations ('review my CSS', 'fix my BEM') appear only in the body, not the description.	4 / 5
Distinctiveness Conflict Risk	The 'BEM (Block Element Modifier) methodology' niche combined with 'Optics design system integration' is a clearly distinct, specific domain with minimal overlap risk against other skills.	5 / 5
	Total	16 / 20 Passed

Validation

93%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: RoleModel/rolemodel-skills
Path: skills/bem-structure/SKILL.md
Commit: 6d600e9

Reviewed: 5 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.