Помогает писать, проверять и рефакторить React- и Next.js-код с учётом производительности. В руководстве — 70 правил в 8 категориях, расставленных по приоритету влияния.

Возможности

• Подсказывает, как устранять последовательные ожидания и запускать независимые операции параллельно.
• Помогает сокращать размер bundle: избегать barrel-файлов и загружать тяжёлые компоненты через next/dynamic.
• Описывает оптимизацию server-side и client-side загрузки данных, включая кеширование и дедупликацию запросов.
• Даёт рекомендации по снижению лишних перерендеров и ускорению рендеринга.
• Содержит правила по оптимизации JavaScript и продвинутым паттернам.

Когда использовать

• Пишете React-компоненты или страницы Next.js.
• Реализуете загрузку данных на клиенте или сервере.
• Ищете причины медленной работы и лишних перерендеров.
• Оптимизируете размер bundle или время загрузки.

Примеры

Правила о параллельных операциях и загрузке компонентов:

async-parallel — использовать Promise.all() для независимых операций
bundle-dynamic-imports — использовать next/dynamic для тяжёлых компонентов

Файлы правил и полный документ:

rules/async-parallel.md
rules/bundle-barrel-imports.md
AGENTS.md

Установка

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices