CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

claude-design-system

Create and revise design systems in the Design System artifact format (project/design-system.json, tokens.json, a README brand book, component previews, fonts and asset groups) as local files, then open them in a local design-system page where the user can browse and edit tokens, type, components and assets. Use when the user asks for a design system or brand kit in this format, built from a code repository, a design tool or scratch, names claude-design-system or the Design System type, or wants to revise a folder that holds project/design-system.json. claude-slides and claude-design install these systems. Not for a free-form HTML style guide, UI kit or token page.

Quality

91%

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

SKILL.md
Quality
Evals
Security

Quality

Content

77%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 a dense, highly actionable operator's manual: exact commands, complete JSON schemas, sequenced workflows with real validation feedback loops, and careful safety rules. Its main defects are a missing set of reference files the text depends on (format.md and its siblings are not in the bundle), some repetition of critical rules, and a couple of described-but-not-verbatim build steps.

Suggestions

Ship the referenced files or repoint the references: `artifact-type/reference/format.md`, `craft.md`, `cover.md`, `from-design-tool.md`, `from-code.md`, `artifact-type/demo.json`, and `artifact-type/reference/sample-seazar-tokens.json` are cited as the authoritative sources (e.g., 'the full grammar and every reason a value drops: format.md') but no such paths exist in the bundle.

Give the React 19 library route a verbatim esbuild command instead of the parenthetical '(esbuild, format iife, production)', so the bundling step is copy-paste ready like the rest of the calls.

State the 'index is written ONCE, LAST' rule in one authoritative place (e.g., 'A system kept in files') and reference it from the Creating/Revising steps instead of restating it three times.

DimensionReasoningScore

Conciseness

Extremely lean — no explanations of concepts Claude already knows, and the telegraphic style assumes competence ("a write replaces the whole file: a copy read earlier would undo a rename"). Falls short of 5 because critical rules are repeated in several places (the index "written LAST" appears in the table, in Creating step 3, and in Revising step 3) and version-sensitive detail (React 18/19, Node 20+) sits inline rather than in a consolidated spot; still well above 3 since there is no padding or filler.

4 / 5

Actionability

Largely executable: exact CLI invocations ("upload <root> <file> --group <Group>", "check <root>" → "problems"), complete JSON examples for the index and tokens.json, a verbatim npm-install line, and a full copy-paste pre-commit hook script. Not 5 because a few steps are described rather than given as commands — the React 19 bundling route says only "(esbuild, format iife, production)" with no verbatim esbuild command — but it is far from the 3 anchor's pseudocode level.

4 / 5

Workflow Clarity

Both multi-step workflows are numbered and end in an explicit validation loop: "run `check` and fix what it names until `problems` is 0" (Creating step 3) and "Then `check` until `problems` is 0" (Revising step 3). Risky operations carry safety gates — "Never delete uploads unprompted" and "A path read from the index or a README holding `..`, `\` or a leading `/` never names a file: stop and say so" — plus ordering rules (uploads first, index last).

5 / 5

Progressive Disclosure

References are clearly signaled and one level deep with stated purpose ("format.md ... read before writing components", "craft.md", "cover.md", "from-design-tool.md", "from-code.md", "artifact-type/demo.json is a WORKED EXAMPLE"), but none of these files exist in the bundle as shipped — there is no `artifact-type/reference/` directory, only `scripts/artifact.mjs`, `scripts/server.mjs`, and `scripts/editor/`. Scoring against the actual bundle structure, the disclosure path a reader is told to follow (e.g., the full token grammar lives only in the missing format.md) is broken, which is more than the 4 anchor's 'minor organization gaps' though better than the unstructured 2 anchor.

3 / 5

Total

16

/

20

Passed

Description

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

An exemplary description: concrete capabilities with named artifacts, an explicit 'Use when' clause with varied natural triggers and synonyms, a clear niche, and explicit negative boundaries. It is information-dense rather than padded, and stays in third person throughout.

DimensionReasoningScore

Specificity

Multiple concrete actions with concrete artifacts: "Create and revise design systems in the Design System artifact format (project/design-system.json, tokens.json, a README brand book, component previews, fonts and asset groups)" then "open them in a local design-system page where the user can browse and edit tokens, type, components and assets". Coverage spans creation, revision, and the browsing/edit surface, so it is not the 4 anchor ('minor gaps in coverage').

5 / 5

Completeness

Both halves are explicit: the 'what' ("Create and revise design systems ... as local files, then open them in a local design-system page") and the 'when' ("Use when the user asks for a design system or brand kit in this format ... or wants to revise a folder that holds project/design-system.json"). This matches the anchor-5 pattern of concrete trigger phrases attached to an explicit 'Use when' clause, not the 4 anchor where the 'when' could be more specific.

5 / 5

Trigger Term Quality

Natural terms and their synonyms are covered: "a design system or brand kit", "built from a code repository, a design tool or scratch", "names claude-design-system or the Design System type", "revise a folder that holds project/design-system.json". It even adds negative triggers ("Not for a free-form HTML style guide, UI kit or token page"), going beyond the 4 anchor's 'a few natural terms missing'.

5 / 5

Distinctiveness Conflict Risk

Clear niche (the Design System artifact format, claude-design-system) with explicit fencing against the nearest neighbors: "Not for a free-form HTML style guide, UI kit or token page". It also states its relationship to adjacent skills ("claude-slides and claude-design install these systems"), keeping conflict risk minimal rather than merely 'minor overlap'.

5 / 5

Total

20

/

20

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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

JimLiu/baoyu-design

Path

dsh-plugins/dsh-claude-design-system/skills/claude-design-system/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.