Localized reading guide
vercel-react-best-practicesPurpose, usage and source
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.
Source retrieved:
- Source repository
- vercel-labs/open-agents
- SKILL.md
.agents/skills/vercel-react-best-practices/SKILL.md- Repository stars
- 5,871
- Repository updated
- 2026-08-29
- Categories
- Agent workflows
- Last collected
License: MIT
Workflow excerpts are reading aids, not executable instructions from Codez. No third-party Skill was run to produce this page.
The purpose and workflow passages below are upstream material, organized and translated for reading. They are distinct from the separately labeled Codez editorial analysis.
What this Skill does
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.
How the upstream workflow works
How to Use
Read individual rule files for detailed explanations and code examples: Each rule file contains: Brief explanation of why it matters Incorrect code example with explanation
Upstream passage · L120 ↗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
Upstream passage · L14 ↗Vercel React Best Practices
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 58 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
Upstream passage · L10 ↗rules/async-parallel.md
rules/bundle-barrel-imports.mdRequirements and setup
No short requirements passage was selected from this file. This does not mean the Skill has no dependencies. Check the repository setup instructions and referenced files.
Limits and quality checks
No separate limits passage was selected from this file. This does not mean the Skill is safe for every input or environment. Review the complete source and validate your own result.
Start with a safe trial
- Check the supported host and the repository installation instructions. Keep the Skill directory and its referenced scripts, assets and documentation together; SKILL.md alone may omit dependencies.
- Give the agent your real input, desired output and acceptance criteria. Invocation syntax and available tools depend on the host; this site does not assume a universal install command.
- Try the source workflow in a disposable project or on a copy. Review operations that change files, remote services or billable resources before allowing them.
- Validate the output against the source quality checks and your own requirements. A successful trigger or a high repository Star count does not establish a correct result.
Read further in the source
- Vercel React Best Practices
- When to Apply
- 1. Eliminating Waterfalls (CRITICAL)
- 2. Bundle Size Optimization (CRITICAL)
- 3. Server-Side Performance (HIGH)
- 4. Client-Side Data Fetching (MEDIUM-HIGH)
- 5. Re-render Optimization (MEDIUM)
- 6. Rendering Performance (MEDIUM)
- 7. JavaScript Performance (LOW-MEDIUM)
- 8. Advanced Patterns (LOW)
- How to Use
- Full Compiled Document
Related Skills
Translation and scope
This reading guide selects passages from the pinned upstream SKILL.md. Translation is assisted. It is not a complete manual or a claim of tested compatibility. Read the original and its referenced files before use.
This introduction refers to the pinned version below; current repository activity and collection time are shown separately.
- Pinned source
- Read the original ↗
- Source retrieved
- Source commit
cf865e94de7729751c747171785b6ce57e7b178c- Source SHA-256
b0bc1161fa20c5d2154099b7db2a46e9937b51d8f3f88f57ea1a06e76af0d474