CtrlK
BlogDocsLog inGet started
Tessl Logo

design-system

Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with DESIGN.md rationale and an interactive HTML preview, score the UI across 10 dimensions, and flag AI-slop patterns. Use when starting a design system, auditing visual consistency before a redesign, or reviewing a PR that touches styling.

63

Quality

75%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./skills/design-system/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

61%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 clean, concise overview that clearly separates the three modes and names concrete outputs (DESIGN.md, design-tokens.json, design-preview.html). Its main weakness is actionability and workflow rigor: the Mode 1 steps are abstract directives with no executable commands and no validation checkpoints anywhere in the pipeline.

Suggestions

Make Mode 1's steps executable: give concrete commands or search patterns for scanning (e.g. grep/glob patterns for extracting colors and spacing from CSS/Tailwind/styled-components) instead of abstract directives like 'Scan CSS for existing patterns'.

Add validation checkpoints and error-recovery loops to the generate workflow, e.g. verify design-tokens.json is valid JSON, check the HTML preview renders self-contained with no external deps, and re-fix on failure before finishing.

Move the 10-dimension audit rubric and the AI-slop pattern list into one-level-deep reference files (e.g. references/audit-dimensions.md, references/slop-patterns.md) with clearly signaled links, keeping SKILL.md as a lean overview.

DimensionReasoningScore

Conciseness

The body is lean and well-sectioned with no explanation of concepts Claude already knows, though the rhetorical glosses in the audit list ('are you using your palette or random hex values?') are minor padding that could be trimmed.

4 / 5

Actionability

Mode 1's steps are directive but abstract ('Scan CSS/Tailwind/styled-components for existing patterns', 'Research 3 competitor sites') with no executable commands or code; only the '/design-system ...' example invocations are concrete, leaving the core workflow as a checklist rather than executable guidance.

3 / 5

Workflow Clarity

Mode 1 has a clear 6-step sequence and named outputs, but no validation checkpoints (e.g. verifying the generated tokens JSON parses or the preview renders) and no error-recovery loops; Modes 2 and 3 present lists with no sequence at all.

3 / 5

Progressive Disclosure

Sections are well-organized with no bundle files or buried references, and the ~77-line body is compact enough to stay mostly inline; however it exceeds the simple-skill size bar, and the 10-dimension audit rubric and slop-pattern list are natural candidates for one-level-deep reference files.

4 / 5

Total

14

/

20

Passed

Description

88%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, artifact-named capabilities in third person, paired with an explicit 'Use when' trigger clause covering generation, audit, and PR-review scenarios. Trigger-term coverage is good but could add common synonyms like 'design tokens' or 'CSS variables'.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions with named artifacts — 'extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties', 'score the UI across 10 dimensions', 'flag AI-slop patterns' — giving comprehensive, not merely minor-gap, coverage.

5 / 5

Completeness

It explicitly answers both 'what' (extract tokens into design-tokens.json and CSS custom properties, DESIGN.md rationale, HTML preview, 10-dimension audit, slop detection) and 'when' via an explicit 'Use when...' clause with three concrete trigger scenarios.

5 / 5

Trigger Term Quality

Natural phrases users would say are present ('starting a design system', 'auditing visual consistency before a redesign', 'reviewing a PR that touches styling'), but common variations like 'design tokens', 'CSS variables', or 'style guide' are missing.

4 / 5

Distinctiveness Conflict Risk

It carves out a clear design-system niche with distinct triggers, but 'reviewing a PR that touches styling' could compete with a generic code-review skill, leaving minor overlap risk.

4 / 5

Total

18

/

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

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
affaan-m/ECC
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.