Generate a comprehensive web design reference sheet (docs/design/design-reference.md) and its companion enforcement skill (.agents/skills/{project-slug}/SKILL.md) for any website project. Extracts tokens from CSS files, validates completeness against a JSON schema scratchpad, inspects existing components, and produces a 12-section living document covering colours, typography, spacing, layout, borders, shadows, motion, component patterns, accessibility, dark mode, and Figma sync notes. Use when starting a new project, onboarding a design system, creating a Figma reference sheet, porting design tokens, or auditing existing styles. Triggers on: "create a design reference", "generate a style guide", "document the design tokens", "make a brand reference sheet", "create design docs", "port design tokens", "audit existing styles".
97
100%
Does it follow best practices?
Impact
89%
2.61xAverage score across 3 eval scenarios
Passed
No known issues
{
"context": "Tests whether the agent correctly extracts design tokens from a Tailwind v4 project, fills all 12 sections, generates both output files, and prints a step 8 confirmation block.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Token discovery",
"description": "Agent ran grep for CSS custom properties (--) in src/app.css or equivalent",
"max_score": 4
},
{
"name": "Tailwind config check",
"description": "Agent checked for tailwind.config.* file (not found is an acceptable result)",
"max_score": 3
},
{
"name": "Component inspection",
"description": "Agent read at least 2 component or page files before generating output",
"max_score": 4
},
{
"name": "Output file created",
"description": "docs/design/design-reference.md was created",
"max_score": 5
},
{
"name": "No placeholders",
"description": "No {TOKEN_*} or {PROJECT_NAME} placeholders remain in the generated design-reference.md",
"max_score": 4
},
{
"name": "Accurate colour tokens",
"description": "All 4 colour tokens from @theme appear verbatim with their actual hex values — no invented colours",
"max_score": 8
},
{
"name": "Dark mode TBD",
"description": "Dark mode section contains 'TBD — not yet defined' (no dark mode was present in codebase)",
"max_score": 8
},
{
"name": "All 12 sections present",
"description": "All 12 sections are present in design-reference.md even if some contain only TBD markers",
"max_score": 5
},
{
"name": "Companion SKILL.md location",
"description": "Companion SKILL.md was generated under .agents/skills/ (not under docs/)",
"max_score": 8
},
{
"name": "Companion SKILL.md specificity",
"description": "Companion SKILL.md frontmatter description names the specific project, not a generic tool description",
"max_score": 8
},
{
"name": "Confirmation block printed",
"description": "Step 8 confirmation block was printed listing populated sections with token counts",
"max_score": 7
},
{
"name": "TBD items listed",
"description": "Step 8 confirmation block explicitly lists TBD items (at minimum: dark mode)",
"max_score": 4
},
{
"name": "Authoritative token file named",
"description": "Reference sheet names src/app.css (or equivalent) as the authoritative token file",
"max_score": 5
},
{
"name": "No assumed breakpoints",
"description": "Agent did not assume Tailwind breakpoints from memory — checked config or CSS",
"max_score": 5
},
{
"name": "Actual component classNames",
"description": "Component pattern in §9 uses actual className strings from the codebase, not invented JSX",
"max_score": 5
},
{
"name": "Scratchpad used",
"description": "Agent populated or referenced skill-output.yaml before generating markdown (or equivalent scratchpad step)",
"max_score": 7
},
{
"name": "Schema validation referenced",
"description": "Agent validated or referenced schema validation before generating markdown",
"max_score": 1
}
]
}