vercel-react-best-practices

Optimize React and Next.js applications with performance rules for automated refactoring.

Updated Dec 11, 2025
One-click install
npx skills add https://github.com/dorrio/sorteo-app-generator --skill vercel-react-best-practices-dorrio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/dorrio/sorteo-app-generator/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/dorrio/sorteo-app-generator --skill vercel-react-best-practices-dorrio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of rules and best practices to optimize the performance of React and Next.js applications, ensuring faster load times, smoother user experiences, and more efficient development.

Core Features & Use Cases

  • Performance Optimization: Covers critical areas like eliminating waterfalls, reducing bundle size, and improving server-side and client-side rendering.
  • AI-Assisted Refactoring: Guides AI agents in writing, reviewing, and refactoring React/Next.js code for optimal performance.
  • Use Case: When developing a new Next.js page, consult this Skill to ensure data fetching is parallelized, components are code-split effectively, and server-side rendering is efficient, leading to a faster initial paint and better Time To Interactive.

Quick Start

Apply the Vercel React best practices to the provided Next.js codebase to improve its performance.

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 application performance?▼

To optimize React and Next.js performance, apply over 50 prioritized rules covering waterfall elimination, bundle size reduction, server-side rendering improvements, and re-render optimization.

What are the best practices for reducing bundle size in Next.js?▼

Best practices for reducing bundle size include applying specific rules for effective component code-splitting and optimizing dependencies to achieve a faster initial paint and better Time To Interactive.

How does eliminating waterfalls improve server-side rendering in React?▼

Eliminating waterfalls improves server-side rendering by parallelizing data fetching, which ensures efficient server-side execution and leads to faster load times and smoother user experiences.

Can AI agents automatically refactor my React code for performance?▼

Yes, AI agents can automatically refactor React code for performance by using this comprehensive guide prioritized by impact to review and optimize code for critical performance areas.

When should I optimize React re-renders for better client-side performance?▼

You should optimize React re-renders whenever client-side performance degrades, using the provided rules to guide automated refactoring and ensure smoother user experiences during interaction.

Does this React optimization guide work for existing Next.js codebases?▼

Yes, this guide works for existing Next.js codebases by applying its prioritized rules to the provided codebase, improving data fetching, code-splitting, and rendering performance.