pantheon-ai/web-reference-sheet-generator
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
criteria.jsonevals/scenario-3/
{
"context": "Tests whether the agent handles a sparse codebase gracefully — completing output without aborting, using only the tokens found, and marking all undiscoverable sections as TBD.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Does not abort",
"description": "Agent produced docs/design/design-reference.md despite sparse codebase — did not abort, refuse, or ask user to add tokens first",
"max_score": 15
},
{
"name": "No invented tokens",
"description": "No invented colour tokens — only #0070f3, #333, and #fff appear as colour references in the output",
"max_score": 15
},
{
"name": "No palette expansion",
"description": "Agent did not generate a full colour palette from the single #0070f3 button colour",
"max_score": 10
},
{
"name": "Typography TBD",
"description": "§3 Typography contains 'TBD — not yet defined' (no font imports found)",
"max_score": 6
},
{
"name": "Spacing TBD",
"description": "§4 Spacing contains 'TBD — not yet defined' (no spacing tokens found)",
"max_score": 5
},
{
"name": "Shadows TBD",
"description": "§7 Shadows contains 'TBD — not yet defined'",
"max_score": 5
},
{
"name": "Motion TBD",
"description": "§8 Motion contains 'TBD — not yet defined'",
"max_score": 5
},
{
"name": "Dark mode TBD",
"description": "§11 Dark Mode contains 'TBD — not yet defined'",
"max_score": 5
},
{
"name": "All 12 sections present",
"description": "All 12 sections are present — no section heading is missing from the output",
"max_score": 6
},
{
"name": "TBD sections listed in confirmation",
"description": "Step 8 confirmation block explicitly lists each TBD section (at minimum: Typography, Spacing, Shadows, Motion, Dark Mode)",
"max_score": 8
},
{
"name": "Companion SKILL.md not skipped",
"description": "Companion SKILL.md generated under .agents/skills/ — not skipped due to sparse data",
"max_score": 8
},
{
"name": "Companion SKILL.md specificity",
"description": "Companion SKILL.md description names the specific project",
"max_score": 5
},
{
"name": "No empty sections",
"description": "No empty section headings — every section has either real content or 'TBD — not yet defined'",
"max_score": 7
}
]
}