design-token-pipeline
Installation
SKILL.md
Design Token Pipeline
Compile one source of truth (design tokens in W3C DTCG JSON) into every platform's native format with a deterministic CLI build. No Figma lock-in, no manual copy-paste of hex codes across files, no MCP — just npx and committed config.
0. When to Use / When NOT to Use
Use this skill when the task is to:
- Stand up a real design-token pipeline for a Web / company-system / design-system project.
- Output the same tokens to multiple targets (CSS vars + Tailwind + TS + iOS + Android).
- Handle dark mode or multiple brands/themes from one token set.
- Feed tokens into
taste-skill,shadcn, ortheme-factoryas a code foundation.
Do NOT use this skill for (route elsewhere):
| Task | Goes to |
|---|---|
| Pick a palette / generate a brand visual / theme board | theme-factory, brandkit, canvas-design (L8) |
| Decide what the premium look is (typography/color taste) | taste-skill, luxury (L3) |
| Author component visual styling in code | L3 style + vercel:shadcn |
| Define token taxonomy/naming philosophy only (no compile) | design-systems:design-token (prose) — this skill supersedes it for the actual build |