react-nextjs-patterns — скилл для Claude Code: как установить
Задаёт правила для App Router и серверных компонентов при разработке или проверке кода Next.js. Помогает избежать утечек данных и лишней мемоизации.
npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a claude-codeЧто делает react-nextjs-patterns
Скилл вводит набор соглашений для архитектуры компонентов, серверных действий и маршрутизации. Работа начинается с проверки версий зависимостей в package.json, поскольку поведение кеша и базовые настройки менялись между мажорными релизами Next.js.
Правила требуют оставлять компоненты серверными, а директиву "use client" спускать на крайние изолированные листья дерева. К Server Actions подход строгий: каждая мутация рассматривается как открытый эндпоинт, где внутри обязательны аутентификация, валидация входящих данных и авторизация. Персональные данные запрещено отправлять в общий кеш.
Запрет на useMemo и useCallback без профилирования или при работе с React Compiler — повод пересмотреть старые привычки оптимизации. Для корректной изоляции кода модули только для бэкенда должны импортировать server-only.
Какие задачи решает
- защитить Server Actions проверками прав и входящих параметров
- разграничить серверные и клиентские компоненты без раздувания бандла
- изолировать личные данные пользователя от попадания в общий кеш
- убрать лишние хуки мемоизации при отсутствии замеренных просадок
Примеры запросов агенту
- Проверь этот Server Action на валидацию аргументов и права доступа
- Вынеси клиентский интерактив на минимальные листья дерева компонентов
- Проведи ревью загрузки данных в App Router с учётом версий в package.json
Как установить react-nextjs-patterns
1Через Skills CLI (Vercel)
npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a claude-code2Вручную: положить файлы
~/.claude/skills/react-nextjs-patterns/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/react-nextjs-patterns/
1Через Skills CLI (Vercel)
npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a codex2Вручную: положить файлы
.agents/skills/react-nextjs-patterns/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a cursor2Вручную: положить файлы
.cursor/skills/react-nextjs-patterns/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install duyet/codex-claude-plugins react-nextjs-patterns2Вручную: положить файлы
.github/skills/react-nextjs-patterns/SKILL.md1Через Skills CLI (Vercel)
npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a gemini-cli2Командой платформы
gemini skills install https://github.com/duyet/codex-claude-plugins --path team-agents/skills/react-nextjs-patternsВручную: положить файлы
.devin/skills/react-nextjs-patterns/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о react-nextjs-patterns
Как установить react-nextjs-patterns в Claude Code?
Выполните в терминале команду npx skills add duyet/codex-claude-plugins --skill react-nextjs-patterns -a claude-code.
Что делает скилл react-nextjs-patterns?
Он направляет модель следовать практикам Next.js App Router: серверные компоненты по умолчанию, изоляция клиентских границ и защита мутаций данных.
В каких случаях скилл запрещает useMemo и useCallback?
Скилл исключает ручную мемоизацию без предварительных замеров производительности или в проектах, где уже задействован React Compiler.
