react-best-practices

Apply 45 React/Next.js performance rules across 7 categories.

Updated Mar 21, 2026
One-click install
npx skills add https://github.com/kyle-deprow/ai_scaffolding --skill react-best-practices-kyle-deprow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/kyle-deprow/ai_scaffolding/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/kyle-deprow/ai_scaffolding --skill react-best-practices-kyle-deprow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React apps often suffer from performance issues due to suboptimal component patterns, inefficient data fetching, and large bundle sizes.

Core Features & Use Cases

  • 45 rules across 7 priority categories guide performance improvements for React/Next.js apps.
  • Provides concrete patterns, examples, and references to help during writing, reviewing, or refactoring code.
  • Helps teams standardize performance practices across projects and teams.

Quick Start

Scan your React/Next.js project and apply the documented best-practices guidelines to improve component performance, 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
What are React and Next.js performance best practices for optimizing components?▼

React and Next.js performance best practices involve applying 45 cataloged rules across 7 categories to optimize component rendering, data fetching strategies, and bundle sizes. These patterns provide concrete examples to guide development and code review.

How do I review and refactor React code to improve frontend optimization?▼

Refactor React code by applying metadata-driven performance guidelines during code review. Scan project components and pages against 45 documented rules to identify inefficient data fetching and suboptimal component patterns.

Can I use these best practices to reduce bundle size in my Next.js app?▼

Yes, you can reduce Next.js bundle size using these best practices. The guidelines include ready-to-use patterns specifically targeting bundle optimization alongside component performance and data fetching strategies.

What is the best way to standardize React performance rules across a development team?▼

Standardize React performance across teams by enforcing metadata-driven guidelines with frontmatter containing name and description fields. This approach applies 45 consistent rules during development, code review, and refactoring workflows.

Do I need specific dependencies to apply Next.js performance patterns to my project?▼

No external dependencies are required to apply these Next.js performance patterns. The guidelines are self-contained rules providing concrete examples and references to optimize components, data fetching, and bundles directly.

Why does my React app suffer from slow rendering and large bundle sizes?▼

React apps suffer from slow rendering and large bundle sizes due to suboptimal component patterns and inefficient data fetching. Applying structured best practices across 7 priority categories helps identify and resolve these bottlenecks.