What problem does it solve? Maintaining visual consistency across components and presentations is hard when colors, spacing, and typography are hardcoded everywhere. This Skill establishes a single source of truth with a three-layer token architecture (primitive, semantic, component) and enforces it through generation and validation scripts. ## Core Features & Use Cases - Token Architecture & Generation: Define primitive, semantic, and component tokens in JSON and generate CSS variables or Tailwind config with generate-tokens.cjs. - Component Specifications: Reference detailed specs for buttons, inputs, cards, badges, alerts, dialogs, and tables with states, variants, and sizing. - Slide Generation: Create brand-compliant HTML pitch decks using design tokens, Chart.js, BM25 slide search, and CSV-driven layout/typography/color decision systems. - Validation: Detect hardcoded colors and fonts in code and HTML with validate-tokens.cjs and html-token-validator.py. - Use Case: A team needs a 10-slide investor pitch that matches their brand. The Skill queries its decision CSVs for layout and emotion arcs, generates token-compliant HTML slides with Chart.js charts, and validates the output for hardcoded values. ## Quick Start Ask the AI to generate design tokens from the starter JSON template and then create a brand-compliant pitch deck using the slide generation scripts.
