What problem does it solve? Design decisions often live in scattered documents and never become consistent, reusable implementation rules, forcing developers to guess values. This Skill turns an approved design.md and visual direction into a structured token and component system that developers and AI agents can implement without ambiguity. ## Core Features & Use Cases - Three-Layer Token Architecture: Generates primitive, semantic, and mapped tokens (color, typography, spacing, motion) as JSON files plus CSS variables, with each value marked confirmed, inferred, or missing. - Component and State Specs: Defines reusable components (buttons, cards, carousels, deck slides) with full interaction states including hover, focus, disabled, loading, and error. - Slot-Based Layouts and Handoff Gate: Produces slot-based templates and a handoff checklist ensuring tokens are traceable, responsive rules are clear, and unresolved values are flagged. - Use Case: After finalizing a brand's visual language, use this Skill to produce primitive.tokens.json, semantic.tokens.json, motion.tokens.json, and a token-status.md so a front-end developer can build the site without guessing any style values. ## Quick Start Use the token-component-system skill to convert my approved design.md into design tokens, component specs, and a developer handoff file.
