vercel-react-best-practices

Apply React/Next.js performance rules to reduce waterfalls and optimize bundles.

Updated Apr 2, 2026

Search Tags:#performance #refactoring #react #optimization #nextjs #best-practices #code-review

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This knowledge base codifies React and Next.js performance guidelines to help teams ship faster, maintainable, high-quality code.

Core Features & Use Cases

Category-based rules covering Eliminating Waterfalls, Bundle Size Optimization, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, and Advanced Patterns.
Guidelines for safe refactoring, thorough code reviews, and automated code generation across projects.
Real-world use: enforce patterns that reduce waterfalls in API routes, shrink bundles, and enable effective Suspense boundaries during data loading.

Quick Start

Review existing React/Next.js code against the 69 rules and integrate applicable patterns into your workflow.

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 performance and eliminate data fetching waterfalls?▼

Optimizing React performance involves applying a catalog of rules covering waterfall elimination, bundle size reduction, and re-render optimization. You can enforce these patterns across your codebase to reduce API waterfalls and enable effective Suspense boundaries.

What are the best practices for reducing Next.js bundle size?▼

Next.js bundle size optimization requires applying category-based rules that target bundle shrinking and server-side performance. This includes enforcing specific patterns for server/client component separation and safe refactoring to ship faster, maintainable code.

How do I review React code for performance issues and re-render optimization?▼

Reviewing React code for performance issues involves checking existing code against a catalog of 69 rules spanning re-render optimization, rendering performance, and JavaScript performance. This guides thorough code reviews and identifies safe refactoring opportunities.

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

Yes, this React optimization guidance is applicable to existing Next.js pages, new components, data fetching, and bundle optimization. It enforces rules across server/client patterns to guide automated refactoring and code generation in current codebases.

When do I need Suspense boundaries for React data loading?▼

You need Suspense boundaries for React data loading when eliminating API waterfalls and managing client-side data fetching. Applying these performance patterns enables effective Suspense boundaries during data loading to maintain responsive rendering.