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 three-layer token architecture (primitive, semantic, component) as a single source of truth and generates token-compliant CSS and HTML slides. ## 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 token usage. - 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 with Chart.js charts, BM25 slide search, decision-system CSVs for layout/typography/color, and automated token compliance validation. - Use Case: A team needs a 10-slide investor pitch deck that matches their brand. The Skill queries strategy and layout CSVs, generates HTML slides importing design-tokens.css, and validates the output for hardcoded colors. ## Quick Start Ask the AI to generate a brand-compliant pitch deck or generate CSS variables from your design tokens JSON config.
