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) plus tooling to generate CSS variables, validate token usage, and produce brand-compliant 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 variants, sizes, and states. - Slide Generation: Build persuasive HTML pitch decks using BM25 search over strategy/layout/copy/chart CSV databases, Chart.js charts, curated Pexels backgrounds, and token compliance validation. - Use Case: A designer needs a 10-slide investor pitch. The Skill searches slide strategies, picks layouts and typography per position, generates token-compliant HTML with Chart.js revenue charts, and validates no hardcoded hex colors remain. ## Quick Start Ask the AI to generate design tokens from the starter JSON config and create a brand-compliant pitch deck using the slide generation scripts.
