token-build — скилл для Claude Code: сборка токенов в CSS, Tailwind
Превращает DTCG-токены в артефакты для платформ: CSS-переменные, Tailwind @theme, JS/TS, iOS и Android. Нужен, когда тема задаётся один раз, а собирается под каждый стек.
npx skills add plugin87/ux-ui-agent-skills --skill token-build -a claude-codeЧто делает token-build
Скилл читает tokens/*.json как источник правды и генерирует из них файлы темы. Токены пишутся один раз, дальше каждый вывод собирается автоматически. Инструмент выбирается на старте: Style Dictionary идёт по умолчанию, есть Tokens Studio для токенов из Figma, экспорт W3C DTCG и вариант с небольшим своим скриптом.
Правила разрешения алиасов заданы жёстко: ссылки раскрываются в финальные значения отдельно для каждой платформы, наружу отдаются семантические и компонентные токены, примитивы остаются внутри. Тёмная тема, бренд и плотность выводятся дельтами, а не полными копиями. Формат определяется по $type. Целевые артефакты — CSS :root, Tailwind v4 @theme, типизированный JS/TS, iOS Asset Catalog с Color.DS и Spacing, Android colors.xml и тема Compose.
Перед первым запуском скилл проверяет, на месте ли набор файлов. Если ставили только папки скиллов, проверка вернёт KIT_MISSING — тогда нужен npx ux-ui-agent-skills init или установка плагина, иначе скилл просто остановится. Это стоит помнить: без набора он не станет угадывать содержимое файлов, которые не смог открыть. В CI сборка вешается на изменение tokens/*.json: сначала validate_tokens.py, потом перегенерация, а расхождение с закоммиченными артефактами валит сборку. Цвета дополнительно проверяются через contrast.py.
Какие задачи решает
- собрать CSS-переменные из DTCG-токенов
- получить Tailwind v4
@themeбез ручного переноса значений - выгрузить цвета и отступы в iOS Asset Catalog
- сгенерировать тему Compose и
colors.xmlдля Android - поймать устаревшие артефакты в CI после правки токенов
Примеры запросов агенту
- Собери CSS-переменные и Tailwind
@themeизtokens/*.json - Настрой сборку токенов под iOS и Android через Style Dictionary
- Подключи проверку токенов и генерацию к CI на изменение
tokens/*.json
Как установить token-build
1Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill token-build -a claude-code2Вручную: положить файлы
~/.claude/skills/token-build/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/token-build/
1Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill token-build -a codex2Вручную: положить файлы
.agents/skills/token-build/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill token-build -a cursor2Вручную: положить файлы
.cursor/skills/token-build/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install plugin87/ux-ui-agent-skills token-build2Вручную: положить файлы
.github/skills/token-build/SKILL.md1Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill token-build -a gemini-cli2Командой платформы
gemini skills install https://github.com/plugin87/ux-ui-agent-skills --path .claude/skills/token-buildВручную: положить файлы
.devin/skills/token-build/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill token-build -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о token-build
Как установить token-build в Claude?
Выполните npx skills add plugin87/ux-ui-agent-skills --skill token-build -a claude-code. После этого скилл лежит в ~/.claude/skills/token-build/SKILL.md.
Что делает token-build?
Берёт DTCG-токены как источник правды и генерирует файлы темы под нужные платформы: CSS, Tailwind, JS/TS, iOS, Android и Compose. Заодно раскрывает алиасы и выводит переопределения тёмной темы, бренда и плотности дельтами.
Что нужно, чтобы скилл заработал?
Набор файлов из репозитория: скилл читает tokens/*.json, workflows/token-build.md и скрипты. Если установлены только папки скиллов, проверка вернёт KIT_MISSING и понадобится npx ux-ui-agent-skills init либо установка плагина.
Исходный текст
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
