react-best-practices

Applies 40+ performance rules across 8 categories to React and Next.js apps.

Updated Aug 23, 2026

Search Tags:#performance #react #rendering #nextjs #best-practices #server-components #bundle-size

Ready to run

npx skills add https://github.com/bjornslib/cobuilder-harness --skill react-best-practices-bjornslib

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

React performance is frequently hindered by avoidable bottlenecks in rendering, data fetching, and bundle size. This skill provides a comprehensive guide to identify and fix common performance issues in React and Next.js applications.

Core Features & Use Cases

40+ rules across 8 categories covering waterfalls, bundle size, server-side performance, client-side rendering, and re-render optimizations.
Practical patterns with concrete examples to reduce unnecessary renders, optimize data fetching, and improve startup times.
Use cases include auditing code paths, refactoring components for performance, and implementing efficient server components and streaming patterns.

Quick Start

Refit your React/Next.js projects by applying the guidelines in this skill to audit and optimize critical code paths across the app.

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 rendering and data fetching waterfalls?▼

To fix React rendering and data fetching waterfalls, apply structured performance rules that eliminate sequential fetches by parallelizing requests and refactoring components to avoid nested asynchronous dependencies.

What's the best way to reduce bundle size in Next.js apps?▼

The best way to reduce bundle size in Next.js apps involves applying targeted performance rules that minimize unnecessary imports, optimize server components, and refactor client-side code paths to improve startup times.

How does server-side rendering improve React app performance?▼

Server-side rendering improves React app performance by shifting rendering work to the server, which reduces the JavaScript payload sent to the client and enables faster initial page loads using streaming patterns.

Can I use these React performance rules to audit existing code paths?▼

Yes, you can use these React performance rules to audit existing code paths by applying 40+ guidelines across 8 categories to identify bottlenecks and implement practical refactor patterns with concrete examples.

Why does my React app have slow startup times and unnecessary re-renders?▼

Slow startup times and unnecessary re-renders in your React app are caused by avoidable bottlenecks in bundle size and client-side rendering, which you can fix using structured optimization patterns and re-render guidelines.