Agent skill · writing content · laguagu
react-best-practices
React and Next.js performance optimization guide from Vercel Engineering (70 rules in 8 categories). Use when writing, reviewing, or refactoring React/Next.js code to eliminate waterfalls, reduce bundle size, prevent re-renders, optimize Server Components, or fix performance bottlenecks. Triggers on data fetching, Promise.all, Suspense, useMemo, dynamic imports, bundle analysis, code-splitting, and rendering performance tasks.
Why this skill is useful
Provides 70 specific performance optimization rules for React and Next.js that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-03. 58 stars on the source repository.
What this skill does
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. Version Compatibility Feature Minimum version --------- ----------------- Core performance rules (async, bundle, js) React 18 + Next.js 14 React.cache() (server-cache-react) React 19 <Activity> (rendering-activity) React 19.2 React Compiler (affects rerender- rules) React 19 use cache directive (see cache-components skill) Next.js 16 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills laguagu/react-best-practices