What problem does it solve? Maintaining visual consistency across components and presentations is difficult when colors, spacing, and typography are hardcoded. This Skill establishes a single source of truth for design tokens and automates the creation of token-compliant components and slide decks. ## Core Features & Use Cases - Three-Layer Token Architecture: Generates CSS variables from a JSON config using primitive, semantic, and component layers, with dark-mode support and Tailwind config output. - Component Specifications: Provides detailed specs for buttons, inputs, cards, badges, alerts, dialogs, and tables including variants, sizes, and states. - Slide Generation: Builds brand-compliant HTML pitch decks with Chart.js charts, BM25 slide search, contextual layout decisions, and token compliance validation. - Use Case: A designer needs a 10-slide investor pitch that matches brand guidelines. The Skill queries decision CSVs for layout, typography, and color logic, generates the HTML deck using design tokens, and validates it for hardcoded values. ## Quick Start Ask the AI to generate design tokens from the starter JSON config and then create a brand-compliant pitch deck using the slide generation scripts.
