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.

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 Example: 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: Validate usage: 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) 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 Pattern Breaking (Duarte Sparkline) Premium decks alternate between emotions for engagement: System calculates pattern breaks at 1/3 and 2/3 positions. Slide Requirements ALL slides MUST: 1. Import assets/design tokens.css single source of truth 2. Use CSS variables: var( color primary) , var( slide bg) , etc. 3. Use Chart.js for charts (NOT CSS only bars) 4. Include navigation (keyboard arrows, click, progress bar) 5. Center align content 6. Focus on persuasion/conversion Chart.js Integration Token Compliance Reference Implementation Working example with all features: Command Best Practices 1. Never use raw hex in components always reference tokens 2. Semantic layer enables theme switching (light/dark) 3. Component tokens enable per component customization 4. Use HSL format for opacity control 5. Document every token's purpose 6. Slides must import design tokens.css and use var() exclusively

design-system