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.
47
49%
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
57%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 niche (CSS with BEM methodology and Optics design system) and provides reasonable specificity about what it covers. However, it lacks an explicit 'Use when...' clause, which limits its effectiveness as a skill selector, and the action verbs are somewhat generic rather than listing concrete operations.
Suggestions
Add an explicit 'Use when...' clause, e.g., 'Use when the user asks about CSS class naming, BEM conventions, converting CSS to BEM, or integrating with the Optics design system.'
Include more natural trigger term variations such as 'stylesheet', 'CSS classes', 'CSS architecture', '.css files', or 'naming patterns' to improve keyword coverage.
| 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 actions like 'converts existing CSS to BEM notation' or 'generates BEM class hierarchies'. | 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 description of capabilities, 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 patterns', or '.css files' that users might naturally say. | 2 / 3 |
Distinctiveness Conflict Risk | The combination of BEM methodology and Optics design system creates a clear, distinct niche. It's unlikely to conflict with general CSS skills or other design system skills due to the specific mention of BEM and Optics. | 3 / 3 |
Total | 9 / 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 BEM guidance with excellent good/bad code examples, but is severely undermined by verbosity and poor organization. It explains fundamental BEM concepts Claude already knows, repeats rules across multiple sections, and presents everything as a monolithic document without progressive disclosure. The Optics design system integration mentioned in the overview is never substantively addressed.
Suggestions
Reduce content by 50-60% by removing BEM fundamentals Claude already knows (what blocks/elements/modifiers are, basic definitions) and consolidating redundant examples — focus only on the project-specific conventions like the ampersand rules and Optics integration.
Add a clear workflow section for the refactoring use case: e.g., 1) Identify non-BEM patterns, 2) Check if Optics component exists, 3) Refactor to BEM, 4) Validate naming conventions against rules.
Provide concrete guidance on Optics design system integration — what components exist, where to find them, and how to decide between using Optics vs creating new BEM blocks.
Split into a concise SKILL.md overview with key rules and link to a separate BEM-REFERENCE.md for the detailed examples and edge cases.
| 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 rules multiple times with slight variations (e.g., the ampersand rule, naming conventions). The 'What is BEM?' section and detailed Block/Element/Modifier subsections with basic definitions are unnecessary padding. Many examples are redundant, showing the same concept repeatedly. | 1 / 3 |
Actionability | The skill provides extensive concrete, executable CSS and HTML examples with clear good/bad comparisons. Every rule is illustrated with copy-paste ready code snippets showing both correct and incorrect patterns, making it very clear exactly what to do and what to avoid. | 3 / 3 |
Workflow Clarity | While the rules and patterns are clearly presented, there's no explicit workflow for how to approach writing or refactoring CSS using BEM. The skill reads more as a reference document than a step-by-step guide. There are no validation checkpoints or feedback loops for reviewing/refactoring existing CSS, despite the skill description mentioning refactoring as a use case. | 2 / 3 |
Progressive Disclosure | The content is a monolithic wall of text with no references to external files. All content is inline in a single long document with no clear navigation structure. The Optics design system is mentioned in the overview but never elaborated on or linked to any reference material. Content could be significantly better organized with a concise overview pointing to detailed reference sections. | 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 | |
4d83977
Table of Contents
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.