--- title: "Vercel React Best Practices: review, setup & limitations · Undominated.ai" canonical: https://undominated.ai/skills/vercel-labs-react-best-practices/ description: "Organizes React and Next.js performance reviews around request waterfalls, bundles, server work and rendering costs." --- # Vercel React Best Practices: review, setup & limitations · Undominated.ai > Organizes React and Next.js performance reviews around request waterfalls, bundles, server work and rendering costs. [← Explore all skills](/skills/) WEB DEVELOPMENT / Vercel # Vercel React Best Practices Organizes React and Next.js performance reviews around request waterfalls, bundles, server work and rendering costs. See setup guidance ↓Original source ↗ SOURCE REVIEW Reviewed 2026-09-21 Evidence 7 linked sources Publisher Vercel Licence MIT (declared in upstream README) ↗ Revision 063bee94c3f4 Read what was—and wasn’t—checked ↓ “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” Vercel · upstream description ↗ Our analysis follows below. 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. ### A good fit for - Reviewing React or Next.js performance work - Investigating request waterfalls and oversized dependency imports ### Weigh up before choosing - Published impact labels and example speedups are not measurements of your application. - Deep imports and framework configuration depend on installed package versions and exported types; measure before refactoring. - The repository declares MIT in its README; this review did not locate a separate license grant file and offers no definition download. 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. Upstream setup instructions ↗ DOCUMENTED COMMAND npx skills add https://github.com/vercel-labs/agent-skills/tree/063bee94c3f4df8453406c830b0a7df0f2860278/skills/react-best-practices Copy command ↗ Copying 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 ### Compatibility Agent Skills-compatible agents · React and Next.js projects ### Read and edit frontend/server code - Read and edit frontend/server code - Run project checks or profiling when authorized ### Cost model MIT is declared upstream; the instructions add no hosted service, while agent and development tooling costs remain separate. 04 / FOLLOW THE EVIDENCE ## The source trail. Our notes are separate from the original resource. Check upstream before adopting a new version. - Skill definition at reviewed revision ↗ Checked 2026-09-21 https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/react-best-practices/SKILL.md Supports: summary, upstreamDescription, whySelected, bestFor, limitations, review, compatibility, access - Reviewed reference or helper: rules/async-parallel.md ↗ Checked 2026-09-21 https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/react-best-practices/rules/async-parallel.md Supports: review, limitations, access - Reviewed reference or helper: rules/bundle-barrel-imports.md ↗ Checked 2026-09-21 https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/react-best-practices/rules/bundle-barrel-imports.md Supports: review, limitations, access - Upstream license or licensing declaration ↗ Checked 2026-09-21 https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/README.md Supports: license - Publisher installation and project documentation ↗ Checked 2026-09-21 https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/README.md Supports: install, compatibility, access - Skills installer source formats and selective installation ↗ Checked 2026-09-21 https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/README.md Supports: install - Installer implementation: full commit SHA fallback ↗ Checked 2026-09-21 https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/src/git.ts Supports: install KEEP COMPARING ## Other approaches to consider. Related by category or shared topics. These are alternatives to inspect, not a measured quality order. [### Vercel React Composition Patterns ↗ Replaces growing boolean-mode APIs with explicit component composition and provider-owned state contracts.](/skills/vercel-labs-composition-patterns/)[### Matt Pocock Codebase Design ↗ Evaluates module boundaries through caller complexity, dependency seams and alternative interface designs.](/skills/mattpocock-codebase-design/)[### Remotion Video Workflows ↗ Routes video work to focused Remotion guides for creation, preview, rendering, media and reusable video applications.](/skills/remotion-remotion-best-practices/) [AI Tools ↗](/tools/)[Skills ↗](/skills/)[Agents ↗](/agents/)[MCP Servers ↗](/mcp-servers/)