What problem does it solve?
This Skill captures Vercel Engineering's prioritized performance rules to prevent common React and Next.js regressions such as data-fetching waterfalls, oversized bundles, inefficient server-side rendering, and excessive re-renders, enabling consistent, production-grade performance outcomes.
Core Features & Use Cases
- Comprehensive Rule Set: 45 prioritized rules across eliminating waterfalls, bundle size optimization, server-side performance, client data fetching, re-render reductions, rendering performance, JS micro-optimizations, and advanced patterns.
- Practical Application: Use when authoring or reviewing React components and Next.js pages, implementing data fetching strategies, optimizing bundle composition, or refactoring to improve runtime and build-time performance.
- Example: Convert serial fetches into parallel Promise.all calls, replace barrel imports with direct imports for heavy modules, and apply dynamic imports for feature-only code to reduce initial bundle size.
Quick Start
Analyze my Next.js page and propose concrete changes to remove data-fetching waterfalls, shrink the bundle, and minimize unnecessary re-renders.
