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 through a three-layer token architecture (primitive, semantic, component) and enforces it with automated validation, while also generating brand-compliant slide decks. ## Core Features & Use Cases - Design Token Generation: Convert JSON token configs into CSS variables or Tailwind theme config with automatic reference resolution and dark-mode support. - Token Compliance Validation: Scan HTML and source code for hardcoded hex colors, rgb values, and fonts that bypass the token system. - Slide Deck Generation: Create persuasive HTML presentations using decision-system CSVs (layouts, typography, color logic, copywriting formulas), Chart.js charts, BM25 slide search, and curated Pexels backgrounds. - Use Case: A frontend developer needs a consistent button system and an investor pitch deck. They generate tokens from the starter JSON, validate their components against the tokens, then produce a 10-slide deck that imports design-tokens.css and passes the token validator. ## Quick Start Ask the assistant to generate design tokens from the starter JSON config and then create a brand-compliant pitch deck using the slide generation scripts.
