react-best-practicescommit dc8367e · v1.0.0SKILL.md · Code Standards
Vercel React Best Practices
Vercel's React and Next.js performance guide: 70 rules in 8 categories, ordered by impact, for writing and refactoring code.
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practicesCommand selected. Copy it manually.
- Permissions
- read-repo
- write-files
- shell
- network
- Compatible with
- Any SKILL.md agent
- GitHub
- 33.3k
- Source
- Official · Vercel Labs
- Status
- Scan passed
- License
- MIT
- Category
- Code Standards
Core rule
Apply rules in order of impact, starting with the two CRITICAL categories: eliminating waterfalls and reducing bundle size.
Execution Phases
Phase 01Eliminate waterfalls
Run independent work with Promise.all, move await into the branches that need it, and stream with Suspense.
Phase 02Shrink the bundle
Import directly instead of via barrel files, load heavy components with next/dynamic, and defer third-party scripts until after hydration.
Phase 03Server and data fetching
Deduplicate with React.cache() and LRU caches, minimise data sent to client components, and use SWR for client-side deduplication.
Phase 04Rendering and JS tuning
Cut unnecessary re-renders, tune rendering and JavaScript hot paths, and consider advanced patterns last.
Phase 05Read 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)
---
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"
---