Optimize React and Next.js Performance
React apps often slow down because data, bundles, rendering, and state updates interact in complex ways. This skill applies Vercel performance guidance to help agents write, review, and refactor React and Next.js code.
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "react-best-practices" from https://skillstore.io/skills/vercel-labs-react-best-practices.md and its manifest at https://skillstore.io/api/skills/vercel-labs-react-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Using "react-best-practices". Review a dashboard page that loads user data, charts, and a large editor.
Expected outcome:
A prioritized review that flags data waterfalls, recommends lazy editor loading, and separates critical content from deferred widgets.
Using "react-best-practices". Improve a component that re-renders many rows after every state update.
Expected outcome:
A refactor plan that narrows dependencies, extracts memoized children, and moves expensive calculations closer to their usage.
Using "react-best-practices". Assess a Next.js route that repeats authentication and database lookups.
Expected outcome:
A caching recommendation that separates per-request deduplication from cross-request caching and explains measurement points.
All 98 static findings were adjudicated as false positives after reviewing the surrounding Markdown context. The hits are documentation examples, inline code formatting, or prose about React performance. No executable skill scripts, secret material, prompt injection, or unauthorized network behavior were found.
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
https://skillstore.io/skills/vercel-labs-react-best-practices/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/vercel-labs-react-best-practices?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/vercel-labs-react-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vercel-labs-react-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/vercel-labs-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>vercel-labs. (2026). react-best-practices security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/vercel-labs-react-best-practices/audits/7@techreport{vercel-labs-vercel-labs-react-best-practices-2026,
author = {vercel-labs},
title = {react-best-practices security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/vercel-labs-react-best-practices/audits/7},
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: "react-best-practices security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "vercel-labs"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/vercel-labs-react-best-practices/audits/7"
identifiers:
- type: other
value: "skillstore:vercel-labs-react-best-practices:audit:7"
description: "Skillstore immutable audit report identifier"
Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.
Why this variant is first
sickn33-react-best-practices
2026-08-21
0xbigboss-react-best-practices
2026-08-21
vercel-labs-react-best-practices
2026-08-21
Find React and Next.js performance issues before code merges into production.
Prioritize fixes for waterfalls, heavy bundles, redundant fetching, and excess re-renders.
Generate new components that follow Vercel performance patterns from the start.
Review this React component for avoidable re-renders, unnecessary effects, and simple rendering issues. Explain the top fixes first.
Analyze this Next.js page for async waterfalls and redundant requests. Suggest changes using early promises, parallel fetching, and cache boundaries.
Review these imports and component boundaries for bundle cost. Recommend direct imports, dynamic imports, and user-intent preloading where appropriate.
Create a prioritized React and Next.js performance refactor plan for this feature. Cover data fetching, bundle size, caching, rendering, and validation steps.
Author
vercel-labsLicense
MIT
Skillstore revision
r1
Version notice
The author did not declare a version.
Repository
https://github.com/vercel-labs/agent-skills/tree/react-best-practices/skills/react-best-practices/Ref
36e07d5e13068e5be64447e8f20b427cf2cbd21a
Maintenance freshness
7/20/2026
Usage
9 downloads · 618 views
File structure
Implement React View Transitions
React view transitions are easy to misplace, causing silent or noisy animations. This skill guides route, Suspense, list, and shared element animation choices.
Create Better AI Skills
Building reusable AI skills can be inconsistent without clear structure. This skill guides Claude, Codex, and Claude Code through design, scaffolding, validation, and packaging.
Optimize React and Next.js Code
React and Next.js applications often lose performance through waterfalls, large bundles, and avoidable re-renders. This skill gives Claude, Codex, and Claude Code concrete review rules for faster frontend work.
Refactor React Components With Composition
Large React components often become brittle when boolean props control many modes. This skill guides Claude, Codex, and Claude Code toward compound components and provider-based state.
Optimize React Native Apps
React Native apps can suffer from slow lists, janky animations, and platform mistakes. This skill gives Codex, Claude, and Claude Code concise rules for performant Expo and React Native work.
Build Better Next.js Apps
Next.js code can fail when patterns drift across framework versions. This skill guides Claude and Codex with focused rules for App Router, RSC, data, assets, and deployment.
Build Frontend Apps Faster
by davila7
Frontend work often needs consistent React patterns, performance checks, and project scaffolding. This skill gives Claude and compatible agents practical guidance and local helper scripts for modern web application development.
Build Fullstack Apps With Senior Guidance
by alirezarezvani
Fullstack projects often need consistent setup, architecture choices, and quality checks. This skill provides scripts and references for React, Next.js, Node.js, GraphQL, and PostgreSQL work.
Plan Next.js App Router Architecture
by 89jobrien
Next.js teams can struggle to choose routes, components, data loading, and migration steps. This skill gives structured architecture guidance for App Router, Server Components, and performance.
Review Code with Structured Quality Checks
by alirezarezvani
Code reviews can miss quality, security, and maintainability issues. This skill guides structured reviews with scripts, checklists, and report generation.
Improve Vue 3 Code Quality
by vuejs-ai
Vue projects often collect reactivity, component, and performance mistakes over time. This skill gives targeted Vue 3 guidance for safer patterns and clearer code.
Optimize Go Performance with Profiling
by 89jobrien
Go services can become slow or memory-heavy without clear evidence. This skill guides profiling, allocation analysis, concurrency tuning, and benchmark-driven optimization.