---
name: Token Build
slug: token-build
category: DevOps
description: Token Build turns DTCG token sources into platform artifacts like CSS variables, Tailwind @theme, JS/TS, and mobile theme files. Use it to generate token outputs, wire token CI, or validate token changes across platforms.
github: "https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/token-build"
language: JavaScript
stars: 639
forks: 64
install: "npx degit https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/token-build ~/.claude/skills/token-build"
installs_to: ~/.claude/skills/token-build
source_path: .claude/skills/token-build/SKILL.md
collection_size: 17
category_size: 798
collection_url: "https://dirskills.com/collections/plugin87/ux-ui-agent-skills"
added: 2026-08-24T05:18:11.353Z
last_synced: 2026-08-24T05:18:11.353Z
canonical_url: "https://dirskills.com/skills/token-build"
---

# Token Build

Token Build turns DTCG token sources into platform artifacts like CSS variables, Tailwind @theme, JS/TS, and mobile theme files. Use it to generate token outputs, wire token CI, or validate token changes across platforms.

**Install:**

```bash
npx degit https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/token-build ~/.claude/skills/token-build
```

## README

# Skill: Token Build

Turn the DTCG token source of truth into platform-ready outputs. Tokens are authored once; every platform output is generated.

## Steps
1. Read `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 `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 (`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 `tokens/*.json` change, run `scripts/validate_tokens.py`, regenerate, fail if committed artifacts are stale; gate colors with `scripts/contrast.py`.

## Verification (definition of done)
- `python3 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.