nextjs-development — скилл для Claude Code: что делает и как ставить
Набор инструкций по современной разработке на Next.js в каталоге app. Помогает ассистенту правильно выстраивать серверные компоненты, кэширование и маршруты.
npx skills add manutej/luxor-claude-marketplace --skill nextjs-development -a claude-codeЧто делает nextjs-development
Скилл учит агента правилам App Router. Внутри собраны шаблоны для корневых макетов app/layout.tsx и экранов загрузки loading.tsx. Ассистент создаёт серверные компоненты по умолчанию, а клиентские части изолирует в отдельных файлах с директивой 'use client'.
Для сетевых запросов модуль задаёт паттерны расширенного fetch. В них заложено фоновое обновление данных через ISR с параметром revalidate и параллельный сбор ответов через Promise.all.
Инструкции рассчитаны строго на архитектуру каталога app. Для старых проектов на Pages Router этот набор паттернов создаст несовместимый код.
Какие задачи решает
- настроить структуру маршрутов в каталоге
appс макетами и динамическими сегментами - разделить серверные и интерактивные клиентские компоненты с директивой
'use client' - настроить кэширование и фоновое обновление данных через ISR в вызовах
fetch - организовать параллельную загрузку нескольких запросов на странице через
Promise.all
Примеры запросов агенту
- Сделай страницу блога в
app/blog/[slug]/page.tsxс выборкой данных и разметкой статьи. - Вынеси интерактивный счётчик в клиентский компонент с
'use client', а родительскую страницу оставь серверной. - Настрой параллельную загрузку профиля и списка постов через
Promise.allвapp/user/page.tsx.
Как установить nextjs-development
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill nextjs-development -a claude-code2Вручную: положить файлы
~/.claude/skills/nextjs-development/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/nextjs-development/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill nextjs-development -a codex2Вручную: положить файлы
.agents/skills/nextjs-development/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill nextjs-development -a cursor2Вручную: положить файлы
.cursor/skills/nextjs-development/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install manutej/luxor-claude-marketplace nextjs-development2Вручную: положить файлы
.github/skills/nextjs-development/SKILL.md1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill nextjs-development -a gemini-cli2Командой платформы
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/nextjs-developmentВручную: положить файлы
.devin/skills/nextjs-development/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill nextjs-development -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о nextjs-development
Как установить nextjs-development в Claude Code?
Выполните в терминале команду npx skills add manutej/luxor-claude-marketplace --skill nextjs-development -a claude-code. Конфигурация запишется в файл ~/.claude/skills/nextjs-development/SKILL.md.
Что делает скилл nextjs-development?
Он передаёт ИИ-ассистенту шаблоны и соглашения для работы с App Router в Next.js. Агент генерирует серверные компоненты, изолирует клиентский код и настраивает кэширование запросов.
Подходит ли этот скилл для проектов с каталогом pages?
Нет, правила целиком ориентированы на App Router и структуру папки app. В старых проектах на Pages Router эти инструкции приведут к ошибкам в макетах и маршрутизации.
