react-patterns · davila7 — скилл для Claude Code: паттерны React и установка
Скилл подсказывает, как выбирать структуру компонентов, хуки и управление состоянием в React. Пригодится при разработке и рефакторинге интерфейсов на TypeScript.
npx claude-code-templates@latest --skill development/react-patternsЧто делает react-patterns
Скилл охватывает проектирование компонентов, извлечение пользовательских хуков и выбор места для состояния: от useState внутри компонента до Context и глобального хранилища. Также описывает паттерны React 19, включая useActionState и useOptimistic, и типизацию пропсов в TypeScript.
Для производительности он советует сначала проверить замедление через DevTools и найти узкое место, а потом выбирать оптимизацию: например, виртуализацию длинного списка или useMemo для затратных вычислений. Это помогает не добавлять мемоизацию наугад. В скилле также есть рекомендации по обработке ошибок и уровням тестирования.
Установите скилл командой npx claude-code-templates@latest --skill development/react-patterns. В перечне разрешённых инструментов указаны Read, Write, Edit, Glob и Grep.
Какие задачи решает
- разделить крупный компонент на части с одной ответственностью
- выбрать место для состояния между компонентом и приложением
- вынести повторяющуюся логику в пользовательский хук
- найти причину медленных рендеров до оптимизации
- подобрать типы TypeScript для пропсов и обработчиков событий
Примеры запросов агенту
- Подскажи, как разделить этот крупный React-компонент и распределить его состояние.
- Проверь, какую повторяющуюся логику здесь стоит вынести в пользовательский хук.
- Помоги найти узкое место в медленном списке и выбрать подходящую оптимизацию.
Как установить react-patterns
1Через claude-code-templates
npx claude-code-templates@latest --skill development/react-patterns2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill react-patterns -a claude-code3Вручную: положить файлы
~/.claude/skills/react-patterns/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/react-patterns/
Вручную: положить файлы
.agents/skills/react-patterns/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/react-patterns/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates react-patterns2Вручную: положить файлы
.github/skills/react-patterns/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/react-patternsВручную: положить файлы
.devin/skills/react-patterns/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о react-patterns
Как установить react-patterns в Claude Code?
Выполните npx claude-code-templates@latest --skill development/react-patterns. После этого скилл можно использовать в Claude Code.
Что делает react-patterns?
Он даёт рекомендации по компонентам, хукам, состоянию, производительности, обработке ошибок и тестированию React-приложений. Есть отдельные разделы по React 19 и TypeScript.
Как react-patterns советует оптимизировать медленный React-интерфейс?
Сначала проверить рендеры с помощью DevTools и определить узкое место. Затем применить подходящий приём, например виртуализацию списка или useMemo для затратного вычисления.
Похожие скиллы
Все скиллы по теме «Фронтенд и UI» →Сначала — react-patterns от других авторов.
