skills.rest
zagarlucas
zagarlucasCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply React and Next.js performance best practices to minimize waterfalls and reduce bundle size.

Updated Jan 27, 2026
Search Tags:#performance#react#optimization#nextjs#bundling#server-actions#rsc
One-click install
npx skills add https://github.com/zagarlucas/zagarlucas.github.io --skill vercel-react-best-practices-zagarlucas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/zagarlucas/zagarlucas.github.io/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/zagarlucas/zagarlucas.github.io --skill vercel-react-best-practices-zagarlucas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js performance challenges, including waterfalls, heavy bundles, and server/client rendering inefficiencies.

Core Features & Use Cases

  • 57 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
  • Covers critical patterns for eliminating waterfalls, bundle size optimization, server-side performance, and client-side data fetching.
  • Use cases include optimizing app router pages, data fetching, and dynamic imports for production-grade apps.

Quick Start

Inspect the codebase and apply the highest-impact patterns first, then progressively optimize remaining areas.

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 eliminate waterfalls in Next.js app router data fetching?▼

To eliminate Next.js data fetching waterfalls, apply parallel data fetching patterns instead of sequential requests. This minimizes request waterfalls by fetching data concurrently within server components, reducing overall load times for app router pages.

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

Reducing React and Next.js bundle size requires applying dynamic imports and enforcing category-based transformation guidelines. This approach optimizes server/client rendering boundaries and removes unnecessary client-side JavaScript.

How do I optimize server actions and React Server Components (RSC) for performance?▼

Optimizing server actions and React Server Components involves enforcing critical impact rules for server-side performance. This ensures proper data fetching strategies and minimizes inefficient server/client rendering patterns.

Does this approach apply to typical Next.js projects using the app router?▼

Yes, these optimization guidelines are applicable to typical Next.js projects using the app router. They cover 57 rules across 8 categories, including dynamic imports, server actions, and client-side data fetching strategies.

What are the limitations when refactoring Next.js code for performance?▼

Limitations include managing server/client rendering boundaries and avoiding heavy bundles. The guidelines prioritize 57 rules by critical, high, and medium impact across 8 categories, requiring you to apply highest-impact patterns first before progressively optimizing.

Related Skills

Explore More Software Engineering Skills→
georgekhananaevgeorgekhananaev
27

react-best-practices

Identify React/Next.js performance bottlenecks and generate targeted optimizations.

Community
Advanced
usebonderyusebondery
15

vercel-react-best-practices

Apply 57 prioritized rules across 8 categories to optimize React/Next.js performance.

Official
Advanced
NihaalManafNihaalManaf

vercel-react-best-practices

Apply React/Next.js performance best practices to components, pages, and data fetching.

Community
Advanced
wojonswojons
4

react-review

Analyze React components for best practices, performance, and anti-patterns.

Community
Intermediate