react-best-practices

Apply React/Next.js performance rules to guide automated refactoring and code generation.

Updated Aug 23, 2026

Search Tags:#performance #refactoring #react #nextjs #code-review #bundle-size

Ready to run

npx skills add https://github.com/tomrford/dotfiles --skill react-best-practices-tomrford

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

React/Next.js apps often suffer from performance issues due to suboptimal component patterns, data fetching strategies, and bloated bundles. This skill provides a comprehensive, rule-based approach to optimize performance across the codebase.

Core Features & Use Cases

40+ rules across 8 categories that guide automated refactoring and code generation.
Prioritized patterns to reduce bundle size, render times, and server-side bottlenecks.
References and practical examples to aid writing, reviewing, or refactoring React/Next.js code.
Scenarios including new component development, page data fetching, and performance reviews.

Quick Start

Analyze a React/Next.js code path and apply the top-priority performance patterns to improve rendering, data fetching, and bundle size.

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 slow render speed and bundle bloat?▼

To optimize React performance, apply a structured set of best practices across component design, data fetching, and page architecture. This enforces 40+ prioritized rules across 8 categories to reduce bundle size and server-side bottlenecks.

What is the best way to reduce bundle size in a Next.js application?▼

Reducing bundle size in Next.js involves applying prioritized performance patterns during development and refactoring. This approach guides code generation to enforce structural rules that eliminate bloated bundles and improve render efficiency.

How do I review React code for performance anti-patterns?▼

Review React code for performance by checking against 40+ structured rules covering component design and data fetching. This provides prioritized guidance and references to identify suboptimal patterns causing slow renders and server bottlenecks.

Can I use these Next.js performance patterns for automated refactoring?▼

Yes, these Next.js performance patterns are designed to guide automated refactoring and code generation. They enforce structural rules across 8 categories to systematically improve rendering, data fetching, and bundle efficiency.

When do I need to apply structured performance patterns to a React codebase?▼

Apply structured performance patterns when your React app suffers from slow render speed, suboptimal data fetching, or bloated bundles. This rule-based approach provides prioritized guidance to resolve these specific codebase bottlenecks.