Content
27%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill is extremely comprehensive in scope but severely undermined by its verbosity and poor content organization. It tries to be both a design system reference manual and a methodology guide, resulting in a ~600+ line monolith that repeats concepts, includes unnecessary explanations of things Claude already knows, and embeds prompt templates that are meta-instructional rather than directly useful. The referenced bundle files don't exist, making the progressive disclosure promises hollow.
Suggestions
Reduce content by 60-70%: Remove prompt templates (Claude doesn't need to be told how to prompt itself), eliminate redundant checklists (the verification checklist and QA checklist overlap heavily), and cut explanations of basic concepts like WCAG contrast ratios or what semantic HTML means.
Move the design direction templates, advanced techniques, and detailed token scales into separate referenced files (e.g., DESIGN-DIRECTIONS.md, TOKENS-REFERENCE.md, ADVANCED.md) and keep SKILL.md as a concise overview with clear pointers.
Add explicit validation gates between workflow phases — e.g., 'Before proceeding to Phase 2, verify all tokens render correctly by inspecting CSS variables in browser DevTools' — rather than deferring all validation to a final checklist.
Either provide the referenced bundle files (examples/css/tokens.css, examples/typescript/design-tokens.ts, etc.) or remove references to them; broken references actively harm usability.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose at ~600+ lines. Explains concepts Claude already knows (what design tokens are, what accessibility means, basic CSS/React patterns). Includes full prompt templates that Claude doesn't need to be taught how to write. The typography scale, spacing scale, radius scale, and shadow scale are repeated or restated multiple times. The 'Common Pitfalls' section explains basic concepts like WCAG contrast ratios. Multiple checklists overlap heavily. | 1 / 3 |
Actionability | Contains some concrete, executable code snippets (fluid typography CSS, skeleton component TSX, motion CSS) but much of the content is meta-instruction (prompt templates for Claude to use on itself) rather than directly actionable guidance. The design direction templates are descriptive rather than executable. Many sections are checklists and rules rather than concrete implementations. | 2 / 3 |
Workflow Clarity | Has a clear 4-phase workflow (Design Analysis → Component Development → Page Assembly → Quality Assurance) with numbered steps, which is good. However, validation checkpoints are limited to a final self-review checklist rather than being embedded at each phase. There's no explicit 'validate before proceeding' gate between phases, and the QA phase is just a checklist rather than executable validation steps with error recovery. | 2 / 3 |
Progressive Disclosure | Despite referencing multiple supporting files (examples/css/tokens.css, examples/typescript/design-tokens.ts, templates/, etc.), no bundle files are provided, meaning all those references are broken. The SKILL.md itself is a monolithic wall of text that dumps everything inline — token scales, prompt templates, design direction templates, advanced techniques, checklists — rather than appropriately splitting content into referenced files. The 'Skill Architecture' section promises a well-organized bundle that doesn't exist. | 1 / 3 |
Total | 6 / 12 Passed |