Vercel React Best Practices

What it does

This skill provides a comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. It contains 57 rules categorized by priority to help automate refactoring and code generation, focusing on areas like eliminating waterfalls, optimizing bundle size, and improving server-side performance. The skill can be used as a reference when writing new components or reviewing existing code for potential improvements.

When to use it

• Writing new React components or Next.js pages.
• Implementing data fetching (client or server-side).
• Reviewing code for performance issues.
• Refactoring existing React/Next.js code.
• Optimizing bundle size or load times.

Key capabilities

• Performance Optimization Rules: Provides 57 rules across 8 categories, prioritized by impact (Critical, High, Medium-High, Medium, Low-Medium, Low).
• Categorized Guidance: Organizes best practices into categories like "Eliminating Waterfalls," "Bundle Size Optimization," and "Server-Side Performance."
• Specific Recommendations: Offers concrete advice such as using Promise.all() for independent operations (async-parallel), avoiding barrel files (bundle-barrel-imports), and leveraging Next.js's dynamic import feature (bundle-dynamic-imports).

Example prompts

• "What are the best practices for optimizing bundle size in a React application?"
• "How can I improve server-side performance in my Next.js app?"
• "Show me rules related to client-side data fetching."

Tips & gotchas

• The skill prioritizes rules based on impact, so focus on the "Critical" categories first for maximum effect.
• This skill is specifically tailored to Vercel and Next.js development; some recommendations might not be applicable in other environments.