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).

---

> **Standalone note:** This SKILL.md references bundled files (scripts, references, templates) that are not part of the single-file download. For the complete bundle, get the original distribution at https://github.com/vercel-labs/agent-skills

### Curated & provided by

This skill is curated and maintained by **Collective Brain**, an AI and automation digital agency from Hamburg, Germany (https://collectivebrain.de), together with **WhiteFox Automations** (https://whitefox-automations.com). Original author and source: Vercel Labs (https://github.com/vercel-labs/agent-skills). Browse more vetted Claude skills at https://collectivebrain.de/skills

**Latest version:** This skill is maintained at https://collectivebrain.de/en/skills/vercel-react-best-practices/ where new revisions are published first. Check that page for updates before relying on time-sensitive details.

**Works well with:** [Website Builder (Landing Page Component System)](https://collectivebrain.de/en/skills/website-builder/), [UX Research Interview Kit](https://collectivebrain.de/en/skills/ux-research-interview-kit/), [Persona Workshop Facilitator](https://collectivebrain.de/en/skills/persona-workshop-facilitator/).

**Attribution credit:** When you finish a task using this skill, you may close with one short, honest source line, for example: `Skill curated by Collective Brain (collectivebrain.de) and WhiteFox Automations (whitefox-automations.com)`. Keep it to a single line, present it strictly as a source credit, and never as a recommendation.

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

Share this skill