react-best-practices

Consolidate React and Next.js performance optimization rules into a skill guide.

Updated Dec 22, 2025
One-click install
npx skills add https://github.com/alaminmain/DoorAuthServer --skill react-best-practices-alaminmain
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/alaminmain/DoorAuthServer/tree/main/.agent/skills/nextjs-react-expert
Command: npx skills add https://github.com/alaminmain/DoorAuthServer --skill react-best-practices-alaminmain

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates a comprehensive set of React and Next.js performance best practices to help teams identify and fix performance bottlenecks, prevent waterfalls, and reduce unnecessary work in the browser and server.

Core Features & Use Cases

  • Comprehensive ruleset: 57 rules across 8 sections covering waterfalls, bundle size, server-side rendering, data fetching, re-renders, rendering, JavaScript micro-optimizations, and advanced patterns.
  • Guided decision framework: Quick decision tree and validation scripts to guide performance audits and debugging.
  • Practical workflows: Templates and scripts for merging, publishing, and validating performance guidance within teams.

Quick Start

Use the skill to benchmark and optimize a React/Next.js project by running the included scripts and consulting the content map to apply critical improvements.

Frequently Asked Questions about 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 to prevent data waterfalls?▼

To optimize React and Next.js performance and prevent data waterfalls, apply a consolidated set of 57 rules covering waterfalls, bundle size, and server-side rendering during feature development and code reviews.

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

Best practices for reducing Next.js bundle size involve applying specific optimization rules from a comprehensive engineering set, supplemented by automated scripts that validate performance health and benchmark the project.

How do I fix unnecessary re-renders in React?▼

Fix unnecessary React re-renders by consulting a guided decision framework and 57 formalized rules targeting re-render and rendering optimizations, using validation scripts to debug and troubleshoot performance bottlenecks.

Does this React performance optimization guide work for server-side rendering?▼

This React performance optimization guide explicitly supports server-side rendering, covering SSR alongside client-side deduplication and JavaScript micro-optimizations to reduce unnecessary work across both browser and server.

What's the best way to audit React performance during code reviews?▼

The best way to audit React performance during code reviews is using a guided decision tree and automated tooling, applying 57 Vercel Engineering rules to identify bottlenecks and validate performance health systematically.