vercel-react-best-practices
Official skill published by Vercel Engineering: 70 performance rules for React and Next.js, sorted into 8 families ranked by impact. At the top, flagged critical, removing request waterfalls and cutting the weight of the code shipped to the browser; then server-side performance, client-side data fetching, needless re-renders, rendering performance, plain JavaScript, and advanced patterns last. Each rule lives in its own file, with a wrong example, a correct one and the reasoning. The agent reaches for it when it writes, reviews or refactors a component, a page or a data fetch. MIT licensed.
Strengths
- An explicit priority order by impact, which stops the agent polishing a detail while a request waterfall blocks the page
- Every rule has its own file with a wrong and a correct example, so you can check what the agent is citing
- A prefix per family (async, bundle, rerender…), so a finding maps straight to its level of urgency
- Vercel's own MIT-licensed skill, installable on its own or with the rest of the collection
Limitations
- Built for Next.js: the server family does not apply to a Vite SPA, and the dynamic import rule assumes next/dynamic
- Written by a vendor selling Next.js hosting, so some recommendations nudge you toward its stack
- The repository docs still announce "40+" rules while the skill file counts 70, so read the list, not the summary
Best for
- A Next.js team that wants the agent to deal with request waterfalls and code weight first
- A performance review of a React component, tying each finding to a named rule
- A Vite SPA, provided you tell the agent to set the server family aside