What problem does it solve? React and Next.js codebases often suffer from performance issues like request waterfalls, bloated bundles, unnecessary re-renders, and slow server responses. This Skill provides a structured, impact-prioritized rule set from Vercel Engineering so AI agents and developers consistently apply proven optimization patterns during code generation, review, and refactoring. ## Core Features & Use Cases - 70 Prioritized Rules Across 8 Categories: Covers eliminating waterfalls, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript micro-optimizations, and advanced patterns. - Incorrect vs. Correct Code Examples: Each rule includes concrete TypeScript/TSX examples showing the anti-pattern and the optimized implementation, with impact metrics like 2-10x improvements or 200-800ms import cost reductions. - Use Case: When refactoring a Next.js page that sequentially awaits multiple fetches, the Skill guides restructuring with Promise.all(), Suspense boundaries, and React.cache() deduplication to eliminate waterfalls and speed up rendering. ## Quick Start Ask the AI to review your React component or Next.js page for performance issues using the Vercel React best practices guidelines.
