CtrlK
BlogDocsLog inGet started
Tessl Logo

design-spec

How to author a DESIGN.md file — the machine-readable design-token + human-rationale format that must exist before any UI is built. YAML front-matter token schema (colors, typography, spacing, rounded, components), type system, token references, and canonical section order.

67

Quality

82%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

76%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.

A well-structured, highly actionable spec with executable examples and clear token schema. Its weakest point is workflow clarity, where the build sequence omits explicit validation/verification steps despite this being a gate that can fail (malformed YAML, unresolved token references).

Suggestions

Add an explicit validation checkpoint to the Workflow, e.g. 'After writing tokens, verify the YAML front matter parses and that every {token.reference} resolves to a defined primitive before building UI.'

Convert the hard-gate rule ('If absent, create it first; if present, read it and conform') into a numbered workflow step with a verification action so the gate is enforced as a checkpoint rather than only stated in prose.

Surface the duplicate-section rejection rule (currently buried in the §6 consumer-behavior table) as a pre-build validation checklist item, since it is the one error condition that blocks the whole file.

DimensionReasoningScore

Conciseness

The body is dense and mostly efficient — schema, type-system, and section tables carry information Claude would not already know — but a few phrasings (e.g. 'The spec is extensible', 'Recommended token names (guidance, not required)') restate the obvious and could be trimmed.

4 / 5

Actionability

It provides a complete, copy-paste-ready YAML token block, an executable minimal DESIGN.md example with valid token references, and concrete property lists ('backgroundColor, textColor, typography, rounded, padding'), so Claude can author directly from the spec.

5 / 5

Workflow Clarity

The closing 'Workflow' lists five sequenced steps, but it lacks explicit validation checkpoints: there is no 'verify the YAML parses', 'confirm tokens resolve', or 're-read and conform' step, and the only hard-gate language ('If absent, create it first') appears earlier rather than as a workflow checkpoint.

3 / 5

Progressive Disclosure

Structure is good with numbered sections and a clearly signaled one-level-deep reference to collection.md ('70+ real-world DESIGN.md files'), and there are no references/scripts/assets bundle files present to verify further; only the single in-body link exists, so it is well short of a 5-reference organization.

4 / 5

Total

16

/

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, concrete description that clearly states what the skill produces and when to use it, with good trigger terms. It loses only minor points for a few missing natural synonyms and naming-related skills it could overlap with.

DimensionReasoningScore

Specificity

The description enumerates multiple concrete capabilities — 'author a DESIGN.md file', 'YAML front-matter token schema (colors, typography, spacing, rounded, components), type system, token references, and canonical section order' — giving comprehensive coverage rather than vague language.

5 / 5

Completeness

It explicitly answers both 'what' (author a DESIGN.md with a YAML token schema, type system, references, section order) and 'when' ('BEFORE writing any UI code... creating or updating a project's DESIGN.md, defining design tokens, or when a UI task needs a design source-of-truth').

5 / 5

Trigger Term Quality

Natural trigger phrases like 'design tokens', 'DESIGN.md', 'defining design tokens', and 'design source-of-truth' are present, but a few common synonyms a user might say (e.g. 'design system', 'theme/colors') are not surfaced, leaving minor gaps.

4 / 5

Distinctiveness Conflict Risk

The DESIGN.md authoring niche is fairly distinct, but it overlaps with sibling skills it explicitly names ('frontend-design', 'mobile-design'), so a user aiming for pure aesthetics could trigger this skill instead; minor overlap risk remains.

4 / 5

Total

18

/

20

Passed

Validation

81%

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

Validation13 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

allowed_tools_field

'allowed-tools' contains unusual tool name(s)

Warning

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

relative_links

Relative link issues: 2 missing

Warning

Total

13

/

16

Passed

Repository
vudovn/ag-kit
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.