Навыки vercel-react-best-practices
📦

vercel-react-best-practices

Безопасно

Оптимизация производительности React и Next.js с рекомендациями Vercel

Также доступно от: vercel-labs

Создание производительных приложений на React требует понимания сложных паттернов оптимизации. Этот навык предоставляет 45 приоритизированных правил от инженеров Vercel для направления AI при написании, проверке и рефакторинге кода React и Next.js для оптимальной производительности.

Поддерживает: Claude Codex Code(CC)
🥉 73 Бронза
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Протестировать

Использование «vercel-react-best-practices». Проверка этого компонента, который последовательно получает данные пользователей и постов

Ожидаемый результат:

  • Проблема: обнаружен паттерн водопада - получение постов ожидает завершения получения данных пользователя
  • Исправление: используйте Promise.all() для параллельного получения обоих ресурсов
  • Ожидаемое улучшение: сокращение времени загрузки на 50-100 мс (устраняется один сетевой запрос)

Использование «vercel-react-best-practices». Оптимизировать эти импорты иконок из lucide-react

Ожидаемый результат:

  • Текущее состояние: импорт всей библиотеки lucide-react (1583 модуля, ~2.8с при запуске в режиме разработки)
  • Рекомендуется: использовать прямые импорты из dist/esm/icons/ для каждой иконки
  • Ожидаемое улучшение: на 15-70% быстрее запуск в режиме разработки, на 40% быстрее холодный старт

Аудит безопасности

Безопасно
v1 • 2/24/2026

This skill is documentation-only containing React and Next.js performance optimization guidelines. All 999 static analyzer findings are false positives from code examples in markdown documentation files. The skill does not execute code, make network requests, or access sensitive data. It provides educational content and code patterns for AI to reference when writing or reviewing React/Next.js code.

53
Просканировано файлов
5,215
Проанализировано строк
0
находки
1
Всего аудитов
Проблем безопасности не найдено
Проверено: claude

Оценка качества

38
Архитектура
100
Сопровождаемость
87
Контент
50
Сообщество
100
Безопасность
83
Соответствие спецификации

Что вы можете построить

Проверка кода и рефакторинг

Проверка существующих компонентов React на наличие антипаттернов производительности и предложение улучшений на основе рекомендаций Vercel

Разработка новых компонентов

Создание новых компонентов React и Next.js с соблюдением лучших практик производительности с самого начала

Аудит производительности

Анализ кодовой базы приложения на наличие паттернов водопадов, раздувания бандла и неэффективности рендеринга

Попробуйте эти промпты

Базовая проверка компонента 
Проверьте этот компонент React на наличие проблем с производительностью, используя лучшие практики Vercel. Выявите любые водопады, ненужные повторные рендеры или возможности оптимизации бандла:

[Вставьте код компонента]
Оптимизация получения данных 
У меня есть эти вызовы API, которые выполняются последовательно. Рефакторите их с использованием паттернов устранения водопадов Vercel для параллельного выполнения там, где возможно:

[Вставьте код получения данных]
Анализ размера бандла 
Проанализируйте эти импорты на предмет возможностей оптимизации бандла. Предложите прямые импорты, динамические импорты или стратегии предварительной загрузки на основе рекомендаций Vercel:

[Вставьте операторы импорта и использование компонента]
Полный рефакторинг компонента 
Рефакторируйте этот компонент страницы Next.js с соблюдением всех применимых лучших практик React от Vercel. Устраните водопады, кэширование, повторные рендеры и оптимизацию бандла. Объясните каждое внесённое изменение:

[Вставьте полный компонент страницы]

Лучшие практики

  • Всегда начинайте с устранения водопадов - это обеспечивает наибольший прирост производительности
  • Используйте Promise.all() для независимых асинхронных операций и откладывайте await до момента, когда результаты будут нужны
  • Импортируйте напрямую из подпутей пакета вместо баррель-файлов для уменьшения размера бандла

Избегать

  • Последовательные операторы await для независимых операций вызывают ненужную задержку
  • Импорт entire component libraries, когда нужны только несколько экспортов
  • Использование array sort() для нахождения мин/макс значений вместо одного прохода цикла

Часто задаваемые вопросы

Для каких версий React и Next.js оптимизированы эти рекомендации?
Эти рекомендации ориентированы на React 18+ с параллельными функциями и Next.js 13+ App Router с серверными компонентами. Некоторые паттерны могут применяться к более ранним версиям, но полные преимущества требуют современных функций React.
Как определить приоритетность применения правил?
Начните с правил категории CRITICAL (устранение водопадов, оптимизация бандла), так как они обеспечивают наибольший прирост производительности. Затем обработайте категории HIGH и MEDIUM на основе конкретных узких мест вашего приложения.
Применяются ли эти рекомендации к React-приложениям только на стороне клиента?
Большинство рекомендаций применимы к любым приложениям на React. Правила, специфичные для сервера (server-cache-react, server-serialization), применяются только к Next.js App Router с серверными компонентами.
Каков ожидаемый эффект производительности от следования этим рекомендациям?
Влияние варьируется в зависимости от приложения. Устранение водопадов может сократить загрузку страницы на 200-500 мс. Оптимизация бандла может улучшить начальную загрузку на 15-40%. Оптимизация повторного рендеринга обычно улучшает отзывчивость взаимодействия на 10-30%.
Могу ли я использовать этот навык с Claude Code для автоматизированного рефакторинга?
Да. Этот навык разработан для AI-ассистентов. Предоставьте контекст навыка и попросите Claude Code проверить или рефакторить код с использованием рекомендаций лучших практик Vercel.
Есть ли компромиссы при следовании этим паттернам?
Некоторые паттерны добавляют сложность кода (например, ручная параллелизация, прямые импорты). Преимущества производительности обычно перевешивают затраты на сложность, но применяйте суждение на основе потребностей вашей команды и масштаба приложения.

Сведения для разработчиков

Автор

ZhanlinCui

Лицензия

MIT

Репозиторий

https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/vercel-react-best-practices

Ссылка

main

Структура файлов

📁 rules/

📄 _sections.md

📄 _template.md

📄 advanced-event-handler-refs.md

📄 advanced-use-latest.md

📄 async-api-routes.md

📄 async-defer-await.md

📄 async-dependencies.md

📄 async-parallel.md

📄 async-suspense-boundaries.md

📄 bundle-barrel-imports.md

📄 bundle-conditional.md

📄 bundle-defer-third-party.md

📄 bundle-dynamic-imports.md

📄 bundle-preload.md

📄 client-event-listeners.md

📄 client-localstorage-schema.md

📄 client-passive-event-listeners.md

📄 client-swr-dedup.md

📄 js-batch-dom-css.md

📄 js-cache-function-results.md

📄 js-cache-property-access.md

📄 js-cache-storage.md

📄 js-combine-iterations.md

📄 js-early-exit.md

📄 js-hoist-regexp.md

📄 js-index-maps.md

📄 js-length-check-first.md

📄 js-min-max-loop.md

📄 js-set-map-lookups.md

📄 js-tosorted-immutable.md

📄 rendering-activity.md

📄 rendering-animate-svg-wrapper.md

📄 rendering-conditional-render.md

📄 rendering-content-visibility.md

📄 rendering-hoist-jsx.md

📄 rendering-hydration-no-flicker.md

📄 rendering-svg-precision.md

📄 rerender-defer-reads.md

📄 rerender-dependencies.md

📄 rerender-derived-state.md

📄 rerender-functional-setstate.md

📄 rerender-lazy-state-init.md

📄 rerender-memo.md

📄 rerender-transitions.md

📄 server-after-nonblocking.md

📄 server-cache-lru.md

📄 server-cache-react.md

📄 server-parallel-fetching.md

📄 server-serialization.md

📄 AGENTS.md

📄 README.md

📄 SKILL.md

📄 metadata.json