# component-scaffold

Команда создаёт каркас React и React Native-компонентов на TypeScript с тестами, стилями и Storybook stories. Подходит для повторяемой структуры новых компонентов.

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

## Что делает

Команда разбирает описание задачи и формирует спецификацию компонента: имя, тип, props, состояние, хуки, подход к стилям и платформу. Затем она создаёт компонент, типы, стили, тесты, Storybook story и `index`.

Для React Native используются `View`, `Text`, `StyleSheet` и средства доступности. В веб-версии шаблон поддерживает CSS Modules, `styled-components` и Tailwind, а также может добавить `useA11y`. Если в проекте нет `@/hooks/useA11y`, вариант с доступностью потребует адаптации импорта.

## Установка

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

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

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

### Codex

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

### GitHub Copilot

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

### Gemini CLI

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

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

## Когда брать
- создать каркас React-компонента на TypeScript
- подготовить React Native-компонент со стилями
- добавить тесты и Storybook story
- описать props и состояние в типах
- заложить доступность в шаблон компонента

## Примеры запросов агенту
- \`/component-scaffold Создай React-компонент UserCard с props name и avatar, CSS Modules, тестом и Storybook story`
- \`/component-scaffold Подготовь React Native-компонент ProfileHeader с типами props и стилями`
- \`/component-scaffold Добавь компонент формы с состоянием, хуком useEffect и проверкой доступности`

## Похожие
- [react-container-presentation-component](https://affpapa.org/nevibecode/skills/react-container-presentation-component.md) — скилл · 65 установок
- [senior-frontend](https://affpapa.org/nevibecode/skills/senior-frontend.md) — скилл · 1630 установок
- [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