What problem does it solve? Adding a design token to a multi-surface design system is error-prone: a token that exists only in CSS is incomplete, and missing a registry entry, a dark-theme counterpart, or a documentation home causes build failures or silent drift. This Skill walks a new token through every required home so nothing is missed. ## Core Features & Use Cases - Tier and file placement guidance: Decides primitive vs. semantic tier and routes the token to the correct file (tokens-light.css, tokens-dark.css, tokens-typography.css, tokens-motion.css), including light/dark parity rules for colour and shadow. - Registry and prefix handling: Explains when a new prefix must be added to CATEGORY_PREFIXES in generate-token-registry.mjs and why registry.json must never be hand-edited. - Documentation and packaging coverage: Maps each token category to its foundations page, Storybook doc, and design.md entry, plus the subpath/exports steps a TypeScript-side token needs. - Use Case: When asked to add a new motion duration token, the Skill places it in tokens-motion.css, confirms no new prefix registration is needed, adds it to the motion Storybook docs and design.md, then runs validate-registry and build to verify. ## Quick Start Ask the AI to add a new design token, for example: add a --motion-duration-slow token to the design system.
