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
task.mdevals/scenario-1/
Task — Generate design reference for a Tailwind v4 project
You are working in a React/Vite project that uses Tailwind v4 with design tokens defined in a CSS @theme block.
Codebase state
src/app.css:
@theme {
--color-brand-500: #7c3aed;
--color-brand-600: #6d28d9;
--color-neutral-50: #fafafa;
--color-neutral-900: #0a0a0a;
--font-sans: "Inter", sans-serif;
--font-heading: "Cal Sans", sans-serif;
--spacing-section: 5rem;
--radius-card: 0.75rem;
--shadow-card: 0 4px 24px rgb(0 0 0 / 0.08);
}src/components/Button.tsx — uses className="bg-brand-500 text-white rounded-md px-4 py-2" variants
src/pages/Home.tsx — hero section, card grid, CTA button
No dark mode detected. No aria- attributes found in components.
Your task
Create a design reference for this project.