What problem does it solve? Maintaining visual consistency across components and presentations is hard when colors, spacing, and typography are hardcoded everywhere. This Skill centralizes design decisions into a three-layer token architecture (primitive, semantic, component) and generates validated, token-compliant HTML slides and CSS from a single JSON source of truth. ## Core Features & Use Cases - Token Generation & Validation: Convert a JSON token config into CSS variables or Tailwind theme config, and scan source code or HTML for hardcoded colors and fonts that violate token usage. - Component Specifications: Reference detailed specs for buttons, inputs, cards, badges, alerts, dialogs, and tables, including variants, sizes, states, and anatomy. - Slide Deck Generation: Build brand-compliant HTML presentations with Chart.js charts, BM25-based slide search, decision CSVs for layout/typography/color, and curated Pexels background images. - Use Case: A designer needs a 10-slide investor pitch. The Skill queries its strategy and layout CSVs, generates token-compliant HTML slides with charts and backgrounds, then validates the output for hardcoded values before delivery. ## Quick Start Ask the AI to generate a brand-compliant pitch deck or CSS design tokens from a JSON config using the design-system skill.
