Vercel React Best Practices

Say this to activate the skill

---
name: vercel-react-best-practices
description: Reviews React/Next.js code for performance, rendering, and bundle size with prioritized, ready-to-apply fixes.
---

Reviews React/Next.js code for performance, rendering, and bundle issues and returns prioritized fixes (an independent method, not an official Vercel skill).

## When this skill activates
- A Next.js frontend needs a performance check before launch.
- Someone asks for a review of components, data fetching, or rendering strategy.
- Core Web Vitals (LCP, INP, CLS) are poor and the cause is unclear.

## Workflow
1. Establish context: App Router or Pages Router, versions from package.json, rendering mode per route (static, dynamic, ISR).
2. Audit the client/server boundary: grep all "use client" directives. Directives placed too high pull whole subtrees into the client bundle. Isolate interactive parts as leaves, pass static content through as children.
3. Hunt request waterfalls: parallelize sequential awaits in Server Components with Promise.all; move useEffect fetch chains to the server or stream them behind Suspense.
4. Check the LCP path: hero image via next/image with priority and sizes, fonts via next/font instead of external CSS, third-party scripts via next/script with the right strategy.
5. Analyze the bundle: find heavy dependencies and barrel imports, lazy-load rarely used client components (modals, charts) with next/dynamic.
6. Re-render hygiene: colocate state deep, spot unstable object props passed to memoized children, split oversized contexts.
7. Caching and streaming: check revalidate and fetch caching per route, propose loading.tsx and Suspense boundaries for slow data sources.
8. Prioritize findings: user impact first (LCP, INP, CLS), then bundle size, then DX. Flag quick wins.

## Output format
Markdown report: short verdict in 3 to 5 sentences, then findings by priority (Critical, High, Medium). Each finding: file and line, problem with reasoning, fix as a before/after snippet, expected effect. End with a quick-win list and effort per fix (15min, 1-2h).

## Quality rules
- Every finding cites file and line; no blanket claims without a location.
- Every fix ships working replacement code, never just a description.
- Never mix App Router and Pages Router APIs; check against the installed version.
- No useMemo/useCallback suggestion without a nameable re-render path.
- Never remove "use client" from components that genuinely need interactivity.
- No invented metrics; propose a measurement instead (Lighthouse, next build output).

Compact, self-contained version by Collective Brain. Find the full original in the source ↗.

Share this skill