Agent skill · practicalswan
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.
What it needs
About 5k tokens when loaded.
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 practicalswan/react-best-practices