react-patterns · manutej — скилл для Claude Code: паттерны React
Скилл с готовыми рецептами React: хуки, композиция компонентов, управление состоянием и борьба с лишними ререндерами.
npx skills add manutej/luxor-claude-marketplace --skill react-patterns -a claude-codeЧто делает react-patterns
Скилл описывает современный React: функциональные компоненты, встроенные хуки, композицию и стратегии работы с состоянием. Внутри разобраны useState, useReducer и useContext — с примерами кода и правилами вроде функционального обновления состояния и ленивой инициализации. Есть раздел про серверные и клиентские компоненты, формы, побочные эффекты и асинхронные операции.
Отдельная часть — производительность: мемоизация и отладка лишних ререндеров. Скилл пригодится, когда вы переписываете классовые компоненты на функциональные или выносите повторяющуюся логику в кастомные хуки. Советует держать состояние как можно локальнее и не хранить в нём производные значения — это повод проверить свои компоненты.
Установка идёт через npx skills add с указанием агента, файл скилла кладётся в каталог конкретной платформы.
Какие задачи решает
- разобрать сложную логику состояния через
useReducer - вынести повторяющуюся логику в кастомный хук
- убрать лишние ререндеры через мемоизацию
- переписать классовый компонент на функциональный
- разделить серверные и клиентские компоненты
Примеры запросов агенту
- покажи, как переписать этот классовый компонент на хуки
- помоги разбить состояние формы на
useReducer - почему этот компонент ререндерится лишний раз
Как установить react-patterns
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill react-patterns -a claude-code2Вручную: положить файлы
~/.claude/skills/react-patterns/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/react-patterns/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill react-patterns -a codex2Вручную: положить файлы
.agents/skills/react-patterns/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill react-patterns -a cursor2Вручную: положить файлы
.cursor/skills/react-patterns/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install manutej/luxor-claude-marketplace react-patterns2Вручную: положить файлы
.github/skills/react-patterns/SKILL.md1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill react-patterns -a gemini-cli2Командой платформы
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/react-patternsВручную: положить файлы
.devin/skills/react-patterns/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill react-patterns -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора31
Другие версии react-patterns
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о react-patterns
Как установить react-patterns в Claude?
Выполните npx skills add manutej/luxor-claude-marketplace --skill react-patterns -a claude-code. Скилл появится в ~/.claude/skills/react-patterns/SKILL.md.
Что делает react-patterns?
Даёт рецепты по хукам, композиции компонентов, управлению состоянием и оптимизации производительности React-приложений.
С какими платформами работает скилл?
Кроме Claude он ставится в Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode — у каждой платформы своя команда установки.
