CtrlK
BlogDocsLog inGet started
Tessl Logo

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

2.61x
Quality

100%

Does it follow best practices?

Impact

89%

2.61x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-1/

{
  "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
    }
  ]
}

evals

scenario-1

criteria.json

task.md

SKILL.md

tile.json