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.
44
46%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/bem-structure/SKILL.mdQuality
Discovery
50%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 adequately identifies its domain (CSS with BEM methodology and Optics design system) and lists some relevant capabilities, but lacks an explicit 'Use when...' clause that would help Claude know precisely when to select this skill. The trigger terms are decent but could be expanded with more natural user language variations. The Optics design system mention adds some distinctiveness but the broad CSS scope could still cause overlap.
Suggestions
Add an explicit 'Use when...' clause, e.g., 'Use when the user asks about CSS class naming, BEM conventions, CSS architecture, component styling, or Optics design system patterns.'
Include more natural trigger term variations such as 'stylesheet', '.css files', 'CSS classes', 'CSS naming patterns', 'CSS organization', and 'design tokens'.
List more specific concrete actions, e.g., 'Converts flat CSS to BEM structure, generates BEM class names for components, maps Optics design tokens to CSS variables.'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (CSS/BEM) and some actions ('writing, refactoring, and structuring CSS'), but the actions are somewhat general. It mentions 'class naming conventions, component structure, and Optics design system integration' which adds some specificity, but doesn't list truly concrete discrete actions like the score-3 examples do. | 2 / 3 |
Completeness | The 'what' is reasonably covered (writing/refactoring/structuring CSS with BEM, naming conventions, Optics integration), but there is no explicit 'Use when...' clause or equivalent trigger guidance. The 'when' is only implied by the capabilities listed, which per the rubric caps completeness at 2. | 2 / 3 |
Trigger Term Quality | Includes relevant keywords like 'CSS', 'BEM', 'Block Element Modifier', 'class naming conventions', and 'Optics design system', which are terms users might use. However, it's missing common variations like 'stylesheet', 'CSS classes', 'CSS architecture', 'naming pattern', or '.css files' that users would naturally say. | 2 / 3 |
Distinctiveness Conflict Risk | The combination of BEM methodology and Optics design system provides some distinctiveness, but 'writing, refactoring, and structuring CSS' is broad enough to overlap with general CSS or frontend development skills. The Optics design system reference helps narrow it, but the overall scope of CSS work could still conflict with other styling-related skills. | 2 / 3 |
Total | 8 / 12 Passed |
Implementation
42%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
The skill provides highly actionable and concrete CSS/HTML examples with clear good/bad patterns, which is its primary strength. However, it is excessively verbose—explaining BEM fundamentals Claude already knows and repeating similar patterns across blocks, elements, and modifiers sections. The lack of a clear workflow for applying BEM (especially the Optics integration mentioned in the overview) and the monolithic structure significantly reduce its effectiveness as a skill file.
Suggestions
Reduce content by 50-60%: Remove explanations of what BEM is and consolidate redundant good/bad examples into a single comprehensive reference table or compact example section. Claude already understands BEM fundamentals.
Add a concrete workflow section: Define steps like '1. Check if an Optics component exists → 2. If yes, extend/override it → 3. If no, create a new BEM block → 4. Validate naming conventions'. Include specific guidance on how to check Optics components.
Extract detailed examples into a separate reference file (e.g., BEM_EXAMPLES.md) and keep SKILL.md as a concise overview with the key rules, the `&` usage constraints, and links to the reference.
Provide concrete Optics integration guidance: The overview mentions using Optics components but the body never addresses this. Add specific examples of when/how to use or override Optics components vs. creating new BEM blocks.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose, explaining BEM fundamentals that Claude already knows (what BEM stands for, what blocks/elements/modifiers are). It repeats the same patterns many times with slight variations—the good/bad examples for blocks, elements, and modifiers are highly redundant. The 'What is BEM?' section and detailed explanations of naming conventions for each BEM component are unnecessary for an AI that understands CSS methodologies. | 1 / 3 |
Actionability | The skill provides extensive concrete, executable CSS and HTML examples throughout. Every rule is illustrated with explicit good/bad code examples that are copy-paste ready, covering blocks, elements, modifiers, nesting syntax, and the `&` usage rules. The guidance is specific and unambiguous. | 3 / 3 |
Workflow Clarity | While the rules and patterns are clearly presented, there is no explicit workflow for how to approach writing or refactoring CSS using BEM. The skill lacks a step-by-step process (e.g., 1. Check Optics components first, 2. Identify blocks, 3. Define elements, 4. Apply modifiers, 5. Validate). The Optics integration mentioned in the overview has no concrete guidance or validation steps. | 2 / 3 |
Progressive Disclosure | The content is a monolithic wall of text with no references to external files and no layered structure. All BEM rules, examples for blocks, elements, and modifiers, miscellaneous rules, and syntax examples are inlined in a single long document. The Optics design system is mentioned but never linked to any reference material. Content could be significantly better organized with a concise overview and separate reference files for detailed examples. | 1 / 3 |
Total | 7 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
metadata_version | 'metadata.version' is missing | Warning |
Total | 10 / 11 Passed | |
- Repository
- RoleModel/rolemodel-skills
- Commit
72e8136
- Reviewed
Table of Contents
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.