Agent skill · software engineering · julianromli
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
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-06-09. 182 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. 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills julianromli/react-best-practices