Skill · em Construir interface
react-best-practices
Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering. Use when optimizing React apps, reviewing performance, or refactoring components.
Procedência
- Origem: davila7/claude-code-templates
- Caminho:
cli-tool/components/skills/web-development/react-best-practices - Versão fixada:
57f899e5394bb8ca166f38eacae8f0853cbfe033 - Licença: MIT
- Espelhado em 25/09/2026
- 437 downloads no Claude Code Templates (lido em 25/09/2026)
Antes de instalar
48 arquivos · 108,6 KB · inclui 1 script que executa: references/rules/download_rules.sh
Instalar na sua CLI
O comando baixa a versão fixada (commit 57f899e) direto da origem, para a pasta que a CLI lê. Precisa de curl (macOS e Linux); no Windows não há comando, porque o Rook Labs é para macOS.
Claude Code
Neste projeto: Esta skill tem 48 arquivos: grande demais para um comando de copiar e colar. Baixe da origem, na versão fixada.
Global: Esta skill tem 48 arquivos: grande demais para um comando de copiar e colar. Baixe da origem, na versão fixada.
Codex
Neste projeto: Esta skill tem 48 arquivos: grande demais para um comando de copiar e colar. Baixe da origem, na versão fixada.
Global: Esta skill tem 48 arquivos: grande demais para um comando de copiar e colar. Baixe da origem, na versão fixada.
Antigravity
Neste projeto: Esta skill tem 48 arquivos: grande demais para um comando de copiar e colar. Baixe da origem, na versão fixada.
Global: Esta skill tem 48 arquivos: grande demais para um comando de copiar e colar. Baixe da origem, na versão fixada.
Peça ao Rook
Já usa o Rook Labs? Cole no chat do Rook: instale a skill https://rooklabs.sh/marketplace/cct.react-best-practices
Prévia do SKILL.md
---
name: react-best-practices
description: Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering. Use when optimizing React apps, reviewing performance, or refactoring components.
version: 1.0.0
author: Vercel Engineering
license: MIT
tags: [React, Next.js, Performance, Optimization, Best Practices, Bundle Size, Rendering, Server Components]
dependencies: []
---
# React Best Practices - Performance Optimization
Comprehensive performance optimization guide for React and Next.js applications with 40+ rules organized by impact level. Designed to help developers eliminate performance bottlenecks and follow best practices.
## When to use this skill
**Use React Best Practices when:**
- Optimizing React or Next.js application performance
- Reviewing code for performance improvements
- Refactoring existing components for better performance
- Implementing new features with performance in mind
- Debugging slow rendering or loading issues
- Reducing bundle size
- Eliminating request waterfalls
**Key areas covered:**
- **Eliminating Waterfalls** (CRITICAL): Prevent sequential async operations
- **Bundle Size Optimization** (CRITICAL): Reduce initial JavaScript payload
- **Server-Side Performance** (HIGH): Optimize RSC and data fetching
- **Client-Side Data Fetching** (MEDIUM-HIGH): Implement efficient caching
- **Re-render Optimization** (MEDIUM): Minimize unnecessary re-renders
- **Rendering Performance** (MEDIUM): Optimize browser rendering
- **JavaScript Performance** (LOW-MEDIUM): Micro-optimizations for hot paths
- **Advanced Patterns** (LOW): Specialized techniques for edge cases
## Quick reference
### Critical priorities
1. **Defer await until needed** - Move awaits into branches where they're used
…