---
name: "vercel-labs/agent-skills react-best-practices (70 rules, progressive)"
description: "Use when a React change should load vercel-labs react-best-practices (70 rules, progressive)."
---

# vercel-labs/agent-skills react-best-practices (70 rules, progressive)

## When
Use when writing or reviewing React/Next UI and the skill is installed.

## Stop
Progressive disclosure — do not dump all 70 rules into every turn. Do not deploy from this skill.

## Steps
1. Writing new React components or Next.js pages
2. Implementing data fetching (client or server-side)
3. Reviewing code for performance issues
4. Refactoring existing React/Next.js code
5. Optimizing bundle size or load times
6. `async-cheap-condition-before-await` — Check cheap sync conditions before awaiting flags or remote values
7. `async-defer-await` — Move await into branches where actually used
8. `async-parallel` — Use Promise.all() for independent operations

## Load
vercel-labs/agent-skills react-best-practices SKILL.md.