Vercel React Best Practices
Give your coding agent Vercel’s prioritized React and Next.js performance rules when you generate, refactor, or review UI code so waterfalls and bundle bloat get fixed before ship.
Overview
Vercel React Best Practices is an agent skill most often used in Build (also Ship) that applies 40+ prioritized React and Next.js performance rules during automated refactoring and code generation.
Install
npx skills add https://github.com/vercel-labs/claude-skills --skill vercel-react-best-practicesWhat is this skill?
- 40+ performance rules grouped into 8 impact-prioritized categories from critical waterfalls to incremental patterns
- Incorrect vs correct examples with impact metrics for agent-driven refactors and codegen
- Covers eliminating async waterfalls, Promise.all parallelization, API route chains, and strategic Suspense boundaries
- Bundle size optimization guidance for imports, dynamic loading, and dependency trimming
- Authored for AI-assisted maintenance as much as human readers—optimized for consistent automated refactors
- 40+ rules across 8 categories
- Version 1.0.0 (January 2026)
Adoption & trust: 287 installs on skills.sh; 27.7k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your agent ships React or Next.js UI that looks fine but serializes fetches, ships bloated bundles, and regresses Core Web Vitals because there is no shared optimization rulebook.
Who is it for?
Solo builders using agents to maintain or scale a Next.js/React SaaS who need consistent, high-impact performance guardrails without hiring a performance specialist.
Skip if: Teams on non-React stacks, greenfield prototypes with no performance budget yet, or repos where you only need visual composition structure without perf enforcement.
When should I use this skill?
Maintaining, generating, or refactoring React and Next.js codebases where performance and consistency matter.
What do I get? / Deliverables
After the skill runs, generated and refactored code follows impact-ordered waterfall and bundle rules with concrete before/after patterns your agent can repeat across the repo.
- Refactored components and routes aligned to categorized performance rules
- Codegen that avoids documented anti-patterns
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the skill targets React/Next.js implementation and refactoring—the primary moment solo builders ship customer-facing apps. Frontend subphase fits bundle size, Suspense, and client/server boundary rules that live in components, routes, and data-fetching layers.
Where it fits
Refactor a dashboard route so independent fetches run in parallel instead of awaiting sequentially in nested components.
Pre-launch pass that trims barrel imports and defers heavy client modules behind dynamic import boundaries.
After monitoring flags a slow API route chain, apply waterfall-prevention rules to the handler and its dependencies.
How it compares
Use as a rule-backed refactor guide instead of asking the model for generic “make it faster” suggestions without prioritized categories.
Common Questions / FAQ
Who is vercel-react-best-practices for?
Indie and solo developers who ship React or Next.js products with AI agents and want Vercel-style performance rules baked into every change, not ad-hoc optimization tips.
When should I use vercel-react-best-practices?
During Build when implementing pages, loaders, and client components; during Ship when tuning perf before launch; and during Operate when fixing regressions in production Next apps after analytics show slow routes.
Is vercel-react-best-practices safe to install?
It is documentation-style procedural knowledge with no declared tool permissions; review the Security Audits panel on this Prism page and the upstream repo before adding it to your agent stack.
Workflow Chain
Then invoke: vercel composition patterns
SKILL.md
READMESKILL.md - Vercel React Best Practices
# React Best Practices **Version 1.0.0** Vercel Engineering January 2026 > **Note:** > This document is mainly for agents and LLMs to follow when maintaining, > generating, or refactoring React and Next.js codebases. Humans > may also find it useful, but guidance here is optimized for automation > and consistency by AI-assisted workflows. --- ## Abstract Comprehensive performance optimization guide for React and Next.js applications, designed for AI agents and LLMs. Contains 40+ rules across 8 categories, prioritized by impact from critical (eliminating waterfalls, reducing bundle size) to incremental (advanced patterns). Each rule includes detailed explanations, real-world examples comparing incorrect vs. correct implementations, and specific impact metrics to guide automated refactoring and code generation. --- ## Table of Contents 1. [Eliminating Waterfalls](#1-eliminating-waterfalls) — **CRITICAL** - 1.1 [Check Cheap Conditions Before Async Flags](#11-check-cheap-conditions-before-async-flags) - 1.2 [Defer Await Until Needed](#12-defer-await-until-needed) - 1.3 [Dependency-Based Parallelization](#13-dependency-based-parallelization) - 1.4 [Prevent Waterfall Chains in API Routes](#14-prevent-waterfall-chains-in-api-routes) - 1.5 [Promise.all() for Independent Operations](#15-promiseall-for-independent-operations) - 1.6 [Strategic Suspense Boundaries](#16-strategic-suspense-boundaries) 2. [Bundle Size Optimization](#2-bundle-size-optimization) — **CRITICAL** - 2.1 [Avoid Barrel File Imports](#21-avoid-barrel-file-imports) - 2.2 [Conditional Module Loading](#22-conditional-module-loading) - 2.3 [Defer Non-Critical Third-Party Libraries](#23-defer-non-critical-third-party-libraries) - 2.4 [Dynamic Imports for Heavy Components](#24-dynamic-imports-for-heavy-components) - 2.5 [Prefer Statically Analyzable Paths](#25-prefer-statically-analyzable-paths) - 2.6 [Preload Based on User Intent](#26-preload-based-on-user-intent) 3. [Server-Side Performance](#3-server-side-performance) — **HIGH** - 3.1 [Authenticate Server Actions Like API Routes](#31-authenticate-server-actions-like-api-routes) - 3.2 [Avoid Duplicate Serialization in RSC Props](#32-avoid-duplicate-serialization-in-rsc-props) - 3.3 [Avoid Shared Module State for Request Data](#33-avoid-shared-module-state-for-request-data) - 3.4 [Cross-Request LRU Caching](#34-cross-request-lru-caching) - 3.5 [Hoist Static I/O to Module Level](#35-hoist-static-io-to-module-level) - 3.6 [Minimize Serialization at RSC Boundaries](#36-minimize-serialization-at-rsc-boundaries) - 3.7 [Parallel Data Fetching with Component Composition](#37-parallel-data-fetching-with-component-composition) - 3.8 [Parallel Nested Data Fetching](#38-parallel-nested-data-fetching) - 3.9 [Per-Request Deduplication with React.cache()](#39-per-request-deduplication-with-reactcache) - 3.10 [Use after() for Non-Blocking Operations](#310-use-after-for-non-blocking-operations) 4. [Client-Side Data Fetching](#4-client-side-data-fetching) — **MEDIUM-HIGH** - 4.1 [Deduplicate Global Event Listeners](#41-deduplicate-global-event-listeners) - 4.2 [Use Passive Event Listeners for Scrolling Performance](#42-use-passive-event-listeners-for-scrolling-performance) - 4.3 [Use SWR for Automatic Deduplication](#43-use-swr-for-automatic-deduplication) - 4.4 [Version and Minimize localStorage Data](#44-version-and-minimize-localstorage-data) 5. [Re-render Optimization](#5-re-render-optimization) — **MEDIUM** - 5.1 [Calculate Derived State During Rendering](#51-calculate-derived-state-during-rendering) - 5.2 [Defer State Reads to Usage Point](#52-defer-state-reads-to-usage-point) - 5.3 [Do not wrap a simple expression with a primitive result type in useMemo](#53-do-not-wrap-a-simple-expression-with-a-primitive-result-type-in-usememo) - 5.4 [Don't Define Components Inside Components](#54-dont-define-components-inside-components)