Skill · em Construir interface
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle…
Procedência
- Origem: vercel-labs/agent-skills
- Caminho:
skills/react-best-practices - Versão fixada:
063bee94c3f4df8453406c830b0a7df0f2860278 - Licença: MIT
- Espelhado em 25/09/2026
- 741,7 mil instalações no skills.sh (lido em 25/09/2026)
Antes de instalar
76 arquivos · 225 KB · só texto, nenhum script
Instalar na sua CLI
O comando baixa a versão fixada (commit 063bee9) 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 76 arquivos: grande demais para um comando de copiar e colar. Baixe da origem, na versão fixada.
Global: Esta skill tem 76 arquivos: grande demais para um comando de copiar e colar. Baixe da origem, na versão fixada.
Codex
Neste projeto: Esta skill tem 76 arquivos: grande demais para um comando de copiar e colar. Baixe da origem, na versão fixada.
Global: Esta skill tem 76 arquivos: grande demais para um comando de copiar e colar. Baixe da origem, na versão fixada.
Antigravity
Neste projeto: Esta skill tem 76 arquivos: grande demais para um comando de copiar e colar. Baixe da origem, na versão fixada.
Global: Esta skill tem 76 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/vercel-labs.agent-skills.vercel-react-best-practices
Prévia do SKILL.md
---
name: vercel-react-best-practices
description: React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or per…
license: MIT
metadata:
author: vercel
version: "1.0.0"
---
# Vercel React Best Practices
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 70 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
## When to Apply
Reference these guidelines when:
- Writing new React components or Next.js pages
- Implementing data fetching (client or server-side)
- Reviewing code for performance issues
- Refactoring existing React/Next.js code
- Optimizing bundle size or load times
## Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Eliminating Waterfalls | CRITICAL | `async-` |
| 2 | Bundle Size Optimization | CRITICAL | `bundle-` |
| 3 | Server-Side Performance | HIGH | `server-` |
| 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` |
| 5 | Re-render Optimization | MEDIUM | `rerender-` |
| 6 | Rendering Performance | MEDIUM | `rendering-` |
| 7 | JavaScript Performance | LOW-MEDIUM | `js-` |
| 8 | Advanced Patterns | LOW | `advanced-` |
## Quick Reference
### 1. Eliminating Waterfalls (CRITICAL)
- `async-cheap-condition-before-await` - Check cheap sync conditions before awaiting flags or remote values
…