# create-component

Пошагово опрашивает разработчика и генерирует UI-компоненты по правилам проекта. Пригодится для поддержания единой структуры интерфейса.

- команда · `type=command` · Claude Code, Codex, Cursor · ★ 41823
- Автор: Seth Hobson
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/wshobson/agents/tree/HEAD/plugins/ui-design/commands/create-component.md
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/commands/create-component

## Что делает

Команда запускает интерактивный сценарий для создания нового компонента. Сначала она проверяет стек проекта: ищет директорию `.ui-design/`, определяет фреймворки вроде React или Vue, а также способ стилизации (Tailwind, CSS Modules или styled-components). Если фреймворк не найден, агент предложит выбрать его вручную.

Спецификация собирается строго по одному вопросу за шаг. Вы по очереди определяете назначение, уровень сложности, входные пропсы, способ управления состоянием, композицию слотов и требования доступности WCAG. Все собранные параметры фиксируются в манифесте `.ui-design/components/{component_name}.json`.

Затем команда создаёт директорию компонента с файлом реализации, типами TypeScript, стилями, тестами и реэкспортом через `index.ts`. Без предварительных ответов на вопросы о спецификации код генерироваться не начнёт.

## Установка

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

1. **Через маркетплейс плагинов**
В чате агента (не в терминале):
```text
/plugin marketplace add wshobson/agents
```
В чате агента (не в терминале):
```text
/plugin install ui-design@claude-code-workflows
```

2. **Вручную: положить файлы**
- Файл: `.claude/commands/create-component.md` — Вызов — /create-component. Для всех проектов — ~/.claude/commands/

### Codex

**Вручную: положить файлы**
- Файл: `~/.codex/prompts/create-component.md` — Вызов — /prompts:create-component. В Codex этот формат помечен устаревшим, замена — скиллы

### GitHub Copilot

**Вручную: положить файлы**
- Файл: `.github/prompts/create-component.prompt.md`

### Gemini CLI

**Вручную: положить файлы**
- Файл: `.gemini/commands/create-component.toml` — Gemini хранит команды в TOML: текст запроса — в поле prompt

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/wshobson/agents/tree/HEAD/plugins/ui-design/commands/create-component.md

## Когда брать
- Собрать спецификацию пропсов и типов до написания кода
- Развернуть директорию компонента с тестами и типами
- Зафиксировать требования к доступности и стилям в JSON-манифесте
- Выбрать подходящий паттерн управления состоянием интерфейса

## Примеры запросов агенту
- /create-component UserCard
- /create-component DataTable
- /create-component

## Похожие
- [nextjs-component-generator](https://affpapa.org/nevibecode/commands/nextjs-component-generator.md) — команда · 935 установок
- [performance-audit](https://affpapa.org/nevibecode/commands/performance-audit.md) — команда · 661 установка

Из того же набора: [wshobson/agents](https://affpapa.org/nevibecode/by/wshobson/agents.md) — 432 карточки

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

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