Vercel React Best Practices
Apply Vercel’s prioritized React and Next.js performance rules while you write, review, or refactor UI so waterfalls, bundle bloat, and rerenders do not slip into production.
Overview
Vercel React Best Practices is an agent skill most often used in Build (also Ship review and perf) that applies Vercel Engineering’s prioritized React and Next.js performance rules during writing, review, and refactoring
Install
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practicesWhat is this skill?
- 70 prioritized rules across eight impact tiers—from async waterfalls and bundle size through server, client fetch, reren
- Prefix taxonomy (`async-`, `bundle-`, `server-`, `client-`, etc.) so agents apply CRITICAL fixes before LOW-impact polis
- Explicit hooks for writing, code review, refactoring, and bundle/load-time optimization on React and Next.js codebases
Adoption & trust: 459k installs on skills.sh; 27.7k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are shipping React or Next.js features but lack a consistent, impact-ordered checklist, so waterfalls, bundle growth, and avoidable rerenders keep slipping past casual review.
Who is it for?
Solo builders on Next.js or React who want Vercel-style performance guardrails during AI-assisted implementation, PR review, or refactors before launch.
Skip if: Teams on non-React stacks, backend-only services, or projects that need automated Lighthouse CI rather than coding-pattern guidance.
When should I use this skill?
Writing, reviewing, or refactoring React/Next.js code; tasks involving components, pages, data fetching, bundle optimization, or performance improvements.
What do I get? / Deliverables
You get agent-guided changes and reviews aligned to Vercel’s 70-rule performance taxonomy, with critical async and bundle issues addressed before lower-priority optimizations.
- Code changes or diffs that follow Vercel’s categorized performance rules
- Review notes mapped to rule prefixes (async, bundle, server, client, rerender, etc.)
- Refactor plans that prioritize CRITICAL and HIGH-impact categories first
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
The skill’s primary triggers are new components, pages, and data-fetching work—canonical Build-phase frontend delivery before launch traffic exposes perf debt. All 70 rules target React/Next.js UI architecture, rendering, and client/server data paths, which map directly to the frontend subphase rather than backend APIs or agent tooling.
Where it fits
While scaffolding a new dashboard route, the agent applies `async-` and `server-` rules so data dependencies parallelize instead of serializing in the App Route
You ask the agent to split a heavy client bundle and lazy-load charts using `bundle-` category guidance before merging the feature branch.
Before release, you run a review pass that flags `rerender-` and `client-` anti-patterns in forms and lists that slipped through initial implementation.
Pre-launch, you refactor hot paths using the prioritized rule table so CRITICAL waterfall and bundle fixes land before LOW-priority JavaScript micro-optimizatio
How it compares
Use as a structured performance rulebook for React/Next.js code—not as a generic ESLint preset, MCP server, or hosting deploy skill.
Common Questions / FAQ
Who is vercel-react-best-practices for?
It is for solo and indie developers (and small front-end teams) building or maintaining React and Next.js apps with Claude Code, Cursor, Codex, or similar agents who want Vercel’s engineering patterns baked into write and review workflows.
When should I use vercel-react-best-practices?
Use it in Build when creating components, pages, or data-fetching code; in Ship during performance-focused code review or refactors; and again before launch when tightening bundle size, server rendering, and client fetch patterns for production traffic.
Is vercel-react-best-practices safe to install?
Treat it like any third-party skill from the ecosystem: review the Security Audits panel on this Prism page, confirm the MIT-licensed source matches vercel-labs/agent-skills, and avoid granting broader agent permissions than your repo policy requires.
SKILL.md
READMESKILL.md - Vercel React Best Practices
# Vercel React Best Practices Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 70 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation. ## When to Apply Reference these guidelines when: - Writing new React components or Next.js pages - Implementing data fetching (client or server-side) - Reviewing code for performance issues - Refactoring existing React/Next.js code - Optimizing bundle size or load times ## Rule Categories by Priority | Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | Eliminating Waterfalls | CRITICAL | `async-` | | 2 | Bundle Size Optimization | CRITICAL | `bundle-` | | 3 | Server-Side Performance | HIGH | `server-` | | 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` | | 5 | Re-render Optimization | MEDIUM | `rerender-` | | 6 | Rendering Performance | MEDIUM | `rendering-` | | 7 | JavaScript Performance | LOW-MEDIUM | `js-` | | 8 | Advanced Patterns | LOW | `advanced-` | ## Quick Reference ### 1. Eliminating Waterfalls (CRITICAL) - `async-cheap-condition-before-await` - Check cheap sync conditions before awaiting flags or remote values - `async-defer-await` - Move await into branches where actually used - `async-parallel` - Use Promise.all() for independent operations - `async-dependencies` - Use better-all for partial dependencies - `async-api-routes` - Start promises early, await late in API routes - `async-suspense-boundaries` - Use Suspense to stream content ### 2. Bundle Size Optimization (CRITICAL) - `bundle-barrel-imports` - Import directly, avoid barrel files - `bundle-analyzable-paths` - Prefer statically analyzable import and file-system paths to avoid broad bundles and traces - `bundle-dynamic-imports` - Use next/dynamic for heavy components - `bundle-defer-third-party` - Load analytics/logging after hydration - `bundle-conditional` - Load modules only when feature is activated - `bundle-preload` - Preload on hover/focus for perceived speed ### 3. Server-Side Performance (HIGH) - `server-auth-actions` - Authenticate server actions like API routes - `server-cache-react` - Use React.cache() for per-request deduplication - `server-cache-lru` - Use LRU cache for cross-request caching - `server-dedup-props` - Avoid duplicate serialization in RSC props - `server-hoist-static-io` - Hoist static I/O (fonts, logos) to module level - `server-no-shared-module-state` - Avoid module-level mutable request state in RSC/SSR - `server-serialization` - Minimize data passed to client components - `server-parallel-fetching` - Restructure components to parallelize fetches - `server-parallel-nested-fetching` - Chain nested fetches per item in Promise.all - `server-after-nonblocking` - Use after() for non-blocking operations ### 4. Client-Side Data Fetching (MEDIUM-HIGH) - `client-swr-dedup` - Use SWR for automatic request deduplication - `client-event-listeners` - Deduplicate global event listeners - `client-passive-event-listeners` - Use passive listeners for scroll - `client-localstorage-schema` - Version and minimize localStorage data ### 5. Re-render Optimization (MEDIUM) - `rerender-defer-reads` - Don't subscribe to state only used in callbacks - `rerender-memo` - Extract expensive work into memoized components - `rerender-memo-with-default-value` - Hoist default non-primitive props - `rerender-dependencies` - Use primitive dependencies in effects - `rerender-derived-state` - Subscribe to derived booleans, no