react-best-practices

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

Apply 57 React and Next.js performance rules across development, reviews, and audits.

1|Updated Feb 14, 2026

Search Tags:#performance #react #optimization #nextjs #bundling #memoization #waterfalls

Ready to run

npx skills add https://github.com/BeastAyyG/Campus-Cupids --skill react-best-practices-beastayyg

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/BeastAyyG/Campus-Cupids/tree/main/.agent_backup/skills/nextjs-react-expert
Command: npx skills add https://github.com/BeastAyyG/Campus-Cupids --skill react-best-practices-beastayyg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It addresses the challenges of slow React/Next.js apps by providing a structured, rule-based approach to identify and fix performance bottlenecks across the critical areas of data fetching, rendering, and bundle size.

Core Features & Use Cases

57 optimization rules organized into eight focused sections covering waterfalls, bundle size, SSR, client data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns.
Practical guidance including a performance review checklist, a developer-friendly content map, and a quick-start workflow for real-world projects.
A decision-tree and validation scripts to audit projects and guide targeted improvements.

Quick Start

Start by reviewing Section 1 to eliminate waterfalls, then Section 2 to shrink bundles, and finally apply Section 3 server-side and Section 5-6 rendering patterns as needed.

Frequently Asked Questions about react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I fix React performance issues like rendering waterfalls and large bundle sizes?▼

Fix React performance issues by applying a structured set of 57 optimization rules targeting data fetching waterfalls, bundle trimming, and SSR efficiency. This approach guides component-level refactoring and audits to systematically eliminate bottlenecks.

What is the best way to optimize React re-renders and client-side data fetching?▼

Optimize React re-renders and client data fetching by following specific rule sections covering memoization and rendering patterns. These rules guide targeted improvements to JavaScript performance and component efficiency during audits.

Can I use these React optimization rules for Next.js SSR and CSR performance improvements?▼

Yes, you can use these React optimization rules for Next.js SSR and CSR performance improvements. The 57 rules explicitly cover server-side rendering efficiency and client-side data fetching patterns applicable across development and refactoring.

How do I audit a React project to identify performance bottlenecks?▼

Audit a React project to identify performance bottlenecks by using the provided decision-tree and validation scripts. This process enforces the 57 optimization rules to guide targeted improvements across rendering, data fetching, and bundle size.

What are the limitations of using a rule-based approach for React performance optimization?▼

The limitation of a rule-based approach for React optimization is that it requires YAML frontmatter configuration in SKILL.md and relies on optional scripts and assets. Users must manually apply the 57 rules across eight sections during reviews and refactors.