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

77%

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

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 well-structured, actionable overview whose token-system half is fully backed by real bundle files, while its slide-system half references a data/ directory and scripts that are not shipped, creating navigation and execution dead-ends. Workflow sequencing is clear but lacks an error-recovery loop, and one code example contradicts the skill's own token rules.

Suggestions

Ship the 8 data/*.csv files (or repoint the Decision System CSVs table to their actual location) — scripts/slide_search_core.py resolves data/ relative to the bundle root where it does not exist, so every search-slides.py command in SKILL.md fails as delivered.

Document the four unlisted scripts in the Scripts table (embed-tokens.cjs, generate-slide.py, html-token-validator.py, slide_search_core.py), especially generate-slide.py which is the largest script in the bundle and otherwise undiscoverable.

Add a validation feedback loop to the Contextual Decision Flow (e.g., 'if slide-token-validator.py reports hardcoded values, replace them with var(--*) tokens and re-validate') and fix the Chart.js example, which hardcodes #FF6B6B in violation of the skill's own Token Compliance section.

DimensionReasoningScore

Conciseness

The body is dense tables and copy-paste commands with no padding explaining concepts Claude already knows; minor trims are possible (the full inline Chart.js HTML snippet, the Duarte sparkline aside, and the duplicated "component specs" mention).

4 / 5

Actionability

Provides concrete executable commands with flags (generate-tokens.cjs, three search-slides.py variants), correct/wrong CSS examples, and a specific CSV-driven decision pipeline, but the Chart.js example itself hardcodes hex values contradicting the skill's own Token Compliance section and search commands depend on CSVs absent from the bundle.

4 / 5

Workflow Clarity

The Contextual Decision Flow is a clearly sequenced 5-step pipeline ending in "Validate with slide-token-validator.py", so most checkpoints are present, but no error-recovery feedback loop is specified for when validation fails.

4 / 5

Progressive Disclosure

The body is a well-signaled overview with a References table of 7 real one-level-deep files, but all 8 data/*.csv files the decision system depends on are missing from the bundle (slide_search_core.py resolves them to a nonexistent data/ directory) and 4 of 9 shipped scripts — including the largest, generate-slide.py — are undocumented.

3 / 5

Total

15

/

20

Passed

Description

75%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 solid description with a clear what-list of concrete capabilities and an explicit 'Use for...' trigger clause covering both of the skill's domains. It sits just below top marks because the when-clause is somewhat narrow and a few natural trigger synonyms are missing.

DimensionReasoningScore

Specificity

Lists several concrete capabilities ("Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation") but they are phrased as domain nouns with minor gaps (validation, Tailwind tooling) and a redundant repeat of component specs.

4 / 5

Completeness

Clearly answers both what ("Token architecture, component specifications, and slide generation...") and when (explicit "Use for..." clause), but the when-clause covers only three topic areas and could name more concrete trigger situations to reach the top anchor.

4 / 5

Trigger Term Quality

"Use for design tokens, systematic design, brand-compliant presentations" provides good natural keywords a user would say, but misses common variations like "design system", "branding", "slides/deck" in the when-clause, and "Tailwind theme".

4 / 5

Distinctiveness Conflict Risk

"Design tokens" and "brand-compliant presentations" carve a mostly distinct niche, though spanning both token systems and slide generation creates minor overlap risk with closely related ui-styling or presentation skills.

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

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