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.
Describe one React route or interaction and the evidence you can provide. Shape a performance-review request around request waterfalls, client code, and rendering, with prioritized findings tied to files and a way to verify the proposed change.
Name the slow interaction and the files or measurements you can provide.
Copy the request into a new Floatboat conversation and provide the required material.
Download FloatboatPreview and copy the request. It is not sent automatically from this page.
Reference: Vercel React Best Practices https://github.com/vercel-labs/agent-skills/blob/main/skills/react-best-practices/SKILL.md Read the original documentation and check the current environment and dependencies. Propose any new installation or tool connection before proceeding. My task: Review this Next.js product page for request waterfalls and unnecessary client-side JavaScript. Rank the fixes and show the exact files. Expected deliverable: Prioritized findings tied to files, with evidence and a way to verify each proposed change.
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.
Request waterfalls, large client bundles, and repeated rendering need different evidence. Explore how Vercel React Best Practices relates loading traces, import paths, and interaction profiles to focused changes that can be measured again.
When a page loads data through a chain of requests, inspect its loading code, dependency relationships, and timing traces together. Check whether independent requests can run in parallel or an await can move into the branch that needs it. Compare the same loading path before and after a focused change.
A large client bundle calls for examining entry points, import paths, and bundle analysis before adding another loading indicator. Trace broad imports, heavy modules, and third-party scripts to find what is being shipped. Compare bundle results after targeted splitting or deferred loading rather than assuming every dependency needs the same treatment.
Expensive work during frequent updates needs interaction recordings and profiling evidence. Inspect state placement, derived values, and re-render triggers before applying memoization throughout the component tree. Make a targeted adjustment, then repeat the original interaction to check both performance and behavior.
A route can repeat data preparation or computation even when the visible page renders correctly. Inspect the server-side path and request boundaries to identify where work is duplicated, then compare a focused reuse or scheduling change with the original behavior. Preserve freshness and access requirements, and measure the same request before treating less repeated work as a verified improvement.
A React review needs a reproducible route or interaction before optimization begins. The steps below connect relevant performance rules with a bounded code change and a repeat of the same user path, so the result can be compared with the starting measurements.
Identify the route or interaction and provide a reproducible symptom. Include a trace, network timing, or bundle report when available.
Ask the agent to inspect the code using the matching impact-ranked categories. Read the proposed changes before applying them to the selected path.
Repeat the same user path after the change. Check correctness alongside loading, interaction, or bundle measurements.
Read another Skill guide and check its original source before using it.
