Оптимизация приложений React и Next.js
Приложения React и Next.js часто страдают от каскадов асинхронных операций, больших бандлов и лишних рендеров. Этот навык дает агентам конкретные правила производительности Vercel для более безопасного рефакторинга.
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Review the Skillstore skill "vercel-react-best-practices" from https://skillstore.io/skills/am-will-vercel-react-best-practices.md and its manifest at https://skillstore.io/api/skills/am-will-vercel-react-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Использование «vercel-react-best-practices». Страница Next.js ждет данные пользователя, конфигурации и боковой панели перед рендерингом.
Ожидаемый результат:
Использование «vercel-react-best-practices». Компонент React импортирует иконки из корня пакета и заново создает фильтры во время рендера.
Ожидаемый результат:
Использование «vercel-react-best-practices». Дашборд использует localStorage, cookies и глобальные слушатели клавиш.
Ожидаемый результат:
Проверка отмечает чтение из хранилища, дублирование слушателей и компромиссы гидратации. Она рекомендует инвалидацию кэша, общие подписки и CSP-безопасные inline scripts.
All 166 static findings were adjudicated as false positives after context review. They are documentation examples, Markdown formatting, public references, relative API examples, or keyboard event variables rather than executable malicious behavior. No prompt injection, data exfiltration, credential access, or automatic command execution was found.
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
https://skillstore.io/skills/am-will-vercel-react-best-practices/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/am-will-vercel-react-best-practices?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/am-will-vercel-react-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/am-will-vercel-react-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/am-will-vercel-react-best-practices.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>am-will. (2026). vercel-react-best-practices security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/am-will-vercel-react-best-practices/audits/5@techreport{am-will-am-will-vercel-react-best-practices-2026,
author = {am-will},
title = {vercel-react-best-practices security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/am-will-vercel-react-best-practices/audits/5},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "vercel-react-best-practices security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "am-will"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/am-will-vercel-react-best-practices/audits/5"
identifiers:
- type: other
value: "skillstore:am-will-vercel-react-best-practices:audit:5"
description: "Skillstore immutable audit report identifier"
Навык каждого автора остаётся отдельным устанавливаемым вариантом. Рекомендуемый вариант ранжируется по данным Skillstore.
Почему этот вариант первый
vercel-labs-vercel-react-best-practices
2026-09-09
am-will-vercel-react-best-practices
2026-09-09
sickn33-vercel-react-best-practices
2026-09-09
zhanlincui-vercel-react-best-practices
2026-09-09
Проверить функцию React перед слиянием на устранимые каскады запросов, лишние рендеры и дорогие циклы.
Улучшить маршруты Next.js за счет потоковой передачи layout, кэширования общих данных и уменьшения полезной нагрузки RSC.
Попросить ИИ-помощника для написания кода применять приоритизированный чеклист производительности во время рефакторинга UI.
Проверь этот компонент React на самые важные проблемы производительности из этого навыка. Сфокусируйся на каскадах запросов, размере бандла и повторных рендерах. Объясни каждое исправление простым языком.
Отрефактори этот маршрут Next.js, чтобы убрать независимые каскады await. Запускай независимые операции заранее и используй Suspense только там, где layout может безопасно передаваться потоково.
Проведи аудит этой функции на сериализацию границ RSC, рост клиентского бандла и повторные клиентские запросы. Верни приоритизированный план действий с рисками и тестами.
Сравни две реализации этого сценария работы с дашбордом по правилам навыка. Рекомендуй версию с лучшей задержкой, поведением бандла и стабильностью рендера.
Автор
am-willЛицензия
MIT
Ревизия Skillstore
r2
Примечание о версии
Автор не указал версию.
Ссылка
89edfdc710d0846129dcee6a929477b04f08052c
Актуальность поддержки
25.07.2026
Использование
22 загрузок · 189 просмотров
Структура файлов
Создание пользовательских агентов Codex
Пользовательским агентам Codex нужны точные TOML-файлы и понятные настройки среды выполнения. Этот навык помогает проектировать роли, записывает конфигурации и проверяет обязательные поля.
Создавайте выразительные фронтенд-интерфейсы
Шаблонные интерфейсы ослабляют ясность продукта и доверие к нему. Этот навык помогает Claude, Codex и Claude Code создавать отполированные фронтенд-страницы с осознанным визуальным направлением.
Планирование параллельных рабочих процессов агентов
Крупные изменения в коде трудно распределять между несколькими агентами без ошибок в зависимостях. Этот навык создает планы реализации с учетом зависимостей, включая исследование, уточнение, проверку и группы параллельного выполнения.
Планирование поэтапной реализации
Сложная работа с кодом может становиться неясной, когда отсутствуют объем работ, зависимости и шаги проверки. Этот навык создает поэтапные планы со спринтами, атомарными задачами и контрольными точками верификации.
Создание поэтапных планов реализации
Сложные задачи разработки ПО могут срываться, когда объем работ, последовательность и проверка результата неясны. Этот навык создает поэтапные планы с атомарными задачами, контрольными точками, рисками и этапами проверки.
Запуск параллельных планов разработки
Большие планы реализации сложно координировать между несколькими агентами. Этот навык преобразует markdown-план в волны с учетом зависимостей для Claude, Codex и Claude Code.
Создание готовых к промышленной эксплуатации фронтенд-функций
от davila7
Фронтенд-командам нужны согласованные рекомендации по React и Next.js для разных проектов. Этот навык предоставляет справочные рабочие процессы, практики обеспечения качества и вспомогательные скрипты для анализа фронтенда.
Реализация React View Transitions
от vercel-labs
Переходы представлений React легко разместить неправильно, что приводит к незаметным или избыточным анимациям. Этот навык помогает выбирать анимации для маршрутов, Suspense, списков и общих элементов.
Создавайте fullstack-приложения с рекомендациями senior-разработчика
от alirezarezvani
Fullstack-проекты часто требуют согласованной настройки, выбора архитектуры и проверок качества. Этот навык предоставляет скрипты и справочные материалы для работы с React, Next.js, Node.js, GraphQL и PostgreSQL.
Планирование архитектуры приложения Next.js App Router
от 89jobrien
Командам Next.js может быть сложно выбрать маршруты, компоненты, загрузку данных и шаги миграции. Этот skill дает структурированные архитектурные рекомендации по App Router, Server Components и производительности.
Улучшение качества кода Vue 3
от vuejs-ai
В проектах Vue со временем часто накапливаются ошибки, связанные с реактивностью, компонентами и производительностью. Этот навык дает целевые рекомендации по Vue 3 для более безопасных паттернов и более понятного кода.
Оптимизация производительности Go с помощью профилирования
от 89jobrien
Сервисы Go могут становиться медленными или потреблять много памяти без очевидных доказательств причины. Этот навык помогает с профилированием, анализом аллокаций, настройкой конкурентности и оптимизацией на основе бенчмарков.