CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

Quality

77%

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

56%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-organized with a clear mindset, explicit when/when-not sections, and strong anti-pattern guidance with WHY/BAD/GOOD structure. Its main weaknesses are operational: the workflow depends on files and commands (bun run generate/validate, scratchpad template, schema) that are missing from the bundle, which makes the later steps non-executable as written, and there is notable redundancy between the Mindset and Anti-Patterns sections.

Suggestions

Ship the referenced `templates/skill-output.yaml` and `schemas/design-reference.schema.json` (or remove the references) so that workflow steps 4, 5, and 8 resolve to real files.

Back `bun run generate` and `bun run validate` with actual scripts in the bundle, or replace them with concrete inline commands Claude can execute directly.

Consolidate the Mindset bullets with the overlapping anti-patterns (the invent/expand-tokens rule is stated three times), and add references/elements-of-design.md and references/principles-of-design.md to the References table so every bundle file is discoverable.

DimensionReasoningScore

Conciseness

The body is mostly efficient — tight sections, concrete commands, no explanation of concepts Claude already knows — but it could be tightened: the "never invent/expand tokens" theme is stated three times (Mindset bullet, anti-pattern 1, anti-pattern 2), and several BAD examples are just comments ("# assuming Tailwind defaults for breakpoints"). This fits the "mostly efficient but includes some unnecessary explanation or could be tightened" anchor rather than 4, where the redundancy would be only a minor instance.

3 / 5

Actionability

The discovery grep commands are executable, but steps 4, 6, and 8 depend on tooling that does not exist: `bun run generate --template enforcement-skill` and `bun run validate --schema schemas/design-reference.schema.json` have no backing scripts (no scripts/, no package.json), and the referenced `templates/skill-output.yaml` and `schemas/design-reference.schema.json` are absent from the bundle. This is concrete-but-incomplete guidance with missing key details — the 3 anchor — rather than the 4 anchor's "minor gaps".

3 / 5

Workflow Clarity

The seven-step summary is clearly sequenced with validation checkpoints: "Review populated scratchpad before generating final docs", the TBD/null grep gate before generating markdown, schema validation, and a final structured confirmation report. It does not reach 5 because there is no explicit fix-and-retry loop if validation fails, and the summary is labeled "the full 8-step generation process" while listing only seven items (workflow.md actually has eight steps).

4 / 5

Progressive Disclosure

The SKILL.md is a genuine overview with a clear, one-level-deep References table, but the actual bundle structure does not match what is referenced: `templates/skill-output.yaml` and `schemas/design-reference.schema.json` (referenced six times across the body and References table) do not exist, and two bundle files (references/elements-of-design.md, references/principles-of-design.md) are orphaned — not reachable from any documented pointer. These are structural gaps beyond the 4 anchor's "minor organization gaps".

3 / 5

Total

13

/

20

Passed

Description

88%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: third-person voice, concrete actions, named outputs, and explicit trigger guidance. Trigger coverage is good but not exhaustive, and a couple of phrases are broad enough to invite minor overlap with adjacent design/audit skills.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions — "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" — with a named output path (docs/design/design-reference.md) and the companion enforcement skill. This matches the anchor for comprehensive coverage of specific concrete actions; it is not the level below because coverage of the 12 sections leaves no minor gaps.

5 / 5

Completeness

It explicitly answers what ("Generate a project-specific web design reference sheet ... and companion enforcement skill" with concrete extraction/validation steps) and when ("Use when starting a new project, onboarding a design system, creating a Figma reference sheet, porting design tokens, or auditing existing styles"), matching the anchor that requires both with concrete trigger phrases.

5 / 5

Trigger Term Quality

Natural trigger phrases are present — "create a design reference", "generate a style guide", "document the design tokens", "make a brand reference sheet", "port design tokens", "audit existing styles" — giving good keyword coverage with synonyms. It falls short of the 5 anchor because a few natural variations are missing (e.g., "design system documentation", "CSS variables", "design tokens audit") and "port design tokens" is repeated verbatim in both the Use-when and Triggers-on clauses.

4 / 5

Distinctiveness Conflict Risk

The niche is mostly distinct — generating a project-specific design reference sheet plus a companion enforcement skill — with triggers anchored to that task. It does not reach 5 because broadly phrased triggers like "generate a style guide" and "audit existing styles" could overlap with generic brand-guideline or code-audit skills.

4 / 5

Total

18

/

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.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 4 missing

Warning

Total

15

/

16

Passed

Repository

pantheon-org/tekhne

Path

skills/development/front-end/web-reference-sheet-generator/SKILL.md

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.