CtrlK
BlogDocsLog inGet started
Tessl Logo

web-reference-sheet-generator

Generate a project-specific web design reference sheet (docs/design/design-reference.md) and companion enforcement skill for any website codebase. Extracts CSS custom properties, validates against a JSON schema scratchpad, inspects components, and produces a 12-section document covering colours, typography, spacing, layout, borders, shadows, motion, 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, port design tokens, audit existing styles.

66

Quality

80%

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

Fix and improve this skill with Tessl

tessl review fix ./skills/development/front-end/web-reference-sheet-generator/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

67%Weight 40%Scale 1-5

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

The body is well-structured and disciplined — a mindset section, a clear workflow with checkpoints, and strong BAD/GOOD anti-pattern tables. Its main weakness is that the workflow's central artifacts (scratchpad template, JSON schema, and the bun generate/validate scripts) are referenced but missing from the bundle, which makes half the steps non-executable as shipped.

Suggestions

Ship the missing bundle artifacts — templates/skill-output.yaml and schemas/design-reference.schema.json — or remove the 'bun run generate'/'bun run validate' steps and re-point the scratchpad step to an existing reference, so steps 4–7 of the workflow are executable as delivered.

Make the feedback loops explicit: after the TBD gap check and the schema validation, state the recovery action (fill the gaps / fix schema violations, then re-run) and the rule that generation only proceeds on a clean pass.

De-duplicate and complete navigation: trim the 'When to Use' list that repeats the description's triggers and the Mindset text that restates the first anti-pattern, and add the orphaned elements-of-design.md and principles-of-design.md to the References list (or drop them from the bundle).

DimensionReasoningScore

Conciseness

The body is lean and operational — terse bash snippets, BAD/GOOD tables, and no explanation of concepts Claude already knows. It falls short of the score-5 anchor because of small redundancies: the 'When to Use' list repeats the description's triggers verbatim, and the Mindset section ('developers trust the reference sheet and will use the wrong values') restates the first anti-pattern's WHY. It is well above the score-3 anchor, whose whole-section unnecessary explanations are not present.

4 / 5

Actionability

There is real executable guidance (grep discovery commands, a TBD-gap check, validation invocation), but steps 4–7 depend on artifacts absent from the bundle: 'templates/skill-output.yaml', 'schemas/design-reference.schema.json', and 'bun run generate'/'bun run validate' have no backing files or scripts. This matches the score-3 anchor ('concrete guidance but incomplete ... missing key details') rather than score 4, where gaps would be minor rather than central to half the workflow.

3 / 5

Workflow Clarity

The 8-step sequence is clearly ordered with checkpoints: step 5 gates generation on a gap check ('Gaps found — fill before generating') and step 7 validates against the schema. It falls short of the score-5 anchor because the error-recovery loop is implicit — what to do when the TBD check or validation fails is not spelled out — and the validation command targets a schema file that is missing. It exceeds score 3, where checkpoints would be absent.

4 / 5

Progressive Disclosure

Good structure: the body is an overview pointing to one-level-deep, clearly labelled references, each with a descriptive tag in the References section. Against the actual bundle, however, 2 of the 12 listed paths (templates/skill-output.yaml, schemas/design-reference.schema.json) do not exist, and 2 bundle files (elements-of-design.md, principles-of-design.md) are orphaned — unlisted and undiscoverable. These are minor organization gaps per the score-4 anchor, not the inline-bulk or buried-reference problems of score 3.

4 / 5

Total

15

/

20

Passed

Description

92%Weight 40%Scale 1-5

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

A strong description: concrete, third-person capability statements paired with an explicit 'Use when' clause and a dedicated trigger-phrase list. The only minor gap is that a few natural synonyms and file-extension terms (e.g. 'CSS variables', '.css') are missing from the trigger coverage.

DimensionReasoningScore

Specificity

Multiple concrete actions are listed — 'Extracts CSS custom properties, validates against a JSON schema scratchpad, inspects components, and produces a 12-section document' — with the section topics enumerated (colours, typography, spacing, layout, borders, shadows, motion, accessibility, dark mode, Figma sync notes). This matches the comprehensive-coverage anchor; it is above the score-4 anchor because no concrete capability is missing or generic, and the voice is consistently third person.

5 / 5

Completeness

It explicitly answers both questions: the 'what' ('Generate a project-specific web design reference sheet ... and companion enforcement skill') and the 'when' ('Use when starting a new project, onboarding a design system, ... or auditing existing styles', plus an explicit 'Triggers on:' list of concrete trigger phrases). This is a direct match to the score-5 anchor and above score 4, whose 'when' is present but less explicit.

5 / 5

Trigger Term Quality

Good natural-language coverage: 'create a design reference, generate a style guide, document the design tokens, make a brand reference sheet, port design tokens, audit existing styles'. It falls short of the score-5 anchor, which expects synonyms and file extensions, because terms like '.css', 'CSS variables', or 'design system documentation' are absent; it is clearly above the score-3 anchor because the listed phrases are phrasings a user would naturally say rather than generic keywords.

4 / 5

Distinctiveness Conflict Risk

It occupies a clear niche — generating a project-specific web design reference sheet and enforcement skill — with triggers ('design reference', 'style guide', 'port design tokens', 'audit existing styles') that are unlikely to fire for unrelated skills. It is above the score-4 anchor ('minor overlap risk') because no closely related skill territory is claimed by these triggers.

5 / 5

Total

19

/

20

Passed

Validation

93%

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

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 4 missing

Warning

Total

15

/

16

Passed

Repository
pantheon-org/tekhne
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.