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

93%

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 design-system in rampstackco/claude-skills

SKILL.md
Quality
Evals
Security

Quality

Content

86%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 overview skill: actionable dual workflows, concrete deliverables, and clean one-level-deep progressive disclosure into real reference files. Weaker spots are minor over-explanation in the foundations layer and workflows that lack explicit validation checkpoints. One consistency issue: the body's 5-layer model (foundations/elements/components/patterns/governance) conflicts with the 4-layer model (tokens/primitives/patterns/templates) in references/system-architecture.md.

Suggestions

Add explicit validation checkpoints to the workflows, e.g., after defining tokens verify contrast/accessibility against the stated constraints, and pilot the system with one product team before the full rollout in step 9.

Trim the "Why this layer matters" bullets and the per-element documentation checklist — both restate knowledge Claude already has; keep the two-tier token example, which is the genuinely load-bearing content.

Reconcile the 5-layer taxonomy in SKILL.md with the 4-layer taxonomy (tokens, primitives, patterns, templates) used in references/system-architecture.md so navigating to the reference doesn't introduce a conflicting model.

DimensionReasoningScore

Conciseness

The body is bullet-driven with no explanation of what Figma, Storybook, or atomic design are, and includes a tight two-tier token example ("color-blue-600" base + "color-text-link" semantic). Not a 5: sections like "Why this layer matters" ("Tokens are the source of truth for everything above") and parts of the per-element documentation checklist restate what a competent model already knows and could be trimmed; not a 3: padding is minor, not a pattern.

4 / 5

Actionability

For an instruction-only skill the guidance is fully executable: two ordered workflows (9-step build, 6-step audit) with specific numbers ("The 10 to 15 components that appear most often"), named deliverables ("a markdown report at `design-system-audit.md`" with a 6-part structure), and concrete per-layer output lists. Not a 4: both the build and audit cases are covered end-to-end with copy-paste-ready process guidance and no significant gaps.

5 / 5

Workflow Clarity

Both workflows are clearly sequenced with per-step guidance and explicit prioritization ("Foundation gaps first. High-use component drift second. Rarely-used component cleanup last"), and there is an upfront gate ("If brand identity is undefined, run `brand-identity` first"). Not a 5: no explicit validation/verification steps inside the workflows (e.g., verifying token accessibility or piloting with one team before rollout) — co-design and drift checks appear only in the failure-patterns section; not a 3: the sequences are far richer than a bare step list and contain an entry checkpoint.

4 / 5

Progressive Disclosure

The body is an overview with a dedicated "Reference files" section linking three real, one-level-deep files (`references/system-architecture.md`, `references/system-audit-template.md`, `references/governance-playbook.md`), each with a one-line description; grep confirms no nested references inside the bundle files. Not a 4: navigation is easy, references are clearly signaled, and the split (framework summary inline, detail in references) is appropriate.

5 / 5

Total

18

/

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: concrete third-person actions, comprehensive natural trigger terms including tool names and a scenario-based trigger, and an explicit 'when' clause. The only weakness is unstated boundaries against sibling design skills that share trigger terms like "design tokens."

Suggestions

Add a brief disambiguation clause (e.g., "For applying a system to a specific page or component, use design-standards") to reduce trigger overlap on shared terms like "design tokens" and "Storybook."

DimensionReasoningScore

Specificity

"Build or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation" plus "define design tokens at the system level, structure a component library, or set up design system governance" lists multiple concrete, comprehensive actions in third person. Not a 4: coverage spans build, audit, token definition, library structure, and governance with no meaningful gaps in the domain.

5 / 5

Completeness

Explicitly answers both 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... Triggers on...") with concrete trigger phrases. Not a 4: the 'when' clause is explicit and enumerates specific triggering scenarios, not just a general condition.

5 / 5

Trigger Term Quality

Triggers include "design system, component library, design tokens, atomic design, atoms, molecules, organisms, design system documentation, Storybook, Figma library, system governance, design contribution model" — natural user phrasing plus synonyms and tool names, and a scenario trigger ("teams are inconsistent across products"). Not a 4: no natural term in this domain is obviously missing.

5 / 5

Distinctiveness Conflict Risk

"Design system" at the system level is a clear niche, but "design tokens" and "Storybook" are terms that plausibly also trigger closely related skills (the body itself routes token templates to a sibling `design-standards` skill). Not a 5: the description does not state its boundary against those sibling skills, leaving minor overlap risk; not a 3: the core triggers are unmistakably system-level rather than generic design work.

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

rampstackco/claude-skills

Path

dist/codex/.agents/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.