react-best-practices

Enforce Vercel Engineering performance guidelines in React and Next.js applications.

14|2|Updated Jan 28, 2026

Search Tags:#code review #performance #react #optimization #next.js #vercel

Ready to run

npx skills add https://github.com/excatt/superclaude-plusplus --skill react-best-practices-excatt

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/excatt/superclaude-plusplus/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/excatt/superclaude-plusplus --skill react-best-practices-excatt

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks in React and Next.js applications, ensuring faster load times, improved user experience, and more efficient resource utilization.

Core Features & Use Cases

Performance Auditing: Analyzes code against 40+ rules across 8 priority categories.
Optimization Guidance: Provides specific, actionable recommendations for package management, data fetching, bundle size, server-side rendering, and client-side rendering.
Use Case: When developing a new feature in a Next.js app, use this Skill to review your component code and data fetching strategies to ensure optimal performance before deployment.

Quick Start

Apply the react-best-practices skill to review the current codebase for performance optimizations.

Frequently Asked Questions about react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I optimize React and Next.js application performance?▼

To optimize React and Next.js performance, analyze your codebase against Vercel Engineering guidelines covering package management, data fetching waterfalls, bundle size, and server-side rendering efficiency. This process enforces 40+ rules across 8 priority categories to identify and resolve performance bottlenecks.

What is a data fetching waterfall and how does it impact Next.js performance?▼

A data fetching waterfall occurs when sequential asynchronous requests block rendering, severely degrading Next.js performance. Eliminating these waterfalls by parallelizing data fetching and leveraging server-side rendering ensures faster load times and improved user experience.

What is the best way to reduce bundle size in a React application?▼

The best way to reduce React bundle size is by implementing dynamic imports to code-split your application. This optimization technique loads JavaScript modules only when needed, significantly decreasing initial load times and improving overall resource utilization.

Can I use pnpm for package management in my Next.js application?▼

Yes, you can use pnpm for package management in your Next.js application. Enforcing pnpm guidelines as part of your performance auditing process helps maintain strict dependency resolution, preventing bloated node_modules and ensuring efficient package management.

How do I audit my Next.js codebase for server-side rendering efficiency?▼

Auditing Next.js server-side rendering efficiency involves checking component code and data fetching strategies against specific performance rules. This review identifies bottlenecks in SSR execution, ensuring optimal rendering efficiency before deployment.