react-best-practices

Detect React and Next.js performance hotspots and apply prioritized optimization rules.

9|2|Updated Aug 12, 2025

Search Tags:#performance #refactoring #react #next.js #best-practices #bundle-size

Ready to run

npx skills add https://github.com/fernandobandeira/agents --skill react-best-practices-fernandobandeira

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React/Next.js codebases often drift toward performance regressions; this skill codifies proven optimization patterns into a reusable guide for engineering teams.

Core Features & Use Cases

Prioritized rules across critical areas like asynchronous rendering, bundle optimization, server-side performance, client-side data fetching, and rendering efficiency.
Auto-detection prompts and templates to apply patterns during writing, reviewing, or refactoring code in React/Next.js projects.
Real-world examples and pragmatic guidance that support engineering workflows from ADRs to code reviews.

Quick Start

Identify top-priority performance hotspots in your React/Next.js codebase and apply CRITICAL and HIGH rules first to reduce waterfalls, shrink bundles, and optimize server/client boundaries.

Frequently Asked Questions about react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I fix React performance regressions and reduce bundle size?▼

Fix React performance regressions by applying codified best practices that prioritize rules across asynchronous rendering, bundle optimization, and server-side performance to shrink bundles and reduce waterfalls.

What's the best way to optimize data fetching and server rendering in Next.js?▼

Optimize Next.js data fetching and server rendering by applying actionable patterns that enforce safe, testable rules during component design, improving client-side data fetching and server rendering efficiency.

Can I use these React best practices during code reviews and refactoring?▼

Yes, you can use these React best practices during code reviews and refactoring via auto-detection prompts and templates that apply patterns directly to your React and Next.js codebase workflows.

Does this approach work with SWR for client-side data fetching?▼

Yes, this approach works with SWR by providing concrete examples and references that support client-side data fetching optimizations within the React and Next.js ecosystems.

Why should I prioritize critical rules first when optimizing React components?▼

Prioritize critical rules first to achieve high-impact performance improvements rapidly, reducing waterfalls and shrinking bundles by addressing top-priority performance hotspots before lower-priority optimizations.

What are the limitations of applying generic React best practices to Next.js?▼

Generic React practices lack server-side boundaries and bundle optimization context; this approach provides Next.js-specific guidance across server rendering, client boundaries, and bundle size constraints.