react-best-practices

Apply React/Next.js performance rules to optimize components during code review.

34|5|Updated Jan 25, 2026
One-click install
npx skills add https://github.com/baekenough/oh-my-customcode --skill react-best-practices-baekenough
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/baekenough/oh-my-customcode/tree/main/templates/.claude/skills/react-best-practices
Command: npx skills add https://github.com/baekenough/oh-my-customcode --skill react-best-practices-baekenough

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

React/Next.js performance optimization guidance helps developers reduce render time, improve perceived performance, and shrink bundle size across modern React apps.

Core Features & Use Cases

  • 40+ rules across 8 categories
  • Category-based recommendations for server components, data fetching strategies, rendering behavior, and code splitting
  • Use Case: When optimizing a slow page, apply the top performance rules to guide targeted fixes.

Quick Start

Analyze a Next.js page and apply the top performance rules.

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 a slow Next.js page and reduce React render time?

To optimize a slow Next.js page, apply over 40 React performance rules to guide targeted fixes across component design, data fetching, and rendering behavior to reduce render time and shrink bundle size.

What are the best practices for React data fetching and server components?

Best practices for React server components and data fetching involve applying category-based rules that optimize rendering behavior and data retrieval strategies to improve perceived performance in modern React apps.

How can I check my React code for performance issues during a code review?

You can check React code for performance issues by applying performance rules that provide practical checks during code review, targeting component design, data fetching strategies, and build optimization.

What's the best way to implement code splitting and build optimization in modern React apps?

The best way to implement build optimization in modern React apps is to apply category-based recommendations for code splitting and rendering behavior, effectively shrinking the overall bundle size.

Does this React performance optimization guidance work without external dependencies?

Yes, this React performance optimization guidance works without external dependencies, applying 40+ rules across 8 categories directly to your existing component design and data fetching strategies.