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 for design tokens and enforces their use in components and generated slides. ## Core Features & Use Cases - Three-Layer Token Architecture: Define primitive, semantic, and component tokens in JSON, then generate CSS variables or Tailwind config automatically. - Component Specifications: Reference detailed specs for buttons, inputs, cards, badges, alerts, dialogs, and tables with states, variants, and sizing. - Slide Generation: Build brand-compliant HTML pitch decks using decision-system CSVs (layouts, typography, color logic, copywriting formulas), Chart.js charts, and curated background images, then validate token compliance. - Use Case: Create a 10-slide investor pitch deck where every color and font references your design tokens, then run the validator to catch any hardcoded hex values before sharing. ## Quick Start Ask the AI to generate a brand-compliant pitch deck or generate CSS design tokens from the starter JSON template using the included scripts.
