react-best-practices

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

Apply 58 React/Next.js performance rules across 8 categories to code generation, reviews, and refactoring.

Updated Aug 27, 2026

Search Tags:#performance #refactoring #frontend #react #nextjs #best-practices #code-review

Ready to run

npx skills add https://github.com/JYHTHEGREAT/jyh-system --skill react-best-practices-jyhthegreat

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/JYHTHEGREAT/jyh-system/tree/main/archive/reusable/frontend/skills/react-best-practices
Command: npx skills add https://github.com/JYHTHEGREAT/jyh-system --skill react-best-practices-jyhthegreat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React/Next.js projects often face performance regressions and maintainability challenges as they scale. This skill codifies 58 rules across 8 categories to guide code generation, reviews, and refactoring with consistent performance considerations.

Core Features & Use Cases

58 rules across 8 categories covering critical areas like eliminating waterfalls, bundle size, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns.
Provides examples and patterns to apply during code generation, code review, and refactoring, enabling teams to ship faster while keeping performance in check.
Use cases include optimizing server components, reducing bundle size, and improving rendering stability in large React/Next.js apps.

Quick Start

Instruct your AI to follow the React best practices rules when generating, reviewing, or refactoring React/Next.js code.

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 during code generation and refactoring?▼

To optimize React and Next.js performance, apply a comprehensive set of 58 rules across 8 categories covering server components, bundle size, and rendering. This enforces consistent performance considerations during code generation and refactoring tasks.

What are the best practices for reducing bundle size and eliminating data fetching waterfalls in Next.js?▼

Best practices for reducing bundle size and eliminating waterfalls involve applying specific rules for client-side data fetching and server-side performance. This provides targeted patterns to resolve waterfalls and optimize bundle delivery in large-scale applications.

Can I use these React performance rules for code reviews in large-scale applications?▼

Yes, you can use these React performance rules for code reviews in large-scale applications. The rules provide examples and patterns specifically designed to improve rendering stability and maintainability as your project scales.

How does applying server components and re-render optimization rules improve frontend performance?▼

Applying server components and re-render optimization rules improves frontend performance by enforcing requirements described in frontmatter. It guides you through advanced patterns and JavaScript performance techniques to stabilize rendering and enhance server-side execution.

What categories of performance regressions do React and Next.js projects typically face as they scale?▼

React and Next.js projects typically face performance regressions in categories like eliminating waterfalls, bundle size, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns.