Fetch
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.
01 / The skill · React · Performance guidance
Vercel React Best Practices: fix the costly patterns first
A rule-based Skill for writing and reviewing React or Next.js code. It prioritizes data waterfalls and bundle size before lower-impact micro-optimizations.
Publisher, source, and installation
Published by Vercel Labs · Type: Code-review and implementation Skill
Independent guide. Vercel Labs has not endorsed Floatboat.
Upstream installation
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practicesInstalls the upstream Skill with the open Skills CLI; no Floatboat capability is implied.
A realistic request
The source organizes React and Next.js performance rules into eight impact-ranked categories. That makes it useful for a focused review of fetching, bundles, server rendering, client state, and re-renders—not a substitute for profiling a real page.
Ask the agent
“Review this Next.js product page for request waterfalls and unnecessary client-side JavaScript. Rank the fixes and show the exact files.”
A useful result
A useful review identifies the request chain or import responsible, proposes bounded edits, and separates measured findings from hypotheses.
When to use React Best Practices
Use it when React code is being written, reviewed, or refactored and you need a prioritized checklist.
Bundle
A client component ships too much code
Trace broad imports, heavy modules, and third-party scripts before adding another loading indicator.
Render
A component repeats expensive work
Inspect state placement, derived values, and re-render triggers before applying memoization everywhere.
Where the Skill stops
- A guaranteed Lighthouse score; rules need measurement on the target app.
- Non-React projects without a relevant React or Next.js code path.
How the review moves from symptom to edit
The Skill directs attention to high-impact categories, then the agent inspects the relevant code path.
- 01
Identify the slow path
Name the page or interaction and gather a trace or reproducible symptom.
- 02
Apply the highest-impact rule
Read the relevant rule and inspect only the code that contributes to that path.
- 03
Verify the result
Compare behavior and measurements after the change; do not call a stylistic rewrite a performance win.
02 / Practical guide
Choose a performance rule by impact, not fashion
The source ranks waterfalls and bundles above micro-optimizations. Tie each proposed edit to the page's actual fetch and render path.
What does the React performance Skill cover?
Its eight groups span asynchronous waterfalls, bundle loading, server work, client fetching, re-renders, rendering, JavaScript cost, and advanced patterns. The categories are ordered so reviews start with likely larger wins.
Is it a profiler or an automatic speed fix?
No. The SKILL.md provides instructions and references for an agent. It can suggest code changes, while before/after traces, network timings, and user-facing metrics must be checked in the project.
What you can take away
- A prioritized list of candidate fixes
- Code locations and rule references
- A measurement plan for the main changes
What to check first
- Confirm React/Next.js version before using version-specific advice.
- Profile the affected route before and after edits.
- Keep behavior and accessibility intact.
Explore More Agent Skills
Read another Skill guide and check its original source before using it.
Frequently Asked Questions
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.
03 / Put it to work · Review the change
Keep the performance question next to the code
Bring your React files and review notes into Floatboat, then verify the important claims with your own measurements.