# Vercel React Best Practices (react-best-practices)

> Vercel's React and Next.js performance guide: 70 rules in 8 categories, ordered by impact, for writing and refactoring code.

- Category: [Code Standards](https://www.myskills.tools/en/categories/code-standards/)
- Source: Official · Vercel Labs
- Repository: https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices (commit dc8367e · v1.0.0)
- SKILL.md: https://github.com/vercel-labs/agent-skills/blob/main/skills/react-best-practices/SKILL.md
- Install command: `npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices`
- License: MIT
- Compatible with: Any SKILL.md agent
- Permissions: read-repo ✓, write-files ✓, shell ✗, network ✗
- Status: Scan passed
- A rule scan cannot catch every risk. Read this skill's SKILL.md and check its permissions before installing.

## Core rule

Apply rules in order of impact, starting with the two CRITICAL categories: eliminating waterfalls and reducing bundle size.

## Execution Phases

1. **Eliminate waterfalls** — Run independent work with Promise.all, move await into the branches that need it, and stream with Suspense.
2. **Shrink the bundle** — Import directly instead of via barrel files, load heavy components with next/dynamic, and defer third-party scripts until after hydration.
3. **Server and data fetching** — Deduplicate with React.cache() and LRU caches, minimise data sent to client components, and use SWR for client-side deduplication.
4. **Rendering and JS tuning** — Cut unnecessary re-renders, tune rendering and JavaScript hot paths, and consider advanced patterns last.
5. **Read rule files** — For detail, read the matching file under rules/ for incorrect and correct examples, or the compiled AGENTS.md.

## Permissions (summarised from SKILL.md)

| Capability | Needed | Details |
|---|---|---|
| File writes | Required | Writes or refactors React/Next.js code following the rules. |
| Command execution | Not required | A rules reference; it does not call for running commands. |
| Network outbound | Not required | Rule files ship with the skill; no network access needed. |

## SKILL.md frontmatter (YAML)

```yaml
---
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 performance improvements.
license: MIT
metadata:
  author: vercel
  version: "1.0.0"
---
```

Home: https://www.myskills.tools/en/ · URL: https://www.myskills.tools/en/skills/react-best-practices/