react-best-practices

Enforce React and Next.js performance rules for automated refactoring and audits.

11|2|Updated Jan 15, 2026

Search Tags:#performance #suspense #react #next.js #refactor #bundle

Ready to run

npx skills add https://github.com/runkids/my-skills --skill react-best-practices-runkids

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

React and Next.js applications often suffer from performance issues caused by waterfalls, large bundles, and hydration overhead. This skill consolidates official performance guidelines into actionable patterns to guide automated refactoring and code generation.

Core Features & Use Cases

40+ rules across 8 categories designed to guide automated refactoring and code generation.
Priority-based patterns to reduce waterfalls, optimize bundle size, and improve server/client performance.
References and rules to support code reviews, architecture decisions, and iterative improvements.

Quick Start

Review the references and apply the top two patterns to the largest bottlenecks in your React/Next.js project. Then iterate on the remaining rules for further optimizations.

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 for faster loading?▼

React and Next.js performance optimization reduces waterfalls, bundle size, and hydration overhead through component design, data fetching, and rendering patterns. This skill applies 40+ rules across 8 categories to guide automated refactoring and code generation for measurable improvements in UI responsiveness and load times.

What are the top performance patterns I should apply first to my React project?▼

Start by reviewing the priority-based patterns targeting your largest bottlenecks—typically waterfalls in data fetching or bundle bloat. The skill consolidates official guidelines into actionable refactoring patterns; apply the top two patterns iteratively, then tackle remaining rules for cumulative gains.

Can I use these React performance rules with Next.js?▼

Yes, this skill covers both React and Next.js performance guidelines. Rules address server/client performance, hydration overhead, and bundling specific to Next.js, alongside component design and rendering patterns that apply across both frameworks.

How do I reduce bundle size and waterfalls in my React application?▼

Bundle size and waterfalls are tackled through code-splitting, lazy loading, and data-fetching optimization patterns. This skill provides references and rules that drive automated refactoring to eliminate waterfalls, shrink bundles, and reduce hydration overhead systematically.

What's the difference between applying these rules manually versus automated refactoring?▼

The skill enforces rules that guide both automated refactoring tools and manual code reviews. Automated refactoring applies patterns at scale; manual review using the same rules ensures architecture decisions and iterative improvements align with performance best practices.

Do I need specific tools or setup to use these React performance guidelines?▼

No dependencies are required. The skill provides references and rules you apply directly to existing React and Next.js projects. Use them to guide code reviews, inform architecture decisions, or integrate with your automated refactoring and code generation tools.