What problem does it solve? React and Next.js codebases often suffer from slow load times, unnecessary re-renders, oversized bundles, and sequential data-fetching waterfalls. This Skill provides a structured, impact-prioritized rule set from Vercel Engineering so AI agents and developers consistently apply proven performance patterns instead of rediscovering them. ## 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: Every rule includes concrete TypeScript/TSX examples showing the anti-pattern and the optimized implementation, with impact metrics like "2-10x improvement" or "200-800ms import cost". - Use Case: When refactoring a Next.js page that fetches user, posts, and comments sequentially, the Skill directs you to wrap independent calls in Promise.all(), add Suspense boundaries for streaming, and avoid barrel imports from libraries like lucide-react. ## Quick Start Ask the agent to review your React component or Next.js page for performance issues using the Vercel React best practices rules.
