Design System Tokens
Use this skill when frontend work touches tokens, themes, component-system
alignment, Figma variables, Tailwind config, CSS variables, or design-system
drift.
Workflow
- Identify the token sources: local code, Figma variables, Storybook docs,
CSS variables, Tailwind config, Style Dictionary, or DTCG-format files.
- Determine token categories: color, typography, spacing, radius, shadow,
motion, z-index, breakpoints, and component semantic tokens.
- Check for drift between design source, code source, and rendered UI.
- Prefer semantic tokens for product meaning and raw tokens for primitives.
- Keep extracted public-site tokens as runtime evidence, not Role source.
- Document migration or implementation steps without overwriting source of
truth silently.
Output
Return:
- token source-of-truth assessment
- drift or conflict findings
- recommended token structure
- implementation steps
- validation checks
Do not store private Figma data, public-site extracted tokens, or project token
snapshots in Role source.
1---2name: design-system-tokens3description: Use for design tokens, theming, light/dark or multi-brand support, token drift, component-system alignment, Figma variables, or Style Dictionary/DTCG token workflows.4---56# Design System Tokens78Use this skill when frontend work touches tokens, themes, component-system9alignment, Figma variables, Tailwind config, CSS variables, or design-system10drift.1112## Workflow13141. Identify the token sources: local code, Figma variables, Storybook docs,15 CSS variables, Tailwind config, Style Dictionary, or DTCG-format files.162. Determine token categories: color, typography, spacing, radius, shadow,17 motion, z-index, breakpoints, and component semantic tokens.183. Check for drift between design source, code source, and rendered UI.194. Prefer semantic tokens for product meaning and raw tokens for primitives.205. Keep extracted public-site tokens as runtime evidence, not Role source.216. Document migration or implementation steps without overwriting source of22 truth silently.2324## Output2526Return:2728- token source-of-truth assessment29- drift or conflict findings30- recommended token structure31- implementation steps32- validation checks3334Do not store private Figma data, public-site extracted tokens, or project token35snapshots in Role source.
seemseam