Content
73%Weight 40%Scale 1-5Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
A well-structured, highly actionable design-system skill with an excellent workflow and validation checklist. Its main flaw is redundancy — the component-first mandate and several rules are repeated across the inventory, workflow, Do/Don't, and QA sections — which inflates token cost without adding information.
Suggestions
State the component-first rule once in the Component-First section, and reduce the Do/Don't lists and QA Checklist to only items not already covered there (the QA checklist can reference the rule instead of restating it).
Replace the full component inventory table with a pointer to 'src/components/ui/index.ts' as the source of truth, keeping only the need→component decision map inline.
Add one short JSX snippet showing a token-based, variant-driven shadcn usage to make the styling rules ('className overrides, not source edits') concrete.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The component-first rule is stated five times — '### Component-First Rule (MANDATORY)', Implementation Workflow steps 1–2 ('Check the component inventory', 'If a shadcn component is missing, generate it'), the Do list ('use existing shadcn components for every standard control', 'generate missing shadcn components via CLI'), the Don't list ('do not hand-write a `<select>`...'), and the QA Checklist ('Does the change use shadcn components for every standard control?'). Do/Don't/QA largely restate Core Visual Rules and Interaction Rules. This is more than the 'minor instances' of anchor 4 — a consolidation pass would cut roughly a third of the body — but the writing itself is directive, not padded explanation, so it is not anchor 2. | 3 / 5 |
Actionability | Concrete and executable for a design skill: a need→component decision map ('Need a boolean toggle? → Use `Switch`'), an exact install command ('bunx --bun shadcn@latest add <component> --yes'), real paths ('src/components/layout/settings-dialog-sections.tsx', 'src/globals.css'), and specific utilities ('.sidebar-liquid-glass', 'h-7/h-8', 'supports-backdrop-filter:backdrop-blur-xl'). Not a 5 because there is no code example showing token/component usage in an actual JSX snippet, and some rules remain judgment calls ('Keep radii moderate and purposeful'). | 4 / 5 |
Workflow Clarity | The 8-step 'Implementation Workflow' is clearly sequenced with concrete commands, includes explicit validation steps ('Check the result in both light and dark themes', 'Check at desktop width and at narrower split-panel widths'), and is capped by a dedicated 'QA Checklist' that functions as a verification gate including doc-sync checks. This is not a destructive/batch skill, so no cap applies, and the checklist-plus-checkpoint structure matches the anchor-5 example's explicit validation pattern. | 5 / 5 |
Progressive Disclosure | Well-sectioned with clear headers, no nested references, and all guidance one level deep. Not a 5 because at ~140 lines it exceeds the simple-skill exception, and the full 'shadcn Component Inventory' table plus some rule detail (e.g. the long Do/Don't lists) duplicate information that 'src/components/ui/' and 'src/components/ui/index.ts' already expose — content that could move to a reference file. Not a 3 because structure and navigation are genuinely good, not merely present. | 4 / 5 |
Total | 16 / 20 Passed |