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

—

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Quality

Content

65%

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

The skill is highly actionable with strong executable GOOD/BAD examples, but it is verbose and monolithic — re-explaining BEM fundamentals Claude already knows and keeping all reference material inline with no external split.

Suggestions

Trim or remove the 'What is BEM?' preamble and duplicated rule statements; trust Claude's existing knowledge of BEM fundamentals to improve conciseness.

Move the Block/Element/Modifier naming reference and example catalog into a separate reference file linked from a concise overview, improving progressive disclosure.

Add a short ordered workflow with a validation/verification step (e.g. lint or re-check naming after refactor) for cases involving batch CSS refactors.

Dimension	Reasoning	Score
Conciseness	The body is mostly actionable but pads with concepts Claude already knows ('BEM stands for Block Element Modifier - a methodology that helps you create reusable components…') and repeats rules across the Naming, Rule Summary, and Miscellaneous sections.	2 / 3
Actionability	Provides numerous concrete, executable CSS and HTML examples with explicit GOOD/BAD pairings (e.g. the .card / .menu / .form blocks) that are copy-paste ready.	3 / 3
Workflow Clarity	Rules and examples are well organized, but there is no sequenced workflow or validation checkpoint; the only process note is 'document the reasons for the deviation in the chat output,' with no feedback loop.	2 / 3
Progressive Disclosure	Everything lives in a single ~390-line file with clear sections but no references to separate files; the naming-reference and example material could be split out for leaner top-level discovery.	2 / 3
	Total	9 / 12 Passed

Description

67%

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 is specific and distinct, naming concrete BEM/Optics actions in third person, but it omits an explicit 'Use when…' trigger clause, leaving the 'when to use' dimension implied.

Suggestions

Append a 'Use when…' clause with natural trigger phrases (e.g. 'Use when refactoring CSS, applying BEM naming, or reviewing stylesheet structure') to raise completeness and trigger-term quality.

Add common user phrasings like 'BEM-ify my CSS' or 'fix my CSS' to the description so trigger terms match how users actually ask.

Keep the Optics integration mention but ensure it reads as a use-time signal rather than only a capability description.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — 'writing, refactoring, and structuring CSS', 'Provides proper CSS class naming conventions, component structure, and Optics design system integration' — in third person voice.	3 / 3
Completeness	Clearly answers 'what' the skill does, but there is no 'Use when…' clause or equivalent explicit trigger guidance, so 'when' is only implied and completeness is capped at 2.	2 / 3
Trigger Term Quality	'BEM (Block Element Modifier) methodology' and 'CSS' are natural terms, but common variations a user might say (e.g. 'BEM-ify my CSS', 'fix my CSS') are absent from the description itself.	2 / 3
Distinctiveness Conflict Risk	BEM CSS methodology plus Optics design-system integration is a clear, narrow niche with distinct triggers unlikely to conflict with unrelated skills.	3 / 3
	Total	10 / 12 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
Commit: f61959b

Reviewed: 10 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.