# 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 optimization, or performance improvements.

- Skill: `dtsong/vercel-react-best-practices` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add dtsong/vercel-react-best-practices`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dtsong/vercel-react-best-practices/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: dtsong (https://skillmd.com/u/dtsong)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/dtsong/vercel-react-best-practices

---


# React Best Practices (Upstream)

This is a lightweight *stub skill* that fetches the latest React Best Practices guidance from Vercel's upstream repository at runtime.

It intentionally avoids vendoring the full rule set so updates can be adopted quickly and attribution stays clear.

## Upstream Sources

- Repository: https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices
- Announcement: https://vercel.com/blog/introducing-react-best-practices

## Guidelines Source

Fetch fresh guidance before each review:

```text
https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/AGENTS.md
```

## Process

1. Fetch the upstream `AGENTS.md`.
2. Use it as the authoritative rulebook for React/Next.js performance.
3. Apply relevant rules to the current code/task.

## Output Format

- Provide actionable recommendations.
- When possible, cite the upstream rule section heading (and/or a short identifier) so the change can be traced to the upstream guidance.

## Quality Checks

- Do not propose micro-optimizations if there are obvious waterfalls or bundle bloat issues.
- Prefer changes that are correct-by-construction (avoid flaky memoization patterns).
- Be explicit about trade-offs and when not to apply a rule.

## Offline Snapshot (Optional)

If you want an offline copy of the full rule set, install the upstream repo separately and link it into your Claude Code skills directory.

See `skills/vercel-react-best-practices/README.md` for an example.