react-best-practices

Optimize React and Next.js applications with performance guidelines.

Updated May 19, 2026

Search Tags:#best practices #react #code generation #next.js #performance optimization

Ready to run

npx skills add https://github.com/monforje/.opencode --skill react-best-practices-monforje

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides comprehensive performance optimization guidelines for React and Next.js applications, ensuring optimal performance patterns and reducing development time.

Core Features & Use Cases

Performance Optimization: Offers 70+ rules across 8 categories, including eliminating waterfalls, optimizing bundle size, server-side performance, and more.
Code Generation and Refactoring: Guides automated refactoring and code generation for optimal performance.
Use Case: Refactor an existing React/Next.js application to improve performance and load times by following the guidelines provided.

Quick Start

Use the react-best-practices skill to analyze and optimize a React component or Next.js page for 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 for data fetching and rendering?▼

To optimize React and Next.js performance, apply over 70 rules across 8 categories, including eliminating data fetching waterfalls, optimizing bundle size, and improving server-side rendering efficiency.

What is the best way to refactor an existing React component for performance?▼

The best way to refactor a React component for performance is to use automated code generation guidelines that enforce optimal resource management and rendering patterns.

Can I use these React best practices for both client-side and server-side optimization?▼

Yes, you can use these React best practices for both environments, as the guidelines comprehensively cover server-side performance and client-side bundle size optimization.

How do I eliminate waterfalls and optimize bundle size in Next.js applications?▼

You eliminate waterfalls and optimize bundle size in Next.js by following specific performance guidelines designed to streamline data fetching and reduce resource overhead.

What are the limitations of using automated guidelines for React performance optimization?▼

The limitations of using automated guidelines for React performance optimization involve needing manual oversight to correctly apply 70+ rules across 8 categories to complex application architectures.