CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

design-system

Build or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation. Use this skill whenever the user wants to build a design system, audit an existing system, define design tokens at the system level, structure a component library, or set up design system governance. Triggers on design system, component library, design tokens, atomic design, atoms, molecules, organisms, design system documentation, Storybook, Figma library, system governance, design contribution model. Also triggers when teams are inconsistent across products and a system is the answer.

Quality

87%

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

75%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, information-dense skill body: two coherent sequenced workflows, concrete documentation checklists, a valuable failure-patterns section, and real one-level-deep reference files. It falls short of top marks on minor points: no explicit validation checkpoints in the workflows, a few semi-obvious explanatory bullets, and small organization inconsistencies (5-layer body vs. four-layer reference description, audit template not linked at point of use).

Suggestions

Add one or two explicit validation checkpoints to each workflow (e.g., after "Define foundations", verify the token set is implemented in both code and Figma and referenced by semantic names; after "Build the element library", confirm documented variants match shipped components) to lift workflow clarity toward the top anchor.

Trim semi-obvious explanation, notably the "Why this layer matters" bullets under Foundations, which restate what Claude can infer — every token there should earn its place.

Link the audit template at its point of use ("For an existing design system audit — use references/system-audit-template.md") and reconcile the body's "5 layers" framing with system-architecture.md's "four-layer model" description so the overview and reference do not disagree.

DimensionReasoningScore

Conciseness

The body is efficient and assumes competence — terse bullets, no "what is a design system" filler, and a high-value distilled "Failure patterns" section (e.g., "Spending 6 months on tokens and elements before producing components anyone uses"). Minor trimmable padding exists, such as the "Why this layer matters" bullets ("Without tokens, the system has no foundation") stating the semi-obvious, which fits the 4 anchor ("efficient; minor instances of over-explanation") rather than the lean 5 anchor.

4 / 5

Actionability

As an instruction-only skill, the guidance is concrete: per-element documentation checklists ("Visual variants… Size variants… States (default, hover, focus, active, disabled, error, loading)…"), a named audit deliverable path (`design-system-audit.md`) with a 6-part report structure, and specific workflow steps ("Identify priority components. The 10 to 15 components that appear most often"). It is not 5 because some steps remain directional ("Map gaps. Where the system is incomplete") without a worked example, and no sample token-set or audit excerpt is inlined (though the audit template reference covers part of this).

4 / 5

Workflow Clarity

Two clearly sequenced workflows — 9 ordered steps for a new system and 6 for an audit — with explicit prioritization logic ("Foundation gaps first. High-use component drift second. Rarely-used component cleanup last"). This is analysis/documentation work, not a destructive or batch operation, so the validation cap does not apply; still, there are no explicit validation checkpoints (e.g., verifying the token set compiles or that documented elements match shipped code), placing it at 4 ("most checkpoints present" is satisfied only implicitly via inventory/prioritization steps) rather than 5.

4 / 5

Progressive Disclosure

A clear "Reference files" section lists three files with one-line descriptions; all three exist in the bundle, are one level deep, and are referenced from the body where relevant. Minor gaps keep it at 4 rather than 5: the audit workflow does not point to `references/system-audit-template.md` at the point of use, the body's 5-layer framework overlaps in granularity with `system-architecture.md` (whose own description says "four-layer model", an inconsistency with the body's "5 layers"), and "When NOT to use" scoping detail sits in the body rather than being delegated.

4 / 5

Total

16

/

20

Passed

Description

96%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: it states comprehensive concrete capabilities, gives an explicit use-when clause, and enumerates a dense set of natural trigger terms including framework synonyms and tool names. The only weakness is mild trigger overlap with sibling design skills around tokens, component libraries, and Storybook.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — "Build or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation" — and extends into "define design tokens at the system level, structure a component library, or set up design system governance". Coverage is comprehensive across the skill's scope, matching the top anchor; it is not the 4 anchor because no meaningful capability in the domain is left unnamed.

5 / 5

Completeness

Explicitly answers both questions: what ("Build or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation") and when ("Use this skill whenever the user wants to build a design system, audit an existing system, define design tokens at the system level, structure a component library, or set up design system governance"), plus a concrete trigger list. This mirrors the anchor-5 example structure exactly; the 4 anchor would require a weaker or less explicit 'when', which is not the case here.

5 / 5

Trigger Term Quality

"Triggers on design system, component library, design tokens, atomic design, atoms, molecules, organisms, design system documentation, Storybook, Figma library, system governance, design contribution model" gives comprehensive natural-term coverage including framework synonyms (atomic design hierarchy terms) and tool names users actually say. Not the 4 anchor: no significant natural phrasing a user would use for this need is missing.

5 / 5

Distinctiveness Conflict Risk

The niche is clear (system-level design architecture vs. page/component work) and terms like "design system governance" are distinct. However, broadly shared triggers such as "design tokens", "component library", and "Storybook" overlap with closely related sibling skills the body itself names (design-standards, frontend-component-build), creating minor overlap risk — fitting the 4 anchor ("mostly distinct; minor overlap risk with closely related skills") rather than 5 ("minimal conflict risk").

4 / 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.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

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

Warning

Total

15

/

16

Passed

Repository

rampstackco/claude-skills

Path

skills/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.