vercel-react-best-practices

Apply prioritized React and Next.js performance rules to refactor client and server code.

Updated Apr 27, 2026

Search Tags:#react #bundle size #rendering #next.js #performance optimization #server actions #async waterfalls

Ready to run

npx skills add https://github.com/zooroy/appt-system --skill vercel-react-best-practices-zooroy

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you avoid common React and Next.js performance pitfalls that cause slow loads, unnecessary re-renders, and server-side waterfalls.

Core Features & Use Cases

Eliminates async waterfalls by restructuring data fetching and deferring work until needed.
Reduces bundle size by improving imports, splitting heavy components, and loading non-critical code later.
Optimizes server/client rendering by minimizing RSC serialization, controlling Suspense boundaries, and preventing hydration issues.
Improves interaction responsiveness using transitions, deferred values, and render discipline.

Quick Start

Use this skill when reviewing or refactoring React/Next.js code where performance regressions, slow API/Server Action responses, or excessive re-rendering are suspected.

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 async waterfalls in Next.js server components?▼

Fix async waterfalls by restructuring data fetching logic and deferring non-critical work until it is needed. This prevents sequential fetches from blocking rendering and eliminates server-side performance bottlenecks.

What is the best way to reduce React bundle size during refactoring?▼

Reduce React bundle size by improving import paths, splitting heavy components, and loading non-critical code later. Applying these rules during development ensures smaller bundles and faster load times.

Why does my React app re-render excessively and how can I optimize it?▼

Excessive re-renders are optimized by enforcing render discipline, using transitions, and applying deferred values. These techniques improve interaction responsiveness and prevent unnecessary component updates.

How do I minimize RSC serialization overhead in Next.js?▼

Minimize RSC serialization overhead by controlling Suspense boundaries and optimizing server/client rendering boundaries. This prevents hydration issues and reduces the payload transferred between server and client.

Can I use these performance rules to optimize Next.js Server Actions?▼

Yes, you can apply these guidelines during Server Action implementation to optimize API route responses. The rules provide prioritized incorrect versus correct patterns for deterministic refactors across server boundaries.

When should I review my React code for performance regressions?▼

Review React code for performance regressions when you suspect slow API responses, excessive re-rendering, or oversized bundles. Use these guidelines to identify and fix inefficient data fetching and rendering patterns.