A page loads data in a chain
Review whether independent requests can run in parallel, or whether an await can move into the branch that actually needs it.
Vercel React Best Practices by Vercel Labs
Use Vercel React Best Practices by Vercel Labs to write, review, and refactor React and Next.js code. Explore guidance for data fetching, bundle loading, rendering, and state updates, then focus your agent on the changes most relevant to the page or interaction you want to improve.
Install and get started
Choose your agent to see how to get started. In Floatboat, copy a request that asks the agent to read the original instructions. Other options show the Skill installation command or the publisher’s native setup steps.
Choose an agent
Start in Floatboat
Copy the request into a Floatboat conversation
Read the original Vercel React Best Practices instructions at https://github.com/vercel-labs/agent-skills/blob/main/skills/react-best-practices/SKILL.md. Explain its purpose, required tools, and installation options, then help me use it.Let the agent read the original instructions and check how to use them in your environment.
Download Floatboat ↗Try this request
Review this Next.js product page for request waterfalls and unnecessary client-side JavaScript. Rank the fixes and show the exact files.
About Vercel React Best Practices
Vercel React Best Practices is an Agent Skill published in Vercel Labs’ agent-skills repository for reviewing React and Next.js performance patterns. Its rules cover request waterfalls, bundle loading, server work, client fetching, re-renders, rendering, JavaScript cost, and advanced patterns. The impact ranking helps an agent decide which code paths deserve attention first. Individual rule files provide explanations and implementation examples for a focused change. Give the agent the relevant route or component and the behavior you want to improve; use measurements from your project to judge the result. Installing the Skill adds guidance to the agent, while code changes and performance checks take place in your application.
Use Cases for React Best Practices
Explore React and Next.js performance tasks where a prioritized review can guide the next change. Investigate chained requests, oversized client bundles, or repeated component work, and use the relevant rules to connect a visible symptom to code you can inspect and measure.
A client component ships too much code
Trace broad imports, heavy modules, and third-party scripts before adding another loading indicator.
A component repeats expensive work
Inspect state placement, derived values, and re-render triggers before applying memoization everywhere.
How to Improve React Performance
Start with one route, component, or interaction and explain the performance symptom to your agent. Use the Skill’s impact-ranked rules to inspect relevant code, make a focused change, and compare the same user path before and after implementation.
- 01
Define the performance issue
Identify the route or interaction and provide a reproducible symptom. Include a trace, network timing, or bundle report when available.
- 02
Review the relevant rules
Ask the agent to inspect the code using the matching impact-ranked categories. Read the proposed changes before applying them to the selected path.
- 03
Compare behavior and metrics
Repeat the same user path after the change. Check correctness alongside loading, interaction, or bundle measurements.
Explore More Agent Skills
Read another Skill guide and check its original source before using it.
Vercel React Best Practices FAQ
Is Vercel React Best Practices only for Next.js?
No. Many rules concern React generally, while some sections address Next.js server rendering and routing. Apply only the rules that match your stack.
Does it rewrite the whole app?
It is a set of instructions for an agent, not an autonomous refactoring service. Scope the request to the route or component you want reviewed.
How do I know a recommendation helped?
Measure the same user path before and after. A rule match is a reason to investigate, not proof of a faster page.
Where are the original rules?
The source SKILL.md links individual rule files in Vercel Labs' agent-skills repository; this page links the original source.
Which performance issue should I investigate first?
Start with a measured user-visible bottleneck, such as a request waterfall or slow interaction. Use the impact ranking to choose an investigation, then compare the same scenario before and after the change.
Can a rule be applied on either side of a server/client boundary?
Check where the code executes before changing data fetching or state. A server-rendering recommendation and a client interaction recommendation solve different problems, even when both involve the same component.
What should I provide for a useful performance review?
Provide the route or component files, your React and Next.js versions, a reproducible symptom, and any available traces or bundle reports. Those inputs help the agent choose relevant rules and give you a baseline for checking the change.