vercel-react-best-practices

Identify React and Next.js performance bottlenecks by applying 57 proven rules across server-side, client-side, rendering, and bundle categories to reduce runtime costs and accelerate user experiences. The guidelines provide actionable patterns and real-world examples for direct implementation.

Apply React server and client component patterns using structured guardrails for component design and data fetching. These guidelines standardize high-quality code across teams and ensure safe defaults for automated refactoring in production environments.

Audit your codebase for Next.js bundle optimization by providing a targeted prompt to the skill, which analyzes your project against performance guidelines and generates a prioritized improvement plan for actionable refactoring.

You can use these React performance guidelines for writing, reviewing, or refactoring projects. The rules include built-in guardrails and handle common edge cases with validation to ensure consistent performance standards across tasks.

No external dependencies are required to apply these Next.js best practices. The skill operates independently to analyze your codebase and provide maintenance-friendly performance guidelines without requiring external component installations.