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.
48
37%
Does it follow best practices?
Impact
Pending
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
32%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 identifies a clear domain (CSS with BEM methodology) and mentions the Optics design system, which provides some distinctiveness. However, it lacks an explicit 'Use when...' clause, which significantly hurts completeness, and the actions described are somewhat general rather than listing specific concrete capabilities. Adding trigger guidance and more natural user-facing keywords would substantially improve this description.
Suggestions
Add an explicit 'Use when...' clause, e.g., 'Use when the user asks about CSS class naming, BEM conventions, CSS architecture, or integrating with the Optics design system.'
Include more natural trigger terms users might say, such as 'stylesheet', 'CSS classes', 'CSS architecture', 'naming pattern', '.css files', or 'component styling'.
List more specific concrete actions, e.g., 'Converts flat CSS to BEM structure, generates BEM class names for components, reviews CSS for BEM compliance, maps Optics design tokens to BEM blocks.'
| 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 description answers 'what does this do' reasonably well but completely lacks a 'Use when...' clause or any explicit trigger guidance for when Claude should select this skill. Per the rubric, a missing 'Use when...' clause should cap completeness at 2, and since the 'when' is entirely absent (not even implied strongly), this scores a 1. | 1 / 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 misses common variations like 'stylesheet', 'CSS classes', 'CSS architecture', 'naming pattern', or '.css files' that users might naturally say. | 2 / 3 |
Distinctiveness Conflict Risk | The mention 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 the niche somewhat. | 2 / 3 |
Total | 7 / 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 BEM guidance with excellent good/bad examples, but is severely hampered by verbosity and repetition. The same BEM patterns are demonstrated multiple times across sections (Block, Element, Modifier each re-explain naming, HTML, and CSS with overlapping examples). The Optics integration promised in the overview is essentially absent from the body, and the entire document would benefit from being split into a concise overview with references to detailed sections.
Suggestions
Consolidate the Block, Element, and Modifier sections into a single concise reference table with one good/bad example each, moving detailed examples to a separate EXAMPLES.md file.
Add concrete guidance for Optics integration: where to find Optics components, how to check if one exists before creating a BEM block, and how to override Optics components when needed.
Add a brief workflow section (e.g., '1. Check Optics for existing component → 2. If none, create BEM block → 3. Validate naming conventions → 4. Review for flat selectors') to guide the process.
Remove redundant explanations - the basic BEM concept table at the top is sufficient; the individual Block/Element/Modifier definition paragraphs repeat information Claude already knows.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose, repeating the same concepts multiple times across sections. It explains what BEM is (which Claude already knows), provides redundant examples for blocks, elements, and modifiers that largely repeat the same patterns, and includes excessive good/bad examples that could be consolidated. The naming convention section alone could be cut by 60%. | 1 / 3 |
Actionability | The skill provides fully concrete, executable CSS and HTML examples throughout. Every rule is illustrated with specific good/bad code examples that are copy-paste ready, making it very clear exactly what to do and what to avoid. | 3 / 3 |
Workflow Clarity | While the rules and patterns are clearly defined, there's no explicit workflow for how to approach writing or refactoring CSS using BEM. The skill is more of a reference than a step-by-step guide. For a CSS methodology skill this is somewhat acceptable, but the mention of Optics integration in the overview lacks any concrete workflow for checking existing components before creating new ones. | 2 / 3 |
Progressive Disclosure | The content is a monolithic wall of text with no references to external files. All detailed rules, examples, and edge cases are inline in a single document that is very long. The Optics design system integration mentioned in the overview has zero supporting detail or references to where Optics documentation lives. | 1 / 3 |
Total | 7 / 12 Passed |
Validation
81%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 9 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
metadata_version | 'metadata.version' is missing | Warning |
metadata_field | 'metadata' should map string keys to string values | Warning |
Total | 9 / 11 Passed | |
- Repository
- RoleModel/rolemodel-skills
- Commit
097ad6b
- 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.