skills.rest
Nguyenvanle
NguyenvanleCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Identify and implement React/Next.js performance best practices for rendering and data flow.

Updated Mar 5, 2026
Search Tags:#performance#frontend#react#optimization#nextjs#best-practices#server-components
One-click install
npx skills add https://github.com/Nguyenvanle/ag-wander-ai --skill vercel-react-best-practices-nguyenvanle
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/Nguyenvanle/ag-wander-ai/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/Nguyenvanle/ag-wander-ai --skill vercel-react-best-practices-nguyenvanle

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Skill consolidates React and Next.js performance guidelines from Vercel Engineering to help teams optimize components, data fetching, rendering, and bundling for faster, more reliable applications.

Core Features & Use Cases

  • 57 rules across 8 categories guiding developers through eliminating waterfalls, reducing bundle size, and optimizing server/client patterns.
  • Useful for coding reviews, refactoring, and automated code generation to ensure high-performance outcomes on React/Next.js projects.

Quick Start

Review your codebase against the compiled rules and begin applying the guidelines to optimize rendering, data fetching, and bundle management.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the React and Next.js performance best practices for optimizing server components?▼

React and Next.js performance best practices involve optimizing server and client component patterns, eliminating data fetching waterfalls, and reducing bundle size to ensure faster, more reliable application rendering and data flow.

How do I eliminate data waterfalls when fetching data in Next.js?▼

To eliminate data waterfalls in Next.js, apply compiled performance guidelines that review your data fetching patterns, ensuring parallel data retrieval and proper server component usage to optimize rendering and data flow.

What's the best way to reduce React bundle size during a codebase refactor?▼

The best way to reduce React bundle size during a refactor is to evaluate your codebase against 57 categorized rules, focusing on bundle optimization and proper server/client component separation to minimize shipped JavaScript.

Can I use these React optimization rules for automated code generation tasks?▼

Yes, you can use these React optimization rules during automated code generation, code reviews, and refactoring tasks to systematically enforce high-performance outcomes across modern React components and Next.js pages.

Does this Skill require any specific dependencies to optimize Next.js routing?▼

No specific dependencies are required to optimize Next.js routing and rendering; the Skill operates as a standalone set of guidelines for reviewing and refactoring your existing React and Next.js codebase.

Related Skills

Explore More Software Engineering Skills→
lasswelltlasswellt
1

codebase-map

Analyze a codebase across technology, architecture, quality, and concerns to generate CODEBASE-MAP.md.

Community
Advanced
martind751martind751

vercel-react-best-practices

Apply Vercel's 57 performance rules to React and Next.js code.

Community
Intermediate
47thtechcorner47thtechcorner
21

vercel-react-best-practices

Optimize React and Next.js apps for performance with actionable rules.

Community
Advanced
686f6c61686f6c61
105

profiling

Profile CPU and memory usage to identify performance bottlenecks.

Community
Advanced