What problem does it solve? Maintaining visual consistency across components and presentations is difficult when colors, spacing, and typography are hardcoded. This Skill establishes a three-layer token architecture (primitive, semantic, component) and generates validated, token-compliant CSS and HTML slides. ## 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 violate the token system. - Component Specifications: Reference detailed specs for buttons, inputs, cards, badges, alerts, dialogs, and tables covering variants, sizes, and states. - Slide Deck Generation: Build brand-compliant HTML presentations with Chart.js charts, BM25-based slide search, emotion-arc strategies, and automated token compliance validation. - Use Case: A designer needs a 10-slide investor pitch that matches brand guidelines. The Skill queries decision CSVs for layout, typography, and color logic, generates the HTML deck using design tokens, and validates it for hardcoded values. ## Quick Start Ask the AI to generate a brand-compliant pitch deck using the design-system skill, for example: create a 10-slide investor pitch using design tokens.
