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

86%

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

The canonical home for this skill is claude-design-system in JimLiu/baoyu-design

SKILL.md
Quality
Evals
Security

Quality

Content

73%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 itself is exceptionally well-crafted: telegraphic and token-efficient, concrete commands and JSON shapes, and workflows with explicit validation loops and error recovery. Its critical flaw is that the progressive-disclosure structure is broken in practice — the five reference pages and demo.json it leans on for the deepest guidance (token grammar, component contract, import routes, cover spec) are cited throughout but missing from the bundle.

Suggestions

Ship the referenced bundle files — artifact-type/reference/format.md, craft.md, cover.md, from-design-tool.md, from-code.md and artifact-type/demo.json are cited throughout the body as 'in this skill's folder' but none exist in the bundle; add them, or inline their essential content (the full token grammar, the preview/theme contract, the cover spec) into SKILL.md.

Consolidate the index-written-LAST rule, which is stated in four places ('A system kept in files', 'What a system holds', Creating step 3, Revising step 3), into one canonical statement referenced from the workflows.

Give the exact esbuild command line and entry file for the React 19 UMD bundling route instead of deferring to 'as the Built route says' in the missing from-code.md, and similarly inline the minimal format.md facts previews need (the @dsCard contract, allowed URL forms) so component work does not depend on an absent file.

DimensionReasoningScore

Conciseness

The body is aggressively token-efficient — "Write only under `<root>/project/`: a file elsewhere never shows" — and assumes Claude's competence throughout, explaining nothing the model already knows. It is not score 5 because a few rules are repeated across sections (the index-written-LAST rule appears in "A system kept in files", "What a system holds", Creating step 3 and Revising step 3; upload rules appear in three places), which could be consolidated. It is not score 3 because there is no padded or unnecessary explanation anywhere — the density is deliberate and almost all of it earns its place.

4 / 5

Actionability

Mostly executable: exact command signatures with JSON outputs ("upload <root> <file> --group <Group>", "check <root> → problems", the full copy-paste pre-commit hook script), exact JSON shapes for the index and tokens.json, and hard numeric limits (≤20 MB, SVG ≤2 MB, 4,080 files / 256 MiB). It is not score 5 because several commands contain unresolved placeholders ("node <this skill's folder>/scripts/artifact.mjs") and key routes defer to prose rather than exact commands — the React-19 esbuild bundling route says to "bundle an entry that imports it as the Built route says" without giving the esbuild command line. It is not score 3 because the common cases are fully specified and copy-paste ready.

4 / 5

Workflow Clarity

Creating and Revising are clearly numbered sequences with explicit validation feedback loops — "Then run `check` and fix what it names until `problems` is 0" and "Then `check` until `problems` is 0" — plus ordering invariants (index LAST, uploads first, all changed files in ONE message), a checklist section, and recovery/edge-case handling for failures (NETWORK_BLOCKED → run outside the sandbox; no file tool → hand over the files; no marker → read-only, say so; comments --wait → handle, reply, restart the wait). It is not score 4 because checkpoints and error-recovery loops are present and explicit at every risky step.

5 / 5

Progressive Disclosure

The design is right — SKILL.md as a dense overview deferring one level deep to clearly-signaled references ("The full grammar and every reason a value drops: `format.md`", "read before writing components", "the why: `craft.md`", "a WORKED EXAMPLE: artifact-type/demo.json") — but the actual bundle contains none of them: format.md (cited 6×), from-code.md (5×), craft.md (4×), from-design-tool.md (3×), cover.md (3×), demo.json (3×) and sample-seazar-tokens.json are all absent from the skill folder (only scripts/artifact.mjs, scripts/server.mjs and scripts/editor/ exist). The deferred content — the token grammar, the component/preview contract, the cover spec, and both import routes — is therefore unreachable, which collapses the navigation the structure depends on. It is not score 3 because that anchor assumes the references actually lead somewhere; it is not score 1 because the body does stand alone for its core create/revise/check/open flows and the references it does make are clearly signaled, not buried.

2 / 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 actions, a complete inventory of what the skill produces, an explicit and specific 'Use when...' clause with real trigger phrases, and a negative boundary that separates it from adjacent skills. Its only weakness is mild — a few natural synonyms (design tokens, brand guidelines) are absent from the trigger terms.

DimensionReasoningScore

Specificity

The description names multiple concrete actions — "Create and revise design systems", "as local files, then open them in a local design-system page where the user can browse and edit tokens, type, components and assets" — and comprehensively enumerates the deliverables ("project/design-system.json, tokens.json, a README brand book, component previews, fonts and asset groups") plus the sources it can be built from ("a code repository, a design tool or scratch"). This matches the anchor for multiple specific concrete actions with comprehensive coverage; it is not score 4 because coverage of its domain has no visible gaps.

5 / 5

Completeness

Both questions are answered explicitly: the "what" is the full first sentence (create/revise design systems in the Design System artifact format as local files, opened in an editable local page), and the "when" is an explicit "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" with concrete trigger phrases. It even adds a negative boundary ("Not for a free-form HTML style guide, UI kit or token page"); not score 4 because the "when" clause is already fully explicit and specific.

5 / 5

Trigger Term Quality

Good natural keyword coverage: "design system", "brand kit", "code repository", "design tool", the skill name "claude-design-system", and the concrete file marker "project/design-system.json". A few natural synonyms a user might say are missing (e.g. "design tokens", "brand guidelines", "brand book"), so it falls just short of the comprehensive-synonyms anchor; it is clearly above the anchor where only relevant-but-partial keywords are present.

4 / 5

Distinctiveness Conflict Risk

It carves out a clear niche — the claude.ai Design System artifact format kept as local files — with distinct triggers (the format name, the project/design-system.json marker, the skill name) and an explicit exclusion of the nearest neighbors ("Not for a free-form HTML style guide, UI kit or token page"). Conflict risk with generic styling or token skills is minimal; it is not score 4 because there is no identifiable closely-related skill it would wrongly trigger for.

5 / 5

Total

19

/

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

chatgpt-plugins/baoyu-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.