react-best-practice

Apply structured best-practice rules to optimize React and Next.js applications.

2|Updated Feb 12, 2026
One-click install
npx skills add https://github.com/marcojsmith/AgriBid --skill react-best-practice
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practice
Source: https://github.com/marcojsmith/AgriBid/tree/main/.agent/skills/react-best-practice
Command: npx skills add https://github.com/marcojsmith/AgriBid --skill react-best-practice

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps software teams systematically optimize React and Next.js applications to eliminate performance bottlenecks and improve user experience.

Core Features & Use Cases

  • Comprehensive rules catalog: 40+ rules across 8 categories covering rendering, bundling, server actions, and data-fetching patterns.
  • Practical comparisons: Real-world examples compare incorrect vs correct implementations to illustrate impact.
  • Actionable guidance: Guidance for automated refactoring, code generation, and performance auditing.
  • Use Cases: Useful for code reviews, performance profiling, onboarding new engineers, and architecture decisions.

Quick Start

Identify the top performance bottlenecks in your React project and apply the guide's top 3 rules to generate an optimization plan.

Frequently Asked Questions about react-best-practice

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

FAQPage Schema
How do I optimize React and Next.js application performance during a code review?▼

To optimize React and Next.js performance during code reviews, apply structured best-practice rules covering rendering, bundling, server actions, and data-fetching. The guide provides 40+ actionable rules with incorrect versus correct implementation comparisons to identify and eliminate bottlenecks.

What is the best way to refactor React components for better rendering performance?▼

The best way to refactor React components for rendering performance is applying targeted best-practice rules that contrast incorrect versus correct implementations. This structured approach systematically eliminates bottlenecks across both client-rendered and server-rendered components.

Does this React performance guide cover both client-rendered and server-rendered components?▼

Yes, this React performance guide covers both client-rendered and server-rendered components. It applies structured best-practice rules to optimize data-fetching patterns and server actions across the entire Next.js application architecture.

How do I start optimizing a React project with performance bottlenecks?▼

To start optimizing a React project with performance bottlenecks, identify the top performance issues and apply the guide's top three structured best-practice rules. This generates an actionable optimization plan for immediate user experience improvements.

Can I use these React best practices for automated code generation and refactoring workflows?▼

Yes, you can use these React best practices for automated code generation and refactoring workflows. The guide provides actionable guidance specifically designed to support automated performance auditing and code generation tasks.