frontendby nextlevelbuilder
Design System
ckm: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.
What it changes
Passed 17 of 20 test cases with the skill, and 5 of 20 without it.
Without skill23%
With skill86%
Checks it passed that the model alone missed
- Passes the position argument set to 2
- Uses the /slides:create slash command
- Includes the domain option set to copy
and 15 more in the full report
14 fixed5 passed either way3 still failing0 broke
- Pass-rate lift
- +64 pp
- Tokens
- +47%
- Agent turns
- 0%
- Response time
- -37%
Model gemini-3.6-flashMeasured 9/7/2026v219 of 22 cases passed with skill · 20 comparable
See it in action
One of 14 test cases the skill fixed. Same model, same prompt, with and without the skill.
PromptWhich CSS file provides standard animation utility classes for slide element transitions in presentation HTML files?
What was checked, without and with the skill| Checked | Without skill | With skill |
|---|
| References assets/css/slide-animations.css for slide animation classes | Missed | Passed |
|---|
What's inside
The instructions your model reads when the skill loads.
SKILL.md238 lines35 filesincludes scripts
Design System
Token architecture, component specifications, systematic design, slide generation.
When to Use
- Design token creation
- Component state definitions
- CSS variable systems
- Spacing/typography scales
- Design-to-code handoff
- Tailwind theme configuration
- Slide/presentation generation
Token Architecture
Load: references/token-architecture.md
Three-Layer Structure
Primitive (raw values)
↓
Semantic (purpose aliases)
↓
Component (component-specific)
Example:
/* Primitive */
--color-blue-600: #2563EB;
/* Semantic */
--color-primary: var(--color-blue-600);
/* Component */
--button-bg: var(--color-primary);
Track record
Benchmark
17 / 20
test cases passed, vs 5 / 20 without
Adoption
- Users
- 0
- Times used
- 0
Safety and source details
SkillSafety
✓ 3 of 3 passed✓Code scan15 of 15 checks clean
0 critical · 0 warning · 0 info — scanner v5 — 9/7/2026
View 15 scanner checks
live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing
✓IntentSafe
LLM judge · does the skill do what it claims
✓ContentClean
LLM judge · policy & harmful-content review
Source
Importednextlevelbuilder / ui-ux-pro-max-skill
.claude/skills/design-system/SKILL.md
License MITImported 9/7/2026Version v2Bundled 34 files · scripts