What problem does it solve? Maintaining visual consistency across components and presentations is difficult when colors, spacing, and typography are hardcoded. This Skill provides a three-layer token architecture (primitive, semantic, component) with CSS variable generation, validation tooling, and a slide generation system that enforces token compliance. ## Core Features & Use Cases - Token Generation & Validation: Convert JSON token configs into CSS variables or Tailwind theme config, and scan codebases for hardcoded values that bypass the token system. - Component Specifications: Reference detailed specs for buttons, inputs, cards, badges, alerts, dialogs, and tables covering variants, sizes, states, and anatomy. - Slide Deck Generation: Create brand-compliant HTML presentations using design tokens, Chart.js, BM25 slide search, and a contextual decision system with emotion arcs and layout logic. - Use Case: A frontend developer needs a dark-mode-ready design system. They start from the starter JSON template, generate CSS variables, then produce an investor pitch deck where every slide imports design-tokens.css and passes the token validator. ## Quick Start Ask the AI to generate design tokens from the starter JSON template and create a brand-compliant pitch deck using the design-system skill.
