react-best-practices

Identify and implement React and Next.js performance best practices across code reviews and refactors.

Updated Dec 27, 2023
One-click install
npx skills add https://github.com/djscruggs/TRYBE --skill react-best-practices-djscruggs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/djscruggs/TRYBE/tree/main/.claude/skills/react-best-practices
Command: npx skills add https://github.com/djscruggs/TRYBE --skill react-best-practices-djscruggs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

React and Next.js performance issues often stem from waterfalls, bloated bundles, and inefficient rendering. This skill provides a comprehensive, rule-based guide to optimize data fetching, code organization, and rendering for faster, smoother UIs.

Core Features & Use Cases

  • 40+ rules organized by impact (CRITICAL to LOW) covering eliminating waterfalls, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, and rendering improvements.
  • Practical patterns with real-world examples to apply during code reviews, refactors, and feature implementations.
  • A scalable blueprint for engineering teams to consistently improve performance across React/Next.js projects.

Quick Start

Apply these guidelines to your React project to quickly reduce waterfalls, optimize bundles, and improve rendering 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 identify and fix React and Next.js rendering bottlenecks?▼

Fix React and Next.js rendering bottlenecks by applying a 40+ rule guide that eliminates data waterfalls, optimizes bundle sizes, and enforces safe server and client rendering strategies.

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

Reduce Next.js bundle size using categorized rules for bundle optimization and code organization. These rules provide practical patterns to streamline data fetching and remove bloated dependencies.

How does client-side data fetching cause waterfalls and how do I optimize it?▼

Client-side data fetching causes waterfalls when sequential requests block UI rendering. Optimize data fetching by applying concrete rules that restructure server and client rendering strategies to parallelize loads.

Can I use these performance rules during standard React code reviews?▼

Yes, you can use these performance rules during React code reviews. The guide provides actionable patterns and scalable blueprints to consistently enforce safe coding and rendering improvements across teams.

Do I need Next.js to apply these React re-render optimization rules?▼

You do not need Next.js to apply the React re-render optimization rules. While the guide includes Next.js-specific performance rules for server-side performance, the client-side rendering improvements apply generally.