WEB DEVELOPMENT / Vercel
Vercel React Best Practices
Organizes React and Next.js performance reviews around request waterfalls, bundles, server work and rendering costs.
“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”
01 / THE REASONING
Why this made the selection.
- Pairs rules with incorrect and corrected code, making recommendations easier to inspect.
- Prioritizes serial data fetching and unnecessary imports before smaller JavaScript changes.
02 / THE REVIEW RECORD
What we actually inspected.
Source review has boundaries.
A clear record is more useful than a “safe” badge.
Material inspected
- skills/react-best-practices/SKILL.md
- skills/react-best-practices/rules/async-parallel.md
- skills/react-best-practices/rules/bundle-barrel-imports.md
- README.md
Our findings
- The parallel-fetch example applies only to operations without data dependencies.
- The barrel-import reference prefers framework import optimization where available and warns that deep paths may lack TypeScript declarations.
- The definition indexes focused rules and points to an expanded guide; it does not run a profiler.
Not established by this review
- Source inspection only; no skill installation or workflow execution was performed.
The review applies to the material and revision named here. A newer upstream release can change its behavior.
03 / PUT IT TO WORK
Add a skill to your workflow.
DOCUMENTED COMMAND
npx skills add https://github.com/vercel-labs/agent-skills/tree/063bee94c3f4df8453406c830b0a7df0f2860278/skills/react-best-practicesCopying does not execute this command. It may retrieve a newer version than the reviewed source.
- Install the complete skill directory with its references and helpers; a copied SKILL.md alone may be incomplete.
- Choose the intended agent and project scope in the installer, then review its permissions before using the skill.
Before you start
- Node.js/npm for this installer
- An agent that supports the Agent Skills format
- Project source, installed dependency versions and a way to measure the affected behavior
04 / FOLLOW THE EVIDENCE
The source trail.
Our notes are separate from the original resource.
Check upstream before adopting a new version.
https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/react-best-practices/SKILL.md
Supports: summary, upstreamDescription, whySelected, bestFor, limitations, review, compatibility, access
https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/react-best-practices/rules/async-parallel.md
Supports: review, limitations, access
https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/react-best-practices/rules/bundle-barrel-imports.md
Supports: review, limitations, access
https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/README.md
Supports: license
https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/README.md
Supports: install, compatibility, access
https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/README.md
Supports: install
https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/src/git.ts
Supports: install