react-best-practices

Consolidate React and Next.js performance best practices into automated reference rules.

6|2|Updated Jan 6, 2026
One-click install
npx skills add https://github.com/acaprino/claude-code-daodan --skill react-best-practices-acaprino
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/acaprino/claude-code-daodan/tree/main/plugins/react-development/skills/react-best-practices
Command: npx skills add https://github.com/acaprino/claude-code-daodan --skill react-best-practices-acaprino

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide consolidates React and Next.js performance best practices into a practical, automated reference to help teams build faster, more reliable frontends.

Core Features & Use Cases

  • 70 rules across 8 categories covering rendering performance, data fetching, server considerations, and bundle optimization.
  • Clear guidelines with concrete before/after examples for patterns like useEffect dependencies, Suspense, memoization, and code-splitting to support reviews and automated tooling.
  • Real-world use cases include auditing, refactoring, and AI-assisted code generation workflows for React/Next.js projects.

Quick Start

Audit a React/Next.js codebase and apply best-practice patterns to improve 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 audit my React codebase for performance best practices?▼

To audit React performance, apply codified rules covering rendering, data fetching, and bundle optimization. This reference provides 70 automated guidelines across 8 categories with concrete before/after examples to identify and refactor inefficient patterns.

What is the best way to handle useEffect dependencies and memoization in Next.js?▼

Handling useEffect dependencies and memoization requires enforcing safe patterns and guardrails for edge cases. This reference codifies specific rules with before/after examples to ensure correct dependency arrays and optimal rendering strategies.

Does this React performance guide cover Next.js server components and server actions?▼

Yes, this React performance guide covers Next.js server components and server actions. It includes specific considerations and codified rules for server-side rendering strategies and data fetching patterns typical in Next.js projects.

Can I use these best practices for AI-assisted code generation workflows?▼

Yes, you can use these best practices for AI-assisted code generation workflows. The reference provides a practical, automated guide that acts as guardrails, ensuring generated React and Next.js code follows performance optimization rules.

When should I not use React memoization and code-splitting?▼

Knowing when not to use React memoization and code-splitting involves checking edge case guardrails. This reference enforces safe patterns by codifying 70 rules, preventing misuse of optimization techniques like Suspense and memoization.