design-system

name design-system description 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. argument-hint [component or token] license MIT metadata {"author":"claudekit","version":"1.0.0"} 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); Script Paths Script paths in this skill and its references/ are relative to the directory that contains this SKILL.md, not to the project: scripts/<file> is this skill's own scripts/ folder, and ../<skill>/scripts/<file> is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as docs/brand-guidelines.md , assets/design-tokens.json or src/ relative to it. Quick Start Generate tokens: node scripts/generate-tokens.cjs --config tokens.json -o tokens.css Validate usage: node scripts/validate-tokens.cjs -- dir src/ References Topic File Token Architecture references/token-architecture.md Primitive Tokens references/primitive-tokens.md Semantic Tokens references/semantic-tokens.md Component Tokens references/component-tokens.md Component Specs references/component-specs.md States & Variants references/states-and-variants.md Tailwind Integration references/tailwind-integration.md Component Spec Pattern Property Default Hover Active Disabled Background primary primary-dark primary-darker muted Text white white white muted-fg Border none none none muted-border Shadow sm md none none Scripts Script Purpose generate-tokens.cjs Generate CSS from JSON token config validate-tokens.cjs Check for hardcoded values in code search-slides.py BM25 search + contextual recommendations slide-token-validator.py Validate slide HTML for token compliance fetch-background.py Fetch images from Pexels/Unsplash Templates Template Purpose design-tokens-starter.json Starter JSON with three-layer structure Integration With brand: Extract primitives from brand colors/typography With ui-styling: Component tokens → Tailwind config Skill Dependencies: brand, ui-styling Primary Agents: ui-ux-designer, frontend-developer Slide System Brand-compliant presentations using design tokens + Chart.js + contextual decision system. Source of Truth File Purpose docs/brand-guidelines.md Brand identity, voice, colors assets/design-tokens.json Token definitions (primitive→semantic→component) assets/design-tokens.css CSS variables (import in slides) assets/css/slide-animations.css CSS animation library Slide Search (BM25) # Basic search (auto-detect domain) python scripts/search-slides.py "investor pitch" # Domain-specific search python scripts/search-slides.py "problem agitation" -d copy python scripts/search-slides.py "revenue growth" -d chart # Contextual search (Premium System) python scripts/search-slides.py "problem slide" --context --position 2 --total 9 python scripts/search-slides.py "cta" --context --position 9 --prev-emotion frustration Decision System CSVs File Purpose data/slide-strategies.csv 15 deck structures + emotion arcs + sparkline beats data/slide-layouts.csv 25 layouts + component variants + animations data/slide-layout-logic.csv Goal → Layout + break_pattern flag data/slide-typography.csv Content type → Typography scale data/slide-color-logic.csv Emotion → Color treatment data/slide-backgrounds.csv Slide type → Image category (Pexels/Unsplash) data/slide-copy.csv 25 copywriting formulas (PAS, AIDA, FAB) data/slide-charts.csv 25 chart types with Chart.js config Contextual Decision Flow 1. Parse goal/context ↓ 2. Search slide-strategies.csv → Get strategy + emotion beats ↓ 3. For each slide: a. Query slide-layout-logic.csv → layout + break_pattern b. Query slide-typography.csv → type scale c. Query slide-color-logic.csv → color treatment d. Query slide-backgrounds.csv → image if needed e. Apply animation class from slide-animations.css ↓ 4. Generate HTML with design tokens ↓ 5. Validate with slide-token-validator.py Pattern Breaking (Duarte Sparkline) Premium decks alternate between emotions for engagement: "What Is" (frustration) ↔ "What Could Be" (hope) System calculates pattern breaks at 1/3 and 2/3 positions. Slide Requirements ALL slides MUST: Import assets/design-tokens.css - single source of truth Use CSS variables: var(--color-primary) , var(--slide-bg) , etc. Use Chart.js for charts (NOT CSS-only bars) Include navigation (keyboard arrows, click, progress bar) Center align content Focus on persuasion/conversion Chart.js Integration < script src = "https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" > </ script > < canvas id = "revenueChart" > </ canvas > < script > new Chart ( document . getElementById ( 'revenueChart' ), { type : 'line' , data : { labels : [ 'Sep' , 'Oct' , 'Nov' , 'Dec' ], datasets : [{ data : [ 5 , 12 , 28 , 45 ], borderColor : '#FF6B6B' , // Use brand coral backgroundColor : 'rgba(255, 107, 107, 0.1)' , fill : true , tension : 0.4 }] } }); </ script > Token Compliance /* CORRECT - uses token */ background : var (--slide-bg); color : var (--color-primary); font-family : var (--typography-font-heading); /* WRONG - hardcoded */ background : #0D0D0D ; color : #FF6B6B ; font-family : 'Space Grotesk' ; Reference Implementation Working example with all features: assets/designs/slides/claudekit-pitch-251223.html Command /slides:create "10-slide investor pitch for ClaudeKit Marketing" Best Practices Never use raw hex in components - always reference tokens Semantic layer enables theme switching (light/dark) Component tokens enable per-component customization Use HSL format for opacity control Document every token's purpose Slides must import design-tokens.css and use var() exclusively