token-build — Claude Code skill for token builds
Generate web and mobile theme files from DTCG JSON tokens, or wire the build into CI. Useful when one token source needs outputs for several platforms.
npx skills add plugin87/ux-ui-agent-skills --skill token-build -a claude-codeWhat token-build does
The skill follows workflows/token-build.md to choose a build approach and generate requested targets. Options include Style Dictionary, Tokens Studio, W3C DTCG export, or a small custom script. Outputs can include CSS variables, a Tailwind v4 theme, typed JS/TS, iOS assets, and an Android Compose theme.
It resolves aliases for each platform and treats dark, brand, and density variations as deltas from the base tokens. For CI, it describes validating token files, regenerating artifacts, checking for stale committed output, and gating colors with contrast.py. The tokens directory must be present; without the kit’s source files, the skill cannot run the build.
What it helps with
- generate CSS variables from DTCG tokens
- build a Tailwind v4 theme from token files
- create iOS or Android color assets
- add token validation and regeneration to CI
- check for unresolved aliases and stale artifacts
Example prompts for the agent
- Generate CSS variables and a Tailwind v4 theme from my DTCG tokens.
- Set up CI to validate
tokens/*.jsonand regenerate the platform files. - Build an Android Compose theme with dark-mode overrides.
How to install token-build
1Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill token-build -a claude-code2Manually: put the files in place
~/.claude/skills/token-build/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/token-build/
1Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill token-build -a codex2Manually: put the files in place
.agents/skills/token-build/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill token-build -a cursor2Manually: put the files in place
.cursor/skills/token-build/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install plugin87/ux-ui-agent-skills token-build2Manually: put the files in place
.github/skills/token-build/SKILL.md1Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill token-build -a gemini-cli2Platform CLI
gemini skills install https://github.com/plugin87/ux-ui-agent-skills --path .claude/skills/token-buildManually: put the files in place
.devin/skills/token-build/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill token-build -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about token-build
How do I install token-build in Claude Code?
Run npx skills add plugin87/ux-ui-agent-skills --skill token-build -a claude-code. The skill file is at ~/.claude/skills/token-build/SKILL.md.
What does token-build do?
It converts DTCG JSON tokens into theme artifacts for web and mobile targets, including CSS, Tailwind v4, JS/TS, iOS, and Android.
What does token-build need to run?
The kit’s tokens directory must be available so the skill can read the source token files.
Source text
SKILL.md · MIT
---
name: token-build
description: 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.
---
# Skill: Token Build
> **Step 0: is the kit here?** This skill reads files from the kit. Check once:
> `ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING`
> On `KIT_MISSING` only the skill folders were installed, which is what
> `npx skills add` does. Say so plainly, point the user at
> `npx ux-ui-agent-skills init` or the plugin install, and stop. Do not guess the
> contents of a file you could not open.
Turn the DTCG token source of truth into platform-ready outputs. Tokens are authored once; every platform output is generated.
## Steps
1. Read `${CLAUDE_SKILL_DIR}/../../../workflows/token-build.md` (architecture, tool options, resolution rules, output targets, CI).
2. 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 on `${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py`).
3. Honor the resolution rules: resolve aliases to final values per platform; expose semantic + component tokens (primitives stay internal); emit base + dark/brand/density overrides (`${CLAUDE_SKILL_DIR}/../../../tokens/theming.json`) as deltas only; format by `$type`.
4. Generate the requested target(s): CSS `:root` vars, Tailwind v4 `@theme`, typed JS/TS, iOS Asset Catalog + `Color.DS`/`Spacing`, Android `colors.xml`/Compose theme.
5. Wire CI: on `${CLAUDE_SKILL_DIR}/../../../tokens/*.json` change, run `${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py`, regenerate, fail if committed artifacts are stale; gate colors with `${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py`.
## Verification (definition of done)
- `python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py` passes (no unresolved aliases).
- Regenerating produces no diff vs. committed artifacts.
- Dark/brand/density outputs contain only deltas, not full duplicates.
© plugin87 · MIT · plugin87/ux-ui-agent-skills
