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 generates token-compliant CSS, component specs, and slide decks. ## Core Features & Use Cases - Token Generation & Validation: Convert JSON token configs into CSS variables or Tailwind config, and scan codebases for hardcoded values that violate the token system. - Component Specifications: Reference detailed specs for buttons, inputs, cards, badges, alerts, dialogs, and tables with states, variants, and sizing. - Slide Deck Generation: Build brand-compliant HTML presentations using design tokens, Chart.js visualizations, BM25 slide search, and a contextual decision system driven by strategy/layout/typography CSVs. - Use Case: A designer needs a 10-slide investor pitch that matches brand guidelines. The Skill selects layouts and emotion arcs from its decision CSVs, generates token-compliant HTML with charts, and validates the output for hardcoded values. ## Quick Start Ask the AI to generate a brand-compliant pitch deck or produce CSS design tokens from the starter JSON template using the design-system skill.
