Claude Skill

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 gen

LLM Mart · 0 points · 3 0 0

Virus-scanned Reviewed automatically before listing.

Full trust report

Download plugin87-ux-ui-agent-skills-.claude_skills_token-build-278e9d9.zip · 0 KB

plugin87/ux-ui-agent-skills 1406 145 forks MIT Updated 9d ago

Part of plugin87/ux-ui-agent-skills — 18 skills

Install

skills CLI npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/token-build

Claude Code

claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install plugin87-ux-ui-agent-skills@llmmart

Git git clone https://github.com/plugin87/ux-ui-agent-skills.git

The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole plugin87/ux-ui-agent-skills collection as a plugin from our marketplace. Git is the plain clone.

Skill manifest

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 on scripts/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 :root vars, Tailwind v4 @theme, typed JS/TS, iOS Asset Catalog + Color.DS/Spacing, Android colors.xml/Compose theme.
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.

Files (ux-ui-agent-skills)

SKILL.md 1.7 KB

---
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.
invocation: model
---

# 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.