Agent skill · software engineering · aiskillstore
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 specific performance optimization patterns for React and Next.js that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
React Best Practices Overview Comprehensive performance optimization guide for React and Next.js applications, containing 40+ rules across 8 categories. Rules are 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 Priority-Ordered Guidelines Rules are prioritized by impact: Priority Category Impact ---------- ---------- -------- 1 Eliminating Waterfalls CRITICAL 2 Bundle Size Optimization CRITICAL 3 Server-Side Performance HIGH 4 Client-Side Data Fetching MEDIUM-HIGH 5 Re-render Optimization MEDIUM 6 Rendering Performance MEDIUM 7 JavaScript Performance LOW-MEDIUM 8 Advanced Patterns LOW Quick Reference Critical Patterns (Apply First) Eliminate Waterfalls: Defer await until needed (move into branches) Use Promise.all() for independent async operations Start promises early, await late Use better-all for partial dependencies Use Suspense boundaries to stream content Reduce Bundle Size: Avoid barrel file imports (import directly from source) Use next/dynamic for heavy components Defer non-critical third-party libraries Preload based on user intent High-Impact Server Patterns Use React.cache() for per-request deduplication Use LRU cache for cross-request caching Minimize serialization at RSC boundaries Parallelize data fetching with component composition Medium-Impact Client Patterns Use SWR for automatic request deduplication Defer state reads to usage point Use lazy state initialization for expensive values Use derived state subscriptions Apply startTransition for non-urgent updates Rendering Patterns Animate SVG wrappers, not SVG elements directly Use content-visibility: auto for long lists Prevent hydration mismatch with inline scripts Use explicit conditional rendering (? : not &&) JavaSc …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/react-best-practices--9c81f5