CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

design-system

Use before any change to how a screen looks in this repository — a new page or component, a layout, a redesign, or a one-line colour or spacing fix. Maps each frontend to the DESIGN.md or wiki page that governs its look, ranks that document above any design skill, says which design skill fits which task and which must never touch a surface with a design system, and how to show the result rendered. Loaded by the designer and design-mechanic agents; any session doing UI work can load it.

77

Quality

97%

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

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

An exceptionally tight routing skill: it adds only what Claude could not know (this repository's design-governance map), gives copy-paste commands for every surface, and ends in a genuine validation stage with a fallback chain and honest NOT RUN discipline. Structure is well-organized with no content that belongs in separate files.

DimensionReasoningScore

Conciseness

Every line carries repo-specific information Claude could not know (surface-to-document maps, precedence rules, per-surface dev commands, install policy), and justifications are one clause long ('The table goes stale; the filesystem does not'). No padding or explanation of concepts Claude already knows was found, matching the 'lean and efficient; every token earns its place' anchor rather than the 'minor instances of over-explanation' anchor 4.

5 / 5

Actionability

Commands are copy-paste ready ('find . -name DESIGN.md -not -path */node_modules/*'', the per-surface 'bun run dev:*' table, 'bun run test:browser', 'bun add <pkg> --cwd <dir>') and the task-to-skill and surface-to-document tables cover the common cases exhaustively. The only non-literal instruction (Chrome MCP tool usage) names the tool family, which is sufficient for MCP invocation, so this fits the 'fully executable, covers common cases' anchor rather than anchor 4's 'minor gaps'.

5 / 5

Workflow Clarity

Four clearly sequenced steps culminate in an explicit validation stage with a fallback chain (rendered look via Chrome tools, else browser-test screenshots, else honest 'NOT RUN' with reason), plus 'run the gates AGENTS.md names and report their real output' and a closing report checklist. This matches the anchor-5 'explicit validation steps; checklists' rather than anchor 4, whose 'minor validation gaps' are absent; no destructive/batch-operation cap applies.

5 / 5

Progressive Disclosure

No bundle files exist (references/, scripts/, assets/ are absent), and the body is cleanly sectioned into four step headers with well-formed tables. The inlined tables are load-bearing routing data needed on every invocation, not content that belongs in a separate file, so this is not the 'content that should be separate is inline' case of anchors 2-3.

5 / 5

Total

20

/

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 dense, concrete description that answers both what the skill does and when to use it with explicit trigger phrases, all in third-person/imperative voice with no fluff. Its only weakness is trigger-term coverage: styling, CSS, theme, and look-and-feel variants of the core trigger are absent.

Suggestions

Add natural trigger synonyms such as 'styling', 'CSS changes', 'theme', or 'look and feel' to the opening trigger clause so users phrasing a UI task in those terms also match.

Optionally name the shared-token surfaces ('@shared/ui', design tokens') in the description so component-library changes are explicitly covered as a trigger.

DimensionReasoningScore

Specificity

It lists five concrete actions — 'Maps each frontend to the DESIGN.md or wiki page that governs its look', 'ranks that document above any design skill', 'says which design skill fits which task and which must never touch a surface with a design system', and 'how to show the result rendered' — covering the skill's entire workflow. This matches the comprehensive-coverage anchor 5 rather than anchor 4, since no capability is left unspecified.

5 / 5

Completeness

The 'when' is fully explicit with concrete trigger phrases ('Use before any change to how a screen looks in this repository — a new page or component, a layout, a redesign, or a one-line colour or spacing fix') and the 'what' is answered concretely by the enumerated actions. Both are explicit, matching anchor 5 rather than anchor 4 where the 'when' could be more specific.

5 / 5

Trigger Term Quality

Natural phrases are present — 'change to how a screen looks', 'a new page or component', 'a layout', 'a redesign', 'a one-line colour or spacing fix', 'UI work' — but common variations a user would say such as 'styling', 'CSS', 'theme', or 'look and feel' are missing. Good coverage with a few natural terms absent fits anchor 4 rather than the comprehensive-synonym anchor 5.

4 / 5

Distinctiveness Conflict Risk

The description is scoped to 'this repository', DESIGN.md/wiki governance, and the designer and design-mechanic agents, giving it a clear niche that generic design skills do not occupy. Minimal conflict risk fits anchor 5; it is not the anchor-4 case of overlap with closely related skills.

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

englishstreetventures/osn

Path

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