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 - Design Token Generation: Convert a JSON token config into CSS variables or Tailwind theme config, with automatic reference resolution and dark-mode support. - Component Specifications: Detailed specs for buttons, inputs, cards, badges, alerts, dialogs, and tables covering variants, sizes, states, and anatomy. - Slide Deck Generation: Build brand-compliant HTML presentations using design tokens, Chart.js, BM25 slide search, and a contextual decision system with emotion-arc pattern breaking. - Token Validation: Scan HTML and source code for hardcoded colors and fonts that violate token usage. - Use Case: You need a 10-slide investor pitch deck that matches your brand. The Skill queries its strategy and layout CSVs, generates token-compliant HTML slides with Chart.js charts, and validates the output for hardcoded values. ## 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.
