vercel-react-best-practices

Review and refactor React/JSX code for improved Next.js performance and reduced bundle size.

885|108|Updated Apr 30, 2025
One-click install
npx skills add https://github.com/legions-developer/invoicely --skill vercel-react-best-practices-legions-developer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/legions-developer/invoicely/tree/main/.agents/skills/react-best-practices
Command: npx skills add https://github.com/legions-developer/invoicely --skill vercel-react-best-practices-legions-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps you prevent slow React and Next.js apps caused by common performance anti-patterns, including server/client waterfalls, oversized bundles, unnecessary re-renders, and inefficient rendering patterns.

Core Features & Use Cases

  • Eliminates async waterfalls by restructuring code for parallelization and streaming with Suspense where appropriate.
  • Reduces bundle size and load time using safer import strategies, dynamic/conditional loading, and after-hydration loading for non-critical third-party code.
  • Improves rendering and runtime efficiency by optimizing RSC prop serialization, avoiding shared module state hazards, and applying targeted re-render and rendering-performance rules.

Use it when you are reviewing or refactoring React/Next.js components, Route Handlers, Server Actions, or when diagnosing performance regressions like slow TTI/LCP, excessive network round-trips, or frequent UI stalls.

Quick Start

Ask an AI agent to review your React/Next.js change set and refactor it to remove waterfalls, reduce client/server payload size, and apply the most impactful performance rules from the Vercel React Best Practices guide.

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 fix slow React and Next.js performance caused by server/client waterfalls?▼

To fix slow React and Next.js performance, restructure async dependencies for parallelization and use Suspense streaming. This eliminates server/client waterfalls by analyzing data fetching patterns and applying safer loading strategies to produce faster code changes.

What is the best way to reduce bundle size in a Next.js app?▼

The best way to reduce bundle size is using safer import strategies, dynamic conditional loading, and after-hydration loading for non-critical third-party code. This minimizes client payload size and improves load times without breaking rendering.

How do I optimize React Server Components prop serialization?▼

Optimize React Server Components prop serialization by analyzing RSC boundary prop payloads and applying rendering-performance rules. This reduces serialization overhead and avoids shared module state hazards during refactoring.

Why does my Next.js app have unnecessary re-renders and UI stalls?▼

Unnecessary re-renders and UI stalls happen due to inefficient rendering patterns and unoptimized React rendering behaviors. Applying targeted re-render rules and analyzing component structures resolves these runtime efficiency issues.

Can I use this to refactor Server Actions and Route Handlers in Next.js?▼

Yes, you can refactor Server Actions and Route Handlers in Next.js. The process analyzes data fetching, loading strategies, and async dependency structures to produce safer and faster code changes.

When do I need to optimize data fetching and loading strategies in React?▼

You need to optimize data fetching and loading strategies when diagnosing performance regressions like slow TTI/LCP or excessive network round-trips. Restructuring these patterns removes waterfalls and improves rendering efficiency.