Vercel React / Next.js Best Practices

When to use

Use Vercel’s react-best-practices skill when the job is React / Next.js performance — writing new pages, reviewing data fetching, or refactoring for load time and bundle size.

Good fits:

• Suspected request waterfalls (sequential awaits that should be parallel).
• Bloated client bundles (heavy libraries pulled into the browser unnecessarily).
• Ambiguous SSR vs CSR boundaries — too much client fetching, or work that should stay on the server.
• Perf review of an existing App Router / Pages Router codebase.

This is not a design-taste card. For aesthetic / anti-AI-slop UI guidance, see frontend-design-taste. For a11y / focus / forms compliance audits, see vercel-web-design-guidelines.

Skip it for pure CSS restyles, non-React stacks, or “make the landing prettier” asks.

Why

Models default to “works on my laptop” React: serial awaits, fat client components, and vague “optimize later” notes. Vercel Engineering publishes impact-ranked rules (waterfalls and bundle size first) so agents apply performance patterns instead of inventing style preferences.

Baonat marks this verified against vercel-labs/agent-skills → skills/react-best-practices. The pack is MIT / free. Link upstream — do not paste wholesale SKILL.md rule tables into the chat.

Install

1. From your project (or agent skills directory), run:

npx skills add vercel-labs/agent-skills

2. Confirm the install matches the upstream agent-skills README if the command ever changes.
3. Open the React/Next files (or routes) you care about in Cursor.
4. Ask for a performance-first write or review — waterfalls and bundles before micro-opts.
5. Apply changes in priority order; re-measure with your usual Lighthouse / Web Vitals / bundle analyzer workflow.

Copy this

Perf review kickoff:

Use the Vercel react-best-practices skill on [paths / routes].
Order findings by impact: waterfalls → bundle size → server performance → client fetching → re-renders.
For each finding: file path, what’s wrong, suggested fix pattern, why it matters.
Do not turn this into a design/taste review. No purple UI commentary.

Implementation guardrail:

When writing this Next.js feature, follow Vercel react-best-practices:
- Avoid sequential awaits that could be parallel
- Keep heavy deps off the client bundle unless required
- Prefer server-side data where the page can be server-rendered
Show the data-flow briefly before coding.

Concrete scenarios

1. Slow product page. Agent finds chained awaits in a server component and collapses them into parallel fetches.
2. Bundle bloat. Charting or markdown libs moved behind dynamic() / server-only boundaries.
3. CSR overfetch. Client useEffect data loads replaced with server fetch + lean client islands.

Pitfalls / when NOT to use

• Design taste asks. Use frontend-design-taste or design guidelines — this card is perf rules.
• Premature micro-opts. Do not chase js- level tweaks before waterfalls and bundles.
• Non-Next React Native. Different skill surface — do not force web rules onto native.
• Pasting the entire rulebook into chat. Install the skill; link the repo.

FAQ

Q: Who maintains this?
A: Vercel Engineering via vercel-labs/agent-skills. Primary skill path: react-best-practices.

Q: Paid skill pack?
A: No — MIT on GitHub. Cursor (or other hosts) may still need your normal product subscription to run agents.

Q: Multi-agent?
A: Yes — the pack targets AI coding agents broadly; Baonat lists Cursor as the primary tool tag for discovery.