What problem does it solve? Maintaining visual consistency across components and presentations is hard when colors, spacing, and typography are hardcoded. This Skill provides a three-layer token architecture (primitive, semantic, component) with generators and validators, plus a system for producing token-compliant HTML slide decks. ## Core Features & Use Cases - Token Generation & Validation: Convert JSON token configs into CSS variables or Tailwind config, and scan code for hardcoded values that bypass tokens. - Component Specifications: Reference detailed specs for buttons, inputs, cards, badges, alerts, dialogs, and tables with variants, sizes, and states. - Slide Deck Generation: Build brand-compliant HTML presentations using BM25 slide search, decision CSVs for layout/typography/color, Chart.js charts, and token validation. - Use Case: A designer needs a 10-slide investor pitch that matches brand guidelines. The Skill selects layouts and emotion arcs from strategy CSVs, generates HTML using only CSS variables, and validates the output for token compliance. ## Quick Start Ask the AI to generate a brand-compliant pitch deck or generate CSS design tokens from the starter JSON config using the included scripts.
