nextjs-best-practices — скилл для Claude Code: как установить
Набор правил по Next.js App Router для агента. Помогает разделить серверные и клиентские компоненты, настроить кэширование и собрать структуру маршрутов.
npx claude-code-templates@latest --skill development/nextjs-best-practicesЧто делает nextjs-best-practices
Скилл задаёт чёткие ориентиры по архитектуре App Router. Он инструктирует Claude Code предпочитать серверные компоненты по умолчанию, выносить интерактивность в клиентские листья дерева и применять Server Actions для мутаций. В правилах описаны типовые файлы каталога app вроде loading.tsx или error.tsx, а также валидация входящих данных в Route Handlers через Zod.
Внутри зафиксированы схемы кэширования: статическая сборка, сброс кэша по времени через revalidate и динамический запрос с no-store. Для работы с проектом агенту открыт доступ к инструментам Read, Write, Edit, Glob и Grep.
Без чёткого разделения серверного и клиентского кода ассистент начнёт ставить директиву 'use client' на каждый экран, раздувая клиентский бандл.
Какие задачи решает
- разделить компоненты на серверные и клиентские по дереву решений
- настроить стратегии кэширования и инвалидации данных в fetch
- организовать структуру маршрутов через Route Groups и параллельные слоты
- написать Route Handlers с валидацией через Zod
Примеры запросов агенту
- Спроектируй страницу профиля в App Router и вынеси форму в отдельный клиентский компонент
- Добавь Route Handler для обновления статьи с проверкой параметров через Zod
- Настрой сброс кэша данных на маршруте каталога через revalidateTag
Как установить nextjs-best-practices
1Через claude-code-templates
npx claude-code-templates@latest --skill development/nextjs-best-practices2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill nextjs-best-practices -a claude-code3Вручную: положить файлы
~/.claude/skills/nextjs-best-practices/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/nextjs-best-practices/
Вручную: положить файлы
.agents/skills/nextjs-best-practices/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/nextjs-best-practices/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates nextjs-best-practices2Вручную: положить файлы
.github/skills/nextjs-best-practices/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/nextjs-best-practicesВручную: положить файлы
.devin/skills/nextjs-best-practices/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о nextjs-best-practices
Как установить nextjs-best-practices в Claude Code?
Выполните команду npx claude-code-templates@latest --skill development/nextjs-best-practices. Также можно поставить скилл через менеджер: npx skills add davila7/claude-code-templates --skill nextjs-best-practices -a claude-code.
Что делает скилл nextjs-best-practices?
Он задаёт архитектурные правила для Next.js App Router: выбор между серверными и клиентскими компонентами, схемы кэширования данных и соглашения по файлам маршрутизации.
Какие инструменты использует скилл для анализа проекта?
В конфигурации скилла агенту разрешены системные инструменты Read, Write, Edit, Glob и Grep.
