CtrlK
BlogDocsLog inGet started
Tessl Logo

design-system

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

59

Quality

70%

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

Fix and improve this skill with Tessl

tessl review fix ./.claude/skills/design-system/SKILL.md

The canonical home for this skill is design-system in nextlevelbuilder/ui-ux-pro-max-skill

SKILL.md
Quality
Evals
Security

Quality

Content

63%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 well-sectioned with runnable commands and a real references layer, but it is let down by an oversized inlined Slide System section and a significant bundle mismatch: many of the data, asset, and template paths it instructs Claude to read do not exist in the skill directory. The Chart.js example also contradicts the skill's own token-compliance rules by hardcoding hex values.

Suggestions

Move the Slide System details (CSV inventories, decision flow, Chart.js integration, pattern breaking) into a 'references/slide-system.md' file and keep only the quick-start commands and requirements in SKILL.md, cutting the body by roughly half.

Fix the bundle mismatch: either ship the referenced 'data/*.csv', 'assets/', and 'templates/design-tokens-starter.json' files or remove/repair those references, since the contextual decision workflow is unexecutable without them.

Rewrite the Chart.js example to use var(--color-primary) and token-derived colors so it complies with the skill's own 'WRONG - hardcoded' guidance, and add a brief feedback loop after the validation step (fix violations and re-run slide-token-validator.py).

DimensionReasoningScore

Conciseness

The body is mostly efficient tables and code, but the ~130-line Slide System section inlines CSV inventories, an ASCII decision-flow diagram, and Chart.js/animation details that duplicate what the data files and reference implementation already encode, and the three-layer token architecture is explained both inline and again in 'references/token-architecture.md'. This fits 'Mostly efficient but includes some unnecessary explanation or could be tightened' rather than the minor-trim level of 4.

3 / 5

Actionability

Commands are concrete and runnable — 'node scripts/generate-tokens.cjs --config tokens.json -o tokens.css', 'python scripts/search-slides.py "problem slide" --context --position 2 --total 9' — and the Chart.js snippet is copy-paste ready, all matching scripts that actually ship. It is not a 5 because the Contextual Decision Flow is descriptive ('Query slide-layout-logic.csv → layout') rather than executable, and the Chart.js example itself hardcodes '#FF6B6B' and 'rgba(255, 107, 107, 0.1)' instead of demonstrating the mandated var(--...) pattern.

4 / 5

Workflow Clarity

The Contextual Decision Flow gives a clearly numbered 5-step sequence ending in an explicit validation step ('5. Validate with slide-token-validator.py'), and the Quick Start pairs generation with 'validate-tokens.cjs'. It falls short of 5 because there is no error-recovery feedback loop (what to do when validation fails) and the early steps are abstract ('Parse goal/context') rather than concrete commands; slide generation is not destructive, so the cap-at-3 rule does not apply.

4 / 5

Progressive Disclosure

Scored against the actual bundle: the seven 'references/*.md' files exist and are clearly signaled via a topic table, but the body also points to files that are absent from the bundle — eight 'data/*.csv' files, 'assets/design-tokens.json', 'assets/css/slide-animations.css', 'assets/designs/slides/claudekit-pitch-251223.html', and template 'design-tokens-starter.json' — and the bulk of the Slide System content is inlined in SKILL.md where it belongs in a reference file. This matches 'Some structure but could be better organized... content that should be separate is inline' rather than the good-structure anchor at 4.

3 / 5

Total

14

/

20

Passed

Description

76%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 with explicit what/when structure and specific capability coverage. Its main weakness is trigger-term coverage: it leans on the somewhat unnatural phrase 'systematic design' and omits likely user phrasings like 'design system', 'theme', or 'Tailwind'.

Suggestions

Replace 'systematic design' in the 'Use for' clause with natural user phrasings such as 'design system', 'theming', or 'Tailwind theme configuration'.

Add 'slides' or 'slide decks' as a trigger synonym alongside 'brand-compliant presentations', since the slide-generation workflow is a major part of the skill but 'presentations' is the only near-synonym offered.

Consider naming the concrete actions (e.g., 'Generate CSS variables from JSON token configs, validate token usage, create brand-compliant slides') to lift specificity from capability nouns to executable verbs.

DimensionReasoningScore

Specificity

The description enumerates specific capabilities — 'Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation' — giving broad, concrete coverage of the domain. It stops short of a 5 because these are noun-phrase capabilities rather than concrete actions (compare 'Extract text and tables from PDF files, fill forms, merge documents').

4 / 5

Completeness

It explicitly answers both questions: what ('Token architecture, component specifications, and slide generation' plus a detailed second sentence) and when ('Use for design tokens, systematic design, brand-compliant presentations') with concrete trigger phrases. This mirrors the anchor-5 example structure; it is not a 4 because the 'when' clause is explicit and trigger-anchored rather than merely present.

5 / 5

Trigger Term Quality

'Use for design tokens, systematic design, brand-compliant presentations' includes the strong natural term 'design tokens' and 'presentations', but misses common variations users would say — 'design system', 'theme/theming', 'Tailwind', 'slides' — and 'systematic design' is not a phrase a user would naturally utter. This matches 'Some relevant keywords but missing common variations or synonyms' rather than the good-coverage anchor at 4.

3 / 5

Distinctiveness Conflict Risk

The design-token/CSS-variable niche is mostly distinct with clear triggers, but 'brand-compliant presentations' and 'component specs' overlap with sibling skills the body itself names ('brand', 'ui-styling') and with general presentation skills. This is 'Mostly distinct; minor overlap risk with closely related skills', not the clear-niche-minimal-conflict level of 5.

4 / 5

Total

16

/

20

Passed

Validation

87%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

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

Warning

referenced_paths_exist

Referenced path issues: 6 missing, 2 deeper-than-1-level

Warning

Total

14

/

16

Passed

Repository
nextlevelbuilder/ui-ux-pro-max-skill
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.