vercel-react-best-practices

Apply 57 prioritized React/Next.js performance rules across 8 categories.

Updated Jan 12, 2026

Search Tags:#performance #react #optimization #next.js #best-practices #bundle-size

Ready to run

npx skills add https://github.com/cortezalberto/chile --skill vercel-react-best-practices-cortezalberto

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/cortezalberto/chile/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/cortezalberto/chile --skill vercel-react-best-practices-cortezalberto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects frequently struggle with performance and maintainability as they scale. Vercel React Best Practices provides a consolidated, actionable reference to apply proven patterns for faster rendering, smaller bundles, and reliable server/client data handling.

Core Features & Use Cases

57 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
Clear guidance for eliminating waterfalls, bundle-size optimizations, server-side performance, client-side data fetching, re-render strategies, rendering performance, JavaScript micro-optimizations, and advanced patterns.
Practical use cases for building, reviewing, or refactoring React/Next.js code, including pages, components, data fetching, and bundle optimization.

Quick Start

Read the guidelines and apply the most relevant rules to your current React/Next.js task, focusing on performance-critical areas like data fetching, SSR, and bundle size.

Frequently Asked Questions about vercel-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 bundle size and rendering performance?▼

To optimize React and Next.js performance, apply a prioritized set of rules targeting bundle size, server-side rendering, and data fetching to eliminate waterfalls and reduce loading times.

What are the best practices for data fetching in Next.js to avoid waterfalls?▼

Best practices for Next.js data fetching involve applying rules that eliminate waterfalls by prioritizing parallel data retrieval and reliable server/client data handling patterns.

How do I reduce unnecessary re-renders in React components?▼

Reduce React component re-renders by applying targeted rendering performance rules and JavaScript micro-optimizations, prioritizing refactoring efforts based on their overall performance impact.

Does this React optimization approach work for existing Next.js pages?▼

Yes, this approach works for existing Next.js pages by guiding automated refactoring across components, data fetching, and bundle optimization to improve overall performance.

What's the best way to refactor React code for faster loading times?▼

The best way to refactor React code for faster loading times is to apply a comprehensive set of 57 performance guidelines prioritized by impact across 8 distinct categories.