react-best-practices

Guide React and Next.js optimization with 40 rules across 8 categories.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/N2O-com/N2O-just-workflow --skill react-best-practices-n2o-com
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/N2O-com/N2O-just-workflow/tree/main/03-patterns/react-best-practices
Command: npx skills add https://github.com/N2O-com/N2O-just-workflow --skill react-best-practices-n2o-com

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of best practices for optimizing React and Next.js applications, addressing critical performance bottlenecks like waterfalls, bundle size, and re-renders.

Core Features & Use Cases

  • Performance Optimization: Offers over 40 rules across 8 categories, from critical (eliminating waterfalls) to advanced patterns.
  • Code Generation & Refactoring: Guides AI agents in writing, reviewing, and refactoring React/Next.js code for maximum efficiency.
  • Use Case: When developing a new feature in a Next.js app, consult this Skill to ensure components are rendered efficiently, data fetching is optimized, and the final bundle size is minimized, leading to a faster user experience.

Quick Start

Consult the react-best-practices skill for guidance on optimizing React code performance.

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 bottlenecks like waterfalls and bundle size?

To optimize React and Next.js performance, apply a structured guide of over 40 rules across 8 categories. This eliminates waterfalls, minimizes bundle size, and improves server-side rendering efficiency.

What are the best practices for reducing React re-render efficiency issues?

Best practices for reducing React re-render efficiency issues involve applying prioritized rules from an advanced optimization guide. It provides detailed code examples and impact metrics to refactor components for maximum rendering efficiency.

Does this Next.js optimization guide cover both server-side rendering and client-side data fetching?

This Next.js optimization guide covers server-side rendering and client-side data fetching. It provides structured rules and code examples to address critical performance bottlenecks across these rendering strategies.

How do I use AI agents to refactor React code for better performance?

Use AI agents to refactor React code by consulting a structured best practices guide containing over 40 rules. This guides the agent in writing and reviewing code to resolve performance bottlenecks and minimize bundle size.

What is the best way to prevent data fetching waterfalls in Next.js applications?

The best way to prevent data fetching waterfalls in Next.js applications is to follow a prioritized set of optimization rules. These rules target critical bottlenecks with detailed explanations and code examples for efficient data retrieval.

Are there limitations to automated React code refactoring using standard best practices?

Automated React code refactoring using standard best practices requires consulting over 40 categorized rules with specific impact metrics. Limitations depend on correctly identifying bottlenecks like bundle size and re-render efficiency before applying the automated refactoring patterns.