ckm:design-system

Token architecture, component specifications, systematic design, slide generation. Load: references/token-architecture.md Example: Generate tokens: Validate usage: With brand: Extract primitives from brand colors/typography With ui-styling: Component tokens → Tailwind config Skill Dependencies: brand, ui-styling Primary Agents: ui-ux-designer, frontend-developer Brand-compliant presentations using design tokens + Chart.js + contextual decision system. Premium decks alternate between emotions for engagement: System calculates pattern breaks at 1/3 and 2/3 positions. ALL slides MUST: Working example with all features: - Design token creation - Component state definitions - CSS variable systems - Spacing/typography scales - Design-to-code handoff - Tailwind theme configuration - Slide/presentation generation - Import assets/design-tokens.css - single source of truth - Use CSS variables: var(--color-primary) , var(--slide-bg) , etc. - Use Chart.js for charts (NOT CSS-only bars) - Include navigation (keyboard arrows, click, progress bar) - Center align content - Focus on persuasion/conversion - Never use raw hex in components - always reference tokens - Semantic layer enables theme switching (light/dark) - Component tokens enable per-component customization - Use HSL format for opacity control - Document every token's purpose - Slides must import design-tokens.css and use var()...