token-build
Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.
- Category
- Design systems
- Status
- Experimental
- Use when
- generate CSS variables from our tokens
- set up a Style Dictionary pipeline
- export tokens to iOS and Android
- wire token validation into CI
- build Tailwind theme from tokens
- Works on
- DTCG token source files (tokens/*.json)
- Target platform(s) for generated artifacts
- Produces
- Platform-specific generated theme files (CSS, Tailwind, JS/TS, iOS, Android)
- A CI step that validates tokens and fails on stale generated artifacts
- Requires
- node, python
- Works with
- Claude Code, Codex, Cursor, OpenCode, Amp, Gemini CLI, GitHub Copilot, VS Code
- Tags
- design-tokens, design-system, versioning, multi-brand, governance
- Source
- plugin87/ux-ui-agent-skills by plugin87 · MIT · adapted for this repository
- Related skills
- design-tokenstoken-naming
Instructions from SKILL.md
Skill: Token Build
Turn the DTCG token source of truth into platform-ready outputs. Tokens are authored once; every platform output is generated.
Steps
- Read
workflows/token-build.md(architecture, tool options, resolution rules, output targets, CI). - Pick the tool: Style Dictionary (multi-platform, the default), Tokens Studio (Figma-owned tokens — pairs with
figma-integration), W3C DTCG export, or a small custom script (model onscripts/validate_tokens.py). - Honor the resolution rules: resolve aliases to final values per platform; expose semantic + component tokens (primitives stay internal); emit base + dark/brand/density overrides (
tokens/theming.json) as deltas only; format by$type. - Generate the requested target(s): CSS
:rootvars, Tailwind v4@theme, typed JS/TS, iOS Asset Catalog +Color.DS/Spacing, Androidcolors.xml/Compose theme. - Wire CI: on
tokens/*.jsonchange, runscripts/validate_tokens.py, regenerate, fail if committed artifacts are stale; gate colors withscripts/contrast.py.
Verification (definition of done)
python3 scripts/validate_tokens.pypasses (no unresolved aliases).- Regenerating produces no diff vs. committed artifacts.
- Dark/brand/density outputs contain only deltas, not full duplicates.
Supporting files
4 more files in this skill's folder. Markdown opens as a page, other text files open as source, and anything else downloads as it is.