# tokens

Проверяет, как в проекте устроены дизайн-токены, и помогает собрать трёхслойную систему с нуля. Пригодится, когда цвета и отступы расползлись по файлам.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 853 установки · ★ 398
- Автор: educlopez
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/educlopez/ui-craft/tree/HEAD/cli/assets/codex/skills/tokens/SKILL.md
- Обновлён: 2026-10-19
- HTML: https://affpapa.org/nevibecode/skills/tokens

## Что делает

Скилл сканирует проект и ищет определения токенов: CSS-переменные в `:root` и селекторах тем, `tailwind.config.js`, объекты тем в CSS-in-JS, файлы `design-tokens.json` и `tokens.css`. По результатам он строит опись: какие из семи категорий есть (цвет, отступы, типографика, радиусы, тени, анимация, z-index), какие слои присутствуют (примитивы, семантика, компоненты) и заданы ли светлая и тёмная темы.

Дальше поведение зависит от аргумента. `audit` даёт только список пробелов по критичности, без предложений по коду. `establish` пропускает аудит и сразу предлагает минимальный каркас. Можно сузить работу до одной категории — например, `color` или `shadows`. Пустой аргумент означает: есть токены — аудит, нет — сборка. Отдельно проверяется тёмная тема: не инверсия ли это одного `--text-primary`, не чистый ли чёрный фон, снижена ли насыщенность акцента, заменены ли тени кольцами границ.

Существующий файл токенов скилл не перезаписывает. Добавления показываются диффом, применять их вы. Перед записью нового файла он спросит, куда писать, и предложит вариант по структуре проекта: `globals.css` для Tailwind, `theme.ts` для CSS-in-JS, `tokens.css` для обычного CSS, `design-tokens.json` для нескольких потребителей. Tailwind на проект с ванильным CSS не навязывается, как и OKLCH — если проект целиком на sRGB, скилл отметит это и предложит миграцию, но конвертировать сам не станет.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add educlopez/ui-craft --skill tokens -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/tokens/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/tokens/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add educlopez/ui-craft --skill tokens -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/tokens/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add educlopez/ui-craft --skill tokens -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/tokens/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install educlopez/ui-craft tokens
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/tokens/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add educlopez/ui-craft --skill tokens -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/educlopez/ui-craft --path cli/assets/codex/skills/tokens
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/tokens/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add educlopez/ui-craft --skill tokens -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/educlopez/ui-craft/tree/HEAD/cli/assets/codex/skills/tokens/SKILL.md

## Когда брать
- найти, где в проекте уже объявлены токены
- понять, каких слоёв не хватает: примитивов, семантики или компонентов
- проверить, что тёмная тема сделана осознанно, а не инверсией текста
- собрать каркас токенов с нуля по семи категориям
- добавить недостающие переменные, не затирая существующий файл

## Примеры запросов агенту
- проведи аудит токенов в этом проекте
- собери каркас токенов с нуля, светлая и тёмная темы
- проверь только цветовые токены и тени

## Похожие
- [design-tokens](https://affpapa.org/nevibecode/skills/design-tokens.md) — скилл · 5900 установок
- [color-mode-and-theme](https://affpapa.org/nevibecode/skills/color-mode-and-theme.md) — скилл · 926 установок
- [tailwind-v4](https://affpapa.org/nevibecode/skills/tailwind-v4.md) — скилл · 812 установок
- [tailwindcss-advanced-design-systems](https://affpapa.org/nevibecode/skills/tailwindcss-advanced-design-systems.md) — скилл · 655 установок
- [glass-dark-ui](https://affpapa.org/nevibecode/skills/glass-dark-ui.md) — скилл · 1500 установок
- [tailwind-css](https://affpapa.org/nevibecode/skills/manutej-tailwind-css.md) — скилл · 461 установка

Из того же набора: [educlopez/ui-craft](https://affpapa.org/nevibecode/by/educlopez/ui-craft.md) — 14 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md