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
Quality
Discovery
100%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is an excellent skill description that excels across all dimensions. It provides comprehensive specificity about what the skill does (extracting tokens, validating against schema, producing a 12-section document), includes natural trigger terms users would actually say, and clearly delineates when to use it with both contextual scenarios and explicit trigger phrases.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'Extracts tokens from CSS files', 'validates completeness against a JSON schema scratchpad', 'inspects existing components', 'produces a 12-section living document' with enumerated sections (colours, typography, spacing, etc.). | 3 / 3 |
Completeness | Clearly answers both what (generate reference sheet, extract tokens, validate, produce 12-section document) AND when with explicit 'Use when...' clause and enumerated trigger phrases. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say, explicitly listing triggers like 'create a design reference', 'generate a style guide', 'document the design tokens', 'make a brand reference sheet', 'port design tokens', 'audit existing styles'. | 3 / 3 |
Distinctiveness Conflict Risk | Highly specific niche targeting web design reference documentation with distinct triggers around design tokens, style guides, and brand reference sheets. Unlikely to conflict with general coding or document skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
100%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a high-quality skill that demonstrates excellent structure and actionability. It respects Claude's intelligence by avoiding explanations of basic concepts, provides concrete commands and examples, and uses progressive disclosure effectively with clear reference tables. The BAD/GOOD comparison tables for rules are particularly effective for communicating constraints.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is lean and efficient, assuming Claude's competence. It avoids explaining what design tokens are or how CSS works, instead providing direct commands and clear tables. Every section earns its place. | 3 / 3 |
Actionability | Provides executable bash commands for token discovery, specific file paths to read, and concrete BAD/GOOD examples in tables. The workflow references external files but the inline content is copy-paste ready. | 3 / 3 |
Workflow Clarity | Clear 8-step numbered workflow with explicit validation checkpoint (step 5: validate against JSON schema). The workflow includes a confirmation step (step 8) that lists populated sections and TBD items, providing a feedback loop. | 3 / 3 |
Progressive Disclosure | Excellent structure with overview in SKILL.md and well-signaled one-level-deep references. The table format for CRITICAL vs HIGH priority references makes navigation easy. Detailed workflow appropriately lives in references/workflow.md. | 3 / 3 |
Total | 12 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
Reviewed
Table of Contents