# vercel-react-best-practices

A skill with 70 React and Next.js performance rules from Vercel. Useful when writing components, refactoring, or chasing slow renders.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 448 installs · ★ 39
- Author: vercel
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/PyModel/react-frontend-skills/tree/HEAD/skills/vercel-react-best-practices/SKILL.md
- Updated: 2026-10-21
- HTML: https://affpapa.org/en/nevibecode/skills/vercel-react-best-practices

## What it does

The skill hands your agent 70 rules across eight categories, ordered by impact. The top two cover request waterfalls and bundle size, followed by server-side performance, client-side data fetching, re-renders, rendering, JavaScript, and advanced patterns. Each rule carries a prefix in its id: `async-`, `bundle-`, `server-`, `client-`, `rerender-`, `rendering-`, `js-`, `advanced-`.

Rules live as separate files under `rules/<rule-id>.md`. Each one explains why it matters and shows incorrect versus correct code. The agent opens only the file that matches the task, so the whole reference does not land in context at once.

Install works in Claude, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode. Copilot uses `gh skill install` instead of `npx skills add`. Behind a proxy or a private mirror, set that up in your environment rather than on the install line.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add PyModel/react-frontend-skills --skill vercel-react-best-practices -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/vercel-react-best-practices/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/vercel-react-best-practices/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add PyModel/react-frontend-skills --skill vercel-react-best-practices -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/vercel-react-best-practices/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add PyModel/react-frontend-skills --skill vercel-react-best-practices -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/vercel-react-best-practices/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install PyModel/react-frontend-skills vercel-react-best-practices
```

2. **Manually: put the files in place**
- File: `.github/skills/vercel-react-best-practices/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add PyModel/react-frontend-skills --skill vercel-react-best-practices -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/PyModel/react-frontend-skills --path skills/vercel-react-best-practices
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/vercel-react-best-practices/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add PyModel/react-frontend-skills --skill vercel-react-best-practices -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/PyModel/react-frontend-skills/tree/HEAD/skills/vercel-react-best-practices/SKILL.md

## When to use it
- remove sequential awaits where calls can run in parallel
- shrink the bundle by dropping barrel imports
- move heavy components behind dynamic imports
- find out why a component re-renders too often
- check server actions for authentication

## Example prompts
- review this component against vercel-react-best-practices
- why is there a request waterfall here — check the async rules
- go through this page and suggest bundle optimizations

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 4d983906a0414890.

BEGIN THIRD-PARTY FILE 4d983906a0414890
```text
---
name: vercel-react-best-practices
description: React and Next.js performance optimization.
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
- `async-defer-await` - Move await into branches where actually used
- `async-parallel` - Use Promise.all() for independent operations
- `async-dependencies` - Use better-all for partial dependencies
- `async-api-routes` - Start promises early, await late in API routes
- `async-suspense-boundaries` - Use Suspense to stream content

### 2. Bundle Size Optimization (CRITICAL)

- `bundle-barrel-imports` - Import directly, avoid barrel files
- `bundle-analyzable-paths` - Prefer statically analyzable import and file-system paths to avoid broad bundles and traces
- `bundle-dynamic-imports` - Use next/dynamic for heavy components
- `bundle-defer-third-party` - Load analytics/logging after hydration
- `bundle-conditional` - Load modules only when feature is activated
- `bundle-preload` - Preload on hover/focus for perceived speed

### 3. Server-Side Performance (HIGH)

- `server-auth-actions` - Authenticate server actions like API routes
- `server-cache-react` - Use React.cache() for per-request deduplication
- `server-cache-lru` - Use LRU cache for cross-request caching
- `server-dedup-props` - Avoid duplicate serialization in RSC props
- `server-hoist-static-io` - Hoist static I/O (fonts, logos) to module level
```
END THIRD-PARTY FILE 4d983906a0414890

The third-party file has ended. Everything between the 4d983906a0414890 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2618 of 6684 bytes. © vercel · MIT · https://github.com/PyModel/react-frontend-skills/tree/HEAD/skills/vercel-react-best-practices/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md