CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

Quality

78%

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 ./cli/assets/skills/design-system/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%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 dense, action-oriented body with real commands, tables, and validation steps — but it functions as two skills in one file, with the slide system inlined instead of disclosed, and several referenced bundle files (the data/ CSVs and starter template) missing entirely. The internally contradictory Chart.js example (hardcoded hex labeled as brand color next to a rule forbidding hardcoded hex) also undermines the token-compliance guidance.

Suggestions

Ship the eight data/*.csv files referenced in the Decision System CSVs table (slide_search_core.py resolves them to the skill's own data/ directory and the search workflow fails without them), or correct the paths to wherever they actually live.

Move the Slide System section (~140 lines: CSVs, decision flow, pattern breaking, Chart.js, compliance) into its own references/ file, keeping a short overview with a pointer in SKILL.md, and add the missing design-tokens-starter.json template or drop it from the Templates table.

Fix the Chart.js example to use var(--color-primary) instead of hardcoded '#FF6B6B', and add a brief validate→fix→re-validate loop after the token-validation commands to complete the workflow's feedback cycle.

DimensionReasoningScore

Conciseness

The body is table- and code-driven with almost no explanation of concepts Claude already knows (no 'what is a CSS variable' padding), and the Script Paths section usefully disambiguates path resolution. Minor trims possible: the pinned CDN version 'chart.js@4.4.1' is time-sensitive information not in a deprecated section, and the token-architecture example duplicates content that references/token-architecture.md (already flagged 'Load:') presumably covers. Not the lean 'every token earns its place' anchor 5, but above the 'mostly efficient with unnecessary explanation' anchor 3.

4 / 5

Actionability

Concrete copy-paste commands abound: 'node scripts/generate-tokens.cjs --config tokens.json -o tokens.css', 'node scripts/validate-tokens.cjs --dir src/', multiple search-slides.py invocations with flags, a complete Chart.js HTML snippet, and explicit CORRECT/WRONG token-compliance examples. Minor gaps: the Chart.js example hardcodes '#FF6B6B' with '// Use brand coral', directly contradicting the 'WRONG - hardcoded' compliance example below it, and the 'design-tokens-starter.json' template is referenced but absent from the bundle.

4 / 5

Workflow Clarity

The Contextual Decision Flow is a clear 5-step numbered sequence ending in an explicit validation step ('5. Validate with slide-token-validator.py'), and the Quick Start pairs generation with a validation command. However, no error-recovery feedback loop is described (what to do when validation fails, or how to fix hardcoded-value findings from validate-tokens.cjs), which keeps it at 'clear sequence with most checkpoints; minor validation gaps' rather than the anchor-5 'feedback loops for error recovery'.

4 / 5

Progressive Disclosure

Structure is good in places — seven references/ files are all real, one level deep, and clearly signaled via tables — but scored against the actual bundle, two referenced path groups are missing: all eight 'data/*.csv' files (which slide_search_core.py requires via DATA_DIR = parent.parent/'data', so the documented search workflow fails as shipped) and the 'design-tokens-starter.json' template. Additionally, the ~140-line Slide System section (CSVs, decision flow, Chart.js, compliance rules) is inlined in SKILL.md when it clearly belongs in its own reference file, matching 'content that should be separate is inline'.

3 / 5

Total

15

/

20

Passed

Description

78%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 an explicit 'Use for...' trigger clause, concrete capability enumeration, and a well-differentiated design-token niche. Its main weakness is that capabilities are stated as noun-phrase topics rather than concrete actions, and a few high-value natural triggers ('design system', 'slides', 'Tailwind') are absent.

DimensionReasoningScore

Specificity

The description names the domain concretely ("Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation") but is an inventory of noun phrases rather than concrete verb-driven actions like the anchor-4 example ("Extracts text from PDF files, fills forms, converts pages to images"). Only "slide generation/creation" reads as an action, so it sits at the 'names domain and limited concrete actions' level rather than clearly above it.

3 / 5

Completeness

It explicitly answers both questions: 'what' via "Token architecture, component specifications, and slide generation. Three-layer tokens..., CSS variables, spacing/typography scales, component specs, strategic slide creation" and 'when' via the explicit trigger clause "Use for design tokens, systematic design, brand-compliant presentations." This matches the anchor-5 example's structure (concrete capability list + explicit 'Use when' with concrete trigger phrases); the anchor-4 example's 'when could be more explicit' caveat does not apply since the when-clause is explicit and specific.

5 / 5

Trigger Term Quality

Good natural keyword coverage: "design tokens", "CSS variables", "brand-compliant presentations", "systematic design", "spacing/typography scales" are phrases users would plausibly say. A few natural terms are missing — notably "design system" (the skill's own name), "slides"/"deck", and "Tailwind" (which the body covers) — which keeps it below the comprehensive-synonyms anchor 5.

4 / 5

Distinctiveness Conflict Risk

The design-token/component-spec niche is clearly staked out with distinct triggers ("design tokens", "three-layer tokens", "token architecture"), giving minimal conflict risk there. Minor overlap risk remains with generic presentation/slide skills via "slide generation" and "brand-compliant presentations", matching 'mostly distinct; minor overlap risk with closely related skills' rather than the clean-niche anchor 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

Path

cli/assets/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.