К основному содержанию
скилл CX Codex

next-best-practices — скилл для Claude Code: правила Next.js

Скилл с набором правил Next.js: файловые конвенции, границы RSC, async API, метаданные, обработка ошибок. Пригодится, когда агент пишет или ревьюит код на Next.js.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add pedronauck/skills --skill next-best-practices -a claude-code
Открыть на GitHub

Что делает next-best-practices

Скилл включается, когда агент пишет или проверяет код Next.js, и подсказывает ему, как правильно. Внутри — набор справочных файлов по темам: структура проекта и специальные файлы, динамические и catch-all сегменты маршрутов, параллельные и перехватывающие маршруты. Отдельно разобрано переименование middleware в v16.

Есть разделы про границы React Server Components: как отловить async-клиентский компонент, несериализуемые пропсы, исключения в Server Actions. Дальше — async-паттерны Next.js 15+, включая асинхронные params, searchParams, cookies() и headers(), и кодмод для миграции. Про выбор рантайма сказано коротко: по умолчанию Node.js, Edge — когда он уместен.

Остальные файлы закрывают обработку ошибок (error.tsx, global-error.tsx, not-found.tsx, redirect, notFound, forbidden, unauthorized), паттерны работы с данными и борьбу с водопадами через Promise.all и Suspense, route handlers, метаданные и OG-картинки через next/og, оптимизацию изображений и шрифтов, бандлинг, скрипты, ошибки гидратации, Suspense-границы и self-hosting с output: 'standalone'. Скилл не вызывается вручную: в его настройках стоит user-invocable: false, поэтому он подхватывается сам в подходящем контексте.

Какие задачи решает

  • поймать async-клиентский компонент до того, как он сломает сборку
  • перевести проект на асинхронные params и cookies() в Next.js 15+
  • разобраться, когда нужен route handler, а когда Server Action
  • убрать водопад запросов через Promise.all и Suspense
  • настроить OG-картинки и метаданные без ручных тегов

Примеры запросов агенту

  • Проверь этот компонент на корректные границы RSC и скажи, что не так
  • Перепиши страницу под асинхронные params и searchParams
  • Почему у меня ошибка гидратации в этом компоненте?

Как установить next-best-practices

1Через Skills CLI (Vercel)

npx skills add pedronauck/skills --skill next-best-practices -a claude-code

2Вручную: положить файлы

~/.claude/skills/next-best-practices/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/next-best-practices/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о next-best-practices

Как установить next-best-practices в Claude Code?

Выполните npx skills add pedronauck/skills --skill next-best-practices -a claude-code. Файл скилла окажется по пути ~/.claude/skills/next-best-practices/SKILL.md.

Что делает next-best-practices?

Даёт агенту правила написания и ревью кода Next.js: файловые конвенции, границы RSC, async API, метаданные, обработка ошибок, оптимизация изображений и шрифтов, бандлинг.

Можно вызвать этот скилл вручную?

Нет. В его настройках указано user-invocable: false, так что он срабатывает сам, когда агент работает с кодом Next.js.

Похожие скиллы

Всё по теме «Фронтенд и UI» →
frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

Из того же набора18

react Скилл помогает писать и проверять компоненты и хуки React 19 с учётом React Compiler. Пригодится при настройке компилятора, работе с состоянием и тестами. CX Codex +1 448установок tailwindcss Скилл настраивает работу агента с Tailwind CSS v4. Он заставляет применять утилиты, проектные дизайн-токены и избегать динамической сборки имён классов. CX Codex +1 447установок refactoring-analysis Анализирует архитектуру проекта по запахам кода Фаулера и формирует отчёт в docs/_refacs/. Помогает запланировать рефакторинг без форматирования и аудита безопасности. CX Codex +1 404установок electron-builder Настраивает сборку десктопных приложений на Electron под Windows, macOS и Linux. Помогает с подписью кода, выпуском релизов и автоматическими обновлениями. CX Codex +1 392установок git-rebase Переносит коммиты на новую базу и разбирает конфликты по одному, не трогая чужие изменения. Пригодится, когда ветка отстала и её надо подтянуть под актуальный target. CX Codex +1 376установок shadcn Задаёт правила сборки интерфейсов на shadcn/ui и Radix UI. Помогает агенту сохранять поддержку тем оформления и доступность экранов. CX Codex +1 369установок tanstack Скилл помогает писать React-код с TanStack Query, Router и Form. Пригодится, когда вы меняете работу с данными, маршрутами или формами. CX Codex +1 360установок zustand Скилл для ИИ-агента, который подсказывает паттерны Zustand: структуру сторов, селекторы, middleware и персистентность. CX Codex +1 353установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой