react-best-practices

Name: react-best-practices
Availability: InStock
Author: xianmingyao

Review React and Next.js code for performance bottlenecks across server and client.

1|1|Updated Mar 18, 2026

Search Tags:#performance #react #optimization #rendering #nextjs #ssr #bundle

Ready to run

npx skills add https://github.com/xianmingyao/openclaw-CaySon --skill react-best-practices-xianmingyao

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/xianmingyao/openclaw-CaySon/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/xianmingyao/openclaw-CaySon --skill react-best-practices-xianmingyao

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses slow React and Next.js applications by providing a structured, rule-based approach to identify and fix common performance bottlenecks across server and client, including waterfalls, bundle bloat, and rendering inefficiencies.

Core Features & Use Cases

Comprehensive guidance across 8 categories: eliminating waterfalls, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns.
Actionable rules and patterns with real-world examples to drive automated refactoring, code-splitting, and performance optimizations.
Use Case: Optimize a Next.js app by reducing initial load, parallelizing data fetches, and safely deferring non-critical work.

Quick Start

Analyze a slow React component and apply guidelines to reduce waterfall requests and improve startup time.

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 at scale?▼

To optimize React and Next.js performance, apply a structured, rule-based approach to fix bottlenecks like waterfall requests, bundle bloat, and rendering inefficiencies across server and client contexts.

What's the best way to eliminate data fetching waterfalls in Next.js?▼

The best way to eliminate data fetching waterfalls is to parallelize data fetches and safely defer non-critical work, reducing initial load times and improving startup performance.

How can I reduce bundle size in a React application?▼

Reduce React bundle size by applying actionable rules for code-splitting and automated refactoring, driving down initial load times by removing unnecessary client-side JavaScript.

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

Fix unnecessary re-renders by applying targeted rendering optimization rules and advanced patterns when writing, reviewing, and refactoring performance-sensitive React components.

Does this approach work for both server-side and client-side rendering optimization?▼

Yes, the optimization approach works for both server-side and client-side contexts, covering server-side performance, client-side data fetching, and rendering performance comprehensively.

When should I use advanced patterns for React rendering performance?▼

Use advanced patterns for React rendering performance when basic code-splitting and re-render optimization are insufficient to resolve complex bottlenecks in performance-sensitive components.