Builds three-layer design token architectures (primitive → semantic → component), component specs, and Tailwind themes, plus brand-compliant HTML slides with Chart.js and a contextual layout decision system.
---
name: design-system
description: Token architecture, component specifications, and slide generation. Three-layer tokens (primitive to semantic to component), CSS variables, spacing/typography scales, component specs, and strategic brand-compliant slides. Use for design tokens, systematic design, and presentations.
---
# Design System
A token architecture and component-spec system with a strategic slide generator.
## How to use
1. Structure tokens in three layers — primitive (raw values) to semantic (purpose aliases) to component (component-specific) — exposed as CSS variables.
2. Generate tokens from JSON config: `node scripts/generate-tokens.cjs --config tokens.json -o tokens.css`; check for hardcoded values with `validate-tokens.cjs --dir src/`.
3. Define component specs as state tables (default/hover/active/disabled) and integrate tokens into the Tailwind theme.
4. For slides, search the BM25 decision base (`python scripts/search-slides.py "<goal>" --context`) which selects strategy, layout, typography, color, and background from CSV decision tables.
5. Generate slide HTML that imports `design-tokens.css`, uses `var()` exclusively, and renders charts with Chart.js; validate with `slide-token-validator.py`.
Full skill & source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/5e2c0a2b5ec81bf5733ddcee2d7db4c34dc71aa3/.claude/skills/design-systemSign in to rate and review this skill.
No reviews yet. Be the first to review this skill.