react · pedronauck — скилл для Claude Code: правила React и установка
Скилл помогает писать и проверять компоненты и хуки React 19 с учётом React Compiler. Пригодится при настройке компилятора, работе с состоянием и тестами.
npx skills add pedronauck/skills --skill react -a claude-codeЧто делает react
Скилл разбирает правила React 19.2 и React Compiler 1.0: чистоту рендера, мутации, refs, состояние и эффекты. Он помогает выбирать, где оставить useMemo и useCallback, а где компилятор сам оптимизирует компонент. Ручную мемоизацию с неполным массивом зависимостей компилятор может пропустить, поэтому правила линтера здесь важны.
Внутри есть тематические справки по настройке компилятора и линтера, компонентам и типам, состоянию, API React 19 и тестированию. Для изменений предлагается читать нужную справку, а соседние подключать, только если задача затрагивает несколько тем. Тесты рассматриваются на Vitest.
Скилл нацелен на React 19.2, React Compiler 1.0 и eslint-plugin-react-hooks 7.1+. React Native, другие фреймворки и только серверный Node.js не входят в область применения. Линтер следует настроить до включения компилятора: нарушения правил могут оставить компонент неоптимизированным без ошибки сборки.
Какие задачи решает
- разобраться, где нужна ручная мемоизация компонентов
- проверить эффекты и производное состояние
- настроить React Compiler и линтер
- написать или исправить тесты компонентов и хуков
Примеры запросов агенту
- Проверь этот компонент на нарушения правил React Compiler и объясни, где оставить ручную мемоизацию.
- Помоги перенести синхронизацию состояния из эффекта в рендер, если это соответствует правилам React.
- Подскажи, как настроить тест компонента по справке скилла.
Как установить react
1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill react -a claude-code2Вручную: положить файлы
~/.claude/skills/react/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/react/
1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill react -a codex2Вручную: положить файлы
.agents/skills/react/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill react -a cursor2Вручную: положить файлы
.cursor/skills/react/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install pedronauck/skills react2Вручную: положить файлы
.github/skills/react/SKILL.md1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill react -a gemini-cli2Командой платформы
gemini skills install https://github.com/pedronauck/skills --path skills/mine/reactВручную: положить файлы
.devin/skills/react/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill react -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о react
Как установить react в Claude Code?
Выполните npx skills add pedronauck/skills --skill react -a claude-code. Файл скилла находится по пути ~/.claude/skills/react/SKILL.md.
Что делает скилл react?
Он даёт рекомендации по компонентам, хукам, состоянию, эффектам и API React 19 с учётом React Compiler. Также охватывает настройку линтера и тестирование.
Какие версии React Compiler поддерживает react?
Скилл ориентирован на React 19.2 и React Compiler 1.0; для линтинга указывает eslint-plugin-react-hooks 7.1+.
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — react от других авторов.
