React Best Practices

What it does

This skill provides access to Vercel's comprehensive performance optimization guide for React and Next.js applications. It contains 57 rules, categorized by priority (Critical, High, Medium-High, Medium, Low-Medium, and Low), designed to guide automated refactoring and code generation aimed at improving application performance. The skill focuses on areas like eliminating waterfalls, optimizing bundle size, enhancing server-side performance, and improving client-side data fetching.

When to use it

• When writing new React components or Next.js pages.
• During implementation of data fetching (client or server-side).
• When reviewing code for potential performance bottlenecks.
• To refactor existing React/Next.js codebases.
• For optimizing bundle size and load times.

Key capabilities

• Provides access to 57 Vercel React Best Practices rules.
• Categorizes rules by priority (Critical, High, Medium-High, etc.).
• Offers specific guidance on eliminating waterfalls (async-* prefixed rules).
• Includes recommendations for bundle size optimization (bundle-* prefixed rules).
• Provides advice on server-side performance improvements (server-* prefixed rules).

Example prompts

• "What are the best practices for optimizing bundle size in a Next.js application?"
• "How can I improve data fetching performance using React Suspense?"
• "Show me examples of how to use Promise.all() for parallel operations."
• "Give me recommendations for server-side caching in React."

Tips & gotchas

• The skill focuses specifically on React and Next.js development; it's not a general coding assistant.
• Rules are categorized by priority, so focus on the "Critical" rules first for maximum impact.
• Familiarity with basic React and Next.js concepts is helpful to understand the recommendations.