Vercel React Best Practices

A skills.sh skill from vercel-labs/agent-skills that packages React and Next.js performance rules for agents. Use it when writing or reviewing React/Next code, especially when performance, waterfalls, bundle size, hydration, or rerenders matter.

What it covers

The skill is a procedural checklist for agent-authored React/Next work. The source package describes the same durable categories that the skills.sh page summarizes: data-fetching waterfalls, bundle optimization, React.cache() deduplication, serialization minimization, client rerender control, CSS/rendering performance, hydration behavior, DOM batching, and O(1) data structures. Treat registry rule counts as a moving packaging detail; route by category and source commit instead. Source: skills.sh, 2026-06-30; vercel-labs/agent-skills commit f8a72b9603728bb92a217a879b7e62e43ad76c81, checked 2026-07-06

Kevin's stack should treat it as an upstream performance reviewer, not as a replacement for local taste or product judgment. Run it when code is React/Next-shaped, then still verify in browser, check Core Web Vitals where relevant, and apply Frontend and Design Skills / Frontend and Design Skills for visual and interaction quality.

Guillermo Rauch's 2026-06-23 reply clarifies the operating posture: ask the agent to follow the recommendations skill, but keep attention on the product rather than the tooling. The skill is useful because it translates production React/Next performance lessons into agent behavior; it is not a badge the agent mentions to sound sophisticated. Source: X/@rauchg, 2026-06-23

Routing

Use this skill when:

• building React components or Next.js pages
• reviewing agent-authored React for performance regressions
• optimizing data fetching, streaming, caching, or hydration
• explaining why a UI feels slow
• doing a post-implementation polish pass after the feature works

Do not load it for generic TypeScript, backend APIs, non-React UI, or visual taste work that has no React performance surface.

Why it belongs in the brain

The 2026-06-21 Vercel performance bookmark connects three things that are easy to separate incorrectly: the public Vercel site, the agent infrastructure product story, and skills as the mechanism for publishing lessons learned back to agents. Guillermo Rauch said the team optimized painting, layout, WebGPU shaders, blocking scripts, and every frame, then pointed users to this skill for more help. That makes the skill a feedback channel from production performance work into agent execution. Source: X/@rauchg, 2026-06-21

Versioning

Checked 2026-07-01 on skills.sh: the page lists roughly 517.5K installs/activity for vercel-labs/agent-skills/vercel-react-best-practices, 28.6K GitHub stars for vercel-labs/agent-skills, and passing Gen Agent Trust Hub, Socket, and Snyk checks. The repository HEAD resolved to f8a72b9603728bb92a217a879b7e62e43ad76c81. Because skills can update independently of this wiki, the agent must still check npx skills check / skills.sh before assuming the local copy is current. Source: skills.sh + GitHub vercel-labs/agent-skills, 2026-07-01

---

Timeline

• 2026-07-01 | Deep-reviewed the 2026-06-23 Rauch recommendation-skill bookmark and refreshed the skills.sh snapshot to ~517.5K installs/activity, 28.6K repo stars, and repository HEAD f8a72b9603728bb92a217a879b7e62e43ad76c81. Source: X/@rauchg, 2026-06-23; skills.sh + GitHub, 2026-07-01
• 2026-07-06 | Reread the current Vercel Labs source and updated this page to avoid depending on a brittle exact rule count; the durable local route is the category set plus the f8a72b9 source snapshot. Source: GitHub vercel-labs/agent-skills, 2026-07-06
• 2026-06-30 | Created during the one-by-one X bookmark artifact review after the 2026-06-21 Vercel performance tweet directly routed users to the skill. Source: X/@rauchg, 2026-06-21; skills.sh, 2026-06-30