vercel-react-best-practices

Applies performance best practices to React and Next.js code.

Updated Mar 12, 2026
One-click install
npx skills add https://github.com/Happy-Horizon/cursor-marketplace --skill vercel-react-best-practices-happy-horizon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/Happy-Horizon/cursor-marketplace/tree/main/synced-vendor-skills/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/Happy-Horizon/cursor-marketplace --skill vercel-react-best-practices-happy-horizon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vercel React Best Practices consolidates and standardizes high-impact guidelines to help teams optimize React and Next.js apps, reducing common performance bottlenecks and inconsistencies across projects.

Core Features & Use Cases

  • 70+ rules across 8 categories covering Eliminating Waterfalls, Bundle Size Optimization, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, and Advanced Patterns.
  • Practical guidance with examples that illustrate correct vs. incorrect implementations, tailored for real-world Next.js and React codebases.
  • Audit, review, and refactor support for tasks like writing new components, reviewing performance issues, and optimizing bundles and data fetching.

Quick Start

Review a React or Next.js component or page, identify a performance bottleneck, and map it to the most relevant category to begin applying the corresponding guideline.

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 performance during code review?▼

To optimize React and Next.js performance during code review, apply 70+ codified rules across eight categories including bundle size optimization and re-render optimization, mapping identified bottlenecks to actionable examples.

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

The best way to reduce bundle size in a Next.js application is to follow codified bundle size optimization rules that provide actionable examples of correct versus incorrect implementations for real-world React codebases.

How do I eliminate data fetching waterfalls in React components?▼

To eliminate data fetching waterfalls in React components, apply standardized guidelines for client-side and server-side data fetching patterns that provide actionable examples to reduce common performance bottlenecks.

Can I use these best practices to refactor existing React components?▼

Yes, you can use these best practices to refactor existing React components by mapping performance issues to relevant categories like re-render optimization and rendering performance, then applying the corresponding guidelines.

What are the limitations of standardizing React performance guidelines across projects?▼

Limitations of standardizing React performance guidelines include potential inconsistencies across projects, which these best practices address by consolidating high-impact rules into eight categories tailored for real-world Next.js codebases.