# ui-components

Скилл задаёт правила разработки интерфейсов на базе shadcn/ui и Radix Primitives. Помогает строить дизайн-системы, настраивать стили v4 и связывать формы с Zod.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1500 установок · ★ 298
- Автор: OrchestKit
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/yonatangross/orchestkit/tree/HEAD/src/skills/ui-components/SKILL.md
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/skills/ui-components

## Что делает

Скилл содержит 15 правил в шести категориях: стили shadcn/ui v4, дизайн-системы с токенами W3C и палитрой OKLCH, компоненты на CVA, формы на React Hook Form v7 с Zod, стек Tailwind v4 и основы UX. Ассистент применяет эти паттерны при генерации разметки, запрещая прямое изменение исходников библиотечных компонентов и требуя композицию через `asChild`.

Внутри заложены инструкции по работе с шестью визуальными стилями shadcn CLI v4: Vega, Nova, Maia, Lyra, Mira и Luma. Кодогенерация опирается на утилиту `cn()`, безопасные по типам варианты CVA и CSS-анимации через data-атрибуты вместо раздувания DOM лишними обёртками.

Для работы в Claude Code заявлена совместимость с версией 2.1.277+. Скилл помечен как фоновый, поэтому ассистент подтягивает правила сам при работе с фронтендом, не требуя отдельного ручного вызова.

## Установка

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

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

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add yonatangross/orchestkit --skill ui-components -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add yonatangross/orchestkit --skill ui-components -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install yonatangross/orchestkit ui-components
```

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

### Gemini CLI

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

2. **Командой платформы**
```bash
gemini skills install https://github.com/yonatangross/orchestkit --path src/skills/ui-components
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add yonatangross/orchestkit --skill ui-components -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/yonatangross/orchestkit/tree/HEAD/src/skills/ui-components/SKILL.md

## Когда брать
- настроить стили shadcn v4 через CVA и OKLCH
- собрать доступные диалоги на Radix UI с композицией через asChild
- связать форму на React Hook Form с валидацией через Zod и Server Actions
- избежать конфликтов классов Tailwind с помощью утилиты cn

## Примеры запросов агенту
- Сделай компонент модального окна подтверждения на базе Radix Dialog и AlertDialog
- Создай форму регистрации на react-hook-form v7 с валидацией через Zod
- Добавь кнопку с несколькими вариантами размеров и цветов через CVA

## Похожие
- [shadcn-ui](https://affpapa.org/nevibecode/skills/giuseppe-trisciuoglio-shadcn-ui.md) — скилл · 22400 установок
- [ui-design-system](https://affpapa.org/nevibecode/skills/samhvw8-ui-design-system.md) — скилл · 3200 установок
- [design-guide](https://affpapa.org/nevibecode/skills/design-guide.md) — скилл · 366 установок
- [migrate-radix-to-base](https://affpapa.org/nevibecode/skills/migrate-radix-to-base.md) — скилл · 30400 установок
- [zod-validation-utilities](https://affpapa.org/nevibecode/skills/zod-validation-utilities.md) — скилл · 3800 установок
- [zod-4](https://affpapa.org/nevibecode/skills/zod-4.md) — скилл · 1200 установок

Из того же набора: [yonatangross/orchestkit](https://affpapa.org/nevibecode/by/yonatangross/orchestkit.md) — 10 карточек

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

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