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".

62

Quality

78%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Overview
Quality
Evals
Security
Files

Quality

Content

50%Weight 40%Scale 1-3

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a competently structured overview with concrete commands, guardrails (When NOT to Use, anti-patterns), and explicit validation checkpoints, but it has minor redundancy with the description, two vaguely-specified workflow steps, no spelled-out error-recovery loop, and references that point to bundle files not present in the skill.

Suggestions

Make workflow steps 2–3 concrete: give a command or selection heuristic for picking representative component files and a grep pattern for dark-mode/ARIA (e.g. `prefers-color-scheme`, `aria-`) — this raises actionability.

Add an explicit error-recovery feedback loop after each validation step (e.g. "if the scratchpad or schema validation reports gaps/errors, fix them and re-run validation before generating docs") — this raises workflow_clarity.

Ship the referenced bundle files (references/*.md, templates/skill-output.yaml, schemas/design-reference.schema.json) alongside SKILL.md so the well-signaled references actually resolve — this raises progressive_disclosure.

DimensionReasoningScore

Conciseness

Mostly efficient and avoids teaching basics Claude already knows, but the "When to Use" list duplicates the description's triggers and some Mindset/anti-pattern prose could be tightened; not a 3 because not every token earns its place, not a 1 because it is not padded with known concepts.

2 / 3

Actionability

Provides concrete executable commands (grep for custom properties, `bun run generate`/`validate`) and BAD/GOOD tables, but steps 2–3 ("inspect existing components", "check dark mode and accessibility patterns") are vague and the full 8-step detail is offloaded to a referenced file; not a 3 because guidance is incomplete, not a 1 because real commands are present.

2 / 3

Workflow Clarity

Clear numbered 7-step sequence with explicit validation checkpoints (scratchpad review with a TBD/null grep, schema validation, structured report), but no explicit error-recovery feedback loop (e.g. "if validation fails, fix and re-validate") is spelled out; not a 3 because the anchor-3 error-recovery loop is only implicit, not a 1 because the sequence and checkpoints are clear.

2 / 3

Progressive Disclosure

The body is a clean overview with a well-signaled, one-level-deep References section, but none of the referenced bundle files (references/*.md, templates/skill-output.yaml, schemas/design-reference.schema.json) actually exist in the provided skill, so the navigation is broken in practice; not a 3 because the disclosure cannot be exercised, not a 1 because the written structure itself is well organized.

2 / 3

Total

8

/

12

Passed

Description

100%Weight 40%Scale 1-3

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is strong: third-person voice, concrete multi-action capability statement, explicit when-to-use guidance with natural trigger terms, and a clear niche that minimizes conflict risk. It is concise enough to earn its place while remaining comprehensive.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — "Extracts CSS custom properties, validates against a JSON schema scratchpad, inspects components, and produces a 12-section document" — matching the anchor for multiple specific concrete actions; not a 2 because coverage is comprehensive rather than partial.

3 / 3

Completeness

Explicitly answers both what (generate a 12-section reference sheet via the listed actions) and when ("Use when starting a new project, onboarding a design system..."), with explicit triggers; not a 2 because the when-clause is explicit, not implied.

3 / 3

Trigger Term Quality

Natural user-facing terms are well covered: "create a design reference, generate a style guide, document the design tokens, make a brand reference sheet, port design tokens, audit existing styles"; not a 2 because common variations are present rather than missing.

3 / 3

Distinctiveness Conflict Risk

Clear niche — project-specific web design reference sheets / design tokens — with distinct triggers unlikely to fire for unrelated skills; not a 2 because it is narrowly scoped to web design token documentation rather than broadly overlapping.

3 / 3

Total

12

/

12

Passed

Validation

87%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 15 missing

Warning

referenced_paths_exist

Referenced path issues: 22 missing

Warning

Total

14

/

16

Passed

Reviewed

Table of Contents