vercel-react-best-practices

Optimize React and Next.js applications with 69 performance rules across 8 categories.

Updated Mar 21, 2026
One-click install
npx skills add https://github.com/babyhzz/mini-viewer --skill vercel-react-best-practices-babyhzz
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/babyhzz/mini-viewer/tree/main/.codex/skills/vercel-react-best-practices
Command: npx skills add https://github.com/babyhzz/mini-viewer --skill vercel-react-best-practices-babyhzz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of optimizing performance in React and Next.js applications, providing a comprehensive set of guidelines and best practices.

Core Features & Use Cases

  • Performance Optimization: Offers 69 rules across 8 categories to optimize React and Next.js applications.
  • Rule Categories: Covers Eliminating Waterfalls, Bundle Size Optimization, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, and Advanced Patterns.
  • Use Case: When developing or refactoring React/Next.js applications, follow these guidelines to improve load times, reduce bundle size, and enhance overall performance.

Quick Start

Apply the guidelines provided in 'AGENTS.md' to optimize your React/Next.js application.

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 a comprehensive set of 69 expert guidelines across 8 categories to improve load times and reduce bundle size. These rules focus on eliminating waterfall effects and enhancing server-side and client-side execution.

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

The best way to reduce Next.js bundle size is to follow specific bundle size optimization guidelines provided within a structured rule set. These performance practices help streamline imports and eliminate unnecessary code from your React application.

How do I eliminate waterfall effects in React data fetching?

You eliminate waterfall effects in React data fetching by applying advanced patterns and client-side data fetching rules. These guidelines restructure how data is requested and loaded to prevent sequential blocking and enhance performance.

Do I need advanced React knowledge to use these performance optimization guidelines?

Yes, you need advanced React and Next.js development knowledge to apply these performance guidelines effectively. The rules cover advanced patterns, server-side performance, and rendering optimization that require prerequisite development experience.

How do I stop unnecessary re-renders in my React components?

To stop unnecessary re-renders in React components, implement re-render optimization rules from a comprehensive performance guideline set. These rules target rendering performance by refining component update cycles and state management.

What specific categories do React performance best practices cover?

React performance best practices cover 8 specific categories: eliminating waterfalls, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns.