# using-ui-stack

Заставляет агента строить интерфейс по фиксированным правилам: сетка 8px, цвета 60-30-10, типографика, тёмная тема и состояния интерактивных элементов.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 539 установок · ★ 866
- Автор: spencerpauly
- Лицензия: CC0-1.0 · policy=mirror · лицензия открытая, файл — в исходнике
- Исходник: https://github.com/spencerpauly/awesome-cursor-skills/tree/HEAD/resources/using-ui-stack/SKILL.md
- Обновлён: 2026-08-02
- HTML: https://affpapa.org/nevibecode/skills/using-ui-stack

## Что делает

Скилл включается, когда агент генерирует компоненты интерфейса, и подставляет в работу набор правил вместо случайных значений. Отступы считаются кратными 8px, цвета делятся по схеме 60-30-10 с семантическими статусами, шрифтовые размеры идут по шкале с шагом 1.25. Для тёмной темы прописаны пары токенов: фон `white` → `slate-950`, текст `slate-900` → `slate-100`, границы `slate-200` → `slate-800`. Чистый чёрный в тёмной теме не используется.

Каждый интерактивный элемент получает пять состояний: обычное, наведение, нажатие, фокус с видимым кольцом и отключённое. Есть требования по доступности — контраст не ниже 4.5:1 для текста, зоны нажатия от 44×44px, семантическая разметка и навигация с клавиатуры. Анимации ограничены 150–300ms и учитывают `prefers-reduced-motion`. Для наложений задана шкала `z-index` от `z-10` для выпадающих списков до `z-60` для подсказок.

Порядок работы такой: сначала скилл проверяет, есть ли в проекте конфиг `ui-stack` или свои токены. Если их нет, применяются значения по умолчанию из самого скилла. Дальше каждый компонент проверяется на попадание в сетку, схему цветов и наличие всех пяти состояний, а тёмная тема — переключением класса или атрибута. Если у вас уже есть своя дизайн-система, эти умолчания будут с ней спорить, поэтому конфиг лучше задать заранее.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill using-ui-stack -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill using-ui-stack -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill using-ui-stack -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install spencerpauly/awesome-cursor-skills using-ui-stack
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill using-ui-stack -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/spencerpauly/awesome-cursor-skills --path resources/using-ui-stack
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill using-ui-stack -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/spencerpauly/awesome-cursor-skills/tree/HEAD/resources/using-ui-stack/SKILL.md

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

## Примеры запросов агенту
- Собери карточку товара по правилам using-ui-stack
- Сделай форму входа: сетка 8px, пять состояний, тёмная тема
- Проверь этот компонент на соответствие дизайн-системе из скилла

## Похожие
- [ui-design](https://affpapa.org/nevibecode/skills/mblode-ui-design.md) — скилл · 1400 установок
- [linear-ui-skills](https://affpapa.org/nevibecode/skills/linear-ui-skills.md) — скилл · 393 установки
- [framer-ui-skills](https://affpapa.org/nevibecode/skills/framer-ui-skills.md) — скилл · 320 установок
- [contemporary](https://affpapa.org/nevibecode/skills/contemporary.md) — скилл · 2400 установок
- [dark-mode-design](https://affpapa.org/nevibecode/skills/dark-mode-design.md) — скилл · 2400 установок
- [ui-ux-pro-max](https://affpapa.org/nevibecode/skills/galaxy-dawn-ui-ux-pro-max.md) — скилл · 506 установок

Из того же набора: [spencerpauly/awesome-cursor-skills](https://affpapa.org/nevibecode/by/spencerpauly/awesome-cursor-skills.md) — 59 карточек

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