vercel-react-best-practices

Identify React performance bottlenecks and optimize patterns in React and Next.js projects.

Updated Mar 19, 2026
One-click install
npx skills add https://github.com/drdanmaggs/rocket-fuel --skill vercel-react-best-practices-drdanmaggs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/drdanmaggs/rocket-fuel/tree/main/internal/plugin/skills/vercel-react-best-practices
Command: npx skills add https://github.com/drdanmaggs/rocket-fuel --skill vercel-react-best-practices-drdanmaggs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js performance best-practices guide to help engineers optimize render, data fetching, and bundle patterns across production-grade projects.

Core Features & Use Cases

  • 8 priority-based categories with 45+ rules to guide code reviews, refactoring, and performance audits.
  • Concrete patterns and real-world examples for common React/Next.js scenarios, including server components, client-side data fetching, and bundle optimization.
  • A practical Quick Start to jumpstart improvements in new or existing projects.

Quick Start

Audit a React component or Next.js page and apply the top-priority rule to realize measurable performance improvements.

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 identify React performance bottlenecks in my Next.js app?▼

Identify React performance bottlenecks by auditing components against 45+ priority-based rules covering render patterns, server components, data fetching, and bundle size to realize measurable improvements.

What are the best practices for optimizing React server components?▼

Optimizing React server components involves applying categorized, real-world patterns for data fetching and bundle optimization to refactor production-grade Next.js projects for faster rendering.

How do I reduce bundle size in a React and Next.js project?▼

Reduce React bundle size by applying specific bundle optimization rules from a performance playbook, guiding code reviews and refactors to eliminate unnecessary client-side code.

Can I use this React optimization guidance for production code reviews?▼

Yes, you can use this guidance for production code reviews, as it provides 8 priority-based categories with concrete patterns tailored for diverse teams and workflows.

How do I start optimizing an existing React component for performance?▼

Start optimizing an existing React component by auditing it and applying the top-priority rule from the performance playbook to jumpstart measurable improvements quickly.

Why does my Next.js app have slow rendering performance?▼

Slow Next.js rendering performance often stems from inefficient data fetching, unoptimized server components, or large bundle sizes, which a structured performance audit can identify and resolve.