mcpbeat

Token Build

plugin87/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.

427 tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
482
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill token-build

The instruction itself

3 sections, as written by the author

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.

How to use it

Copy the folder

Take plugin87/token-build from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.