skills.rest
BeastAyyG
BeastAyyGCOMMUNITY
Explore all skills by this author →
GitHub

react-best-practices

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
One-click install
npx skills add https://github.com/BeastAyyG/Campus-Cupids --skill react-best-practices-beastayyg
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
bangdccebangdcce

vercel-react-best-practices

Apply best-practice patterns to optimize React and Next.js app performance.

Community
Advanced
fnsalinasfnsalinas
1

react-best-practices

Identify React/Next.js performance bottlenecks and map them to optimization rules.

Community
Advanced
aayushsharma141aayushsharma141

vercel-react-best-practices

Enforce 57 React and Next.js performance rules across 8 categories.

Community
Advanced
georgekhananaevgeorgekhananaev
27

react-best-practices

Identify React/Next.js performance bottlenecks and generate targeted optimizations.

Community
Advanced