react-best-practices

Identify and remediate performance bottlenecks in React and Next.js projects.

Updated Jan 15, 2026
One-click install
npx skills add https://github.com/zero-rehq/opencode-kit --skill react-best-practices-zero-rehq
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/zero-rehq/opencode-kit/tree/main/.opencode/skill/react-best-practices
Command: npx skills add https://github.com/zero-rehq/opencode-kit --skill react-best-practices-zero-rehq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js apps often suffer from performance issues that degrade user experience. This skill provides a structured, rule-based approach to identify and fix bottlenecks across rendering, data fetching, and bundle size, reducing latency and improving time-to-interactive.

Core Features & Use Cases

  • 45 performance rules prioritized by impact to guide refactoring and code generation.
  • Auto-triggered for React/Next.js projects and integrated into code write, review, and audit workflows.
  • Category-driven checklists for Code Review, Performance Audit, and targeted optimizations with concrete examples.

Quick Start

Run the react-best-practices skill against your React/Next.js project to generate an Active Rules Checklist for a Code Review or Performance Audit.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
How do I identify React performance bottlenecks during a code review?

To identify React performance bottlenecks during a code review, apply a structured set of 45 prioritized rules that detect rendering inefficiencies, data fetching waterfalls, and bundle-size issues. This generates an actionable checklist for targeted remediation.

What is the best way to fix Next.js server-side rendering bottlenecks?

Fixing Next.js server-side rendering bottlenecks involves applying prioritized performance rules during code writing and audits to detect server-side inefficiencies. This provides concrete code examples and an engine-generated plan to reduce latency and improve time-to-interactive.

How can I reduce my React bundle size with optimization rules?

Reduce your React bundle size by running a performance audit that applies 45 prioritized optimization rules. It detects bundle-size issues and JS micro-optimizations, delivering a ready-to-use checklist with actionable code examples for refactoring.

Does this React optimization approach work with Next.js projects?

Yes, this React optimization approach works explicitly with Next.js projects. It auto-triggers during code writing and performance audits to detect server-side bottlenecks, rendering inefficiencies, and data fetching waterfalls specific to the Next.js framework.

Why does my React app suffer from data fetching waterfalls and how do I remediate them?

Data fetching waterfalls degrade React app performance by sequentially blocking renders. Remediate them by applying a comprehensive set of 45 prioritized rules during code reviews to detect these bottlenecks and implement actionable code examples for optimization.