Agent skills · Coding
Vercel React Best Practices: performance rules your agent follows Agents writing React tend to chain requests, bloat the bundle and trigger needless re-renders. This skill from Vercel Engineering gives them 70 rules in 8 categories ranked by impact, from eliminating waterfalls and bundle size down to JavaScript micro-optimizations, and the agent applies them while writing and reviewing code.
32,930 stars on GitHub · #32
Get skill Open on GitHub
Author Vercel
Licence not stated
Pack Single skill
Updated 14 October 2026 What it does Eliminates request waterfalls with Promise.all() for independent work, await moved into the branch that needs it, and Suspense streaming Trims the bundle: direct imports instead of barrel files, next/dynamic for heavy components, analytics loaded after hydration Speeds up the server with React.cache() per-request dedup, an LRU cache across requests and after() for non-blocking work Cuts re-renders by deriving state during render and using functional setState and startTransition for non-urgent updates Every rule has its own file under rules/ explaining why it matters, with an incorrect and a correct code sample When to use it You are writing new React components or Next.js pages and want to dodge common performance traps from the start A page loads slowly and you need to find where fetches run one after another instead of in parallel You want a pre-release code review focused on bundle size and load time Ask your agent Review this React component for performance issues using Vercel's rules Find request waterfalls in app/dashboard/page.js and parallelise them Why does this list re-render on every keystroke? Fix it with the rerender rules Before you install The rules target React and Next.js, and during refactors the agent edits your code to match them. The README and SKILL.md state MIT, yet GitHub detects no licence file in the repository.
Questions How do I install Vercel React Best Practices? Run npx skills add vercel-labs/agent-skills@vercel-react-best-practices. Dropping the @ part installs the whole Vercel collection instead.
How many rules does it contain? SKILL.md lists 70 rules across 8 priority-ranked categories, from critical to low. The collection README still says 40+.
Is it only for Next.js? No. Some rules target server components and next/dynamic, but the re-render and JavaScript sections apply to any React code.
