Vercel React Best Practices
Apply Vercel Engineering’s prioritized React and Next.js performance rules when writing, reviewing, or refactoring UI code.
Overview
vercel-react-best-practices is an agent skill most often used in Ship (also Build) that applies 57 Vercel-ranked React/Next.js performance rules during writing, review, and refactoring.
Install
npx skills add https://github.com/vercel-labs/cursor-plugin --skill vercel-react-best-practicesWhat is this skill?
- 57 performance rules organized into 8 impact-prioritized categories
- Triggers on React components, Next.js pages, data fetching, and bundle work
- Full ~80KB AGENTS.md guide fetched from vercel-labs/agent-skills on demand
- Per-rule deep dives via individual rules/{rule-name}.md URLs
- Intended for automated refactoring and codegen aligned with Vercel Engineering defaults
- 57 rules across 8 categories
- Full guide document approximately 80KB at AGENTS.md URL
Adoption & trust: 61 installs on skills.sh; 9 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your React or Next.js app feels slow or bloated and ad-hoc optimization chat misses the fixes Vercel engineers prioritize first.
Who is it for?
Indie SaaS and content sites on Next.js who want agent-driven refactors grounded in Vercel’s maintained rule set.
Skip if: Non-React stacks, backend-only services, or teams that will not let the agent fetch the upstream rules document over the network.
When should I use this skill?
Writing, reviewing, or refactoring React/Next.js code involving components, pages, data fetching, bundle optimization, or performance improvements.
What do I get? / Deliverables
Components and pages follow impact-ordered performance patterns with fetchable rule-level examples so bundle size, rendering, and data-loading improve before you ship.
- Refactored components/pages aligned to Vercel rules
- Review notes mapped to rule categories by impact
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Performance optimization and bundle discipline land in Ship once features exist and load-time regressions block release confidence. perf is the canonical shelf because the skill’s 57 rules target data fetching, bundles, and render cost—not greenfield product discovery.
Where it fits
Generate a new dashboard route with server-first data fetching patterns from the ranked rule list.
Run an agent pass to trim client JavaScript and fix waterfall fetches before a marketing launch.
Compare a PR’s component tree against individual rules/*.md examples fetched from the repo.
Improve LCP-sensitive hero sections so landing pages score better for organic and AI-search snippets.
How it compares
Structured performance rule pack with remote AGENTS.md depth—not a generic ESLint config or a one-off blog checklist.
Common Questions / FAQ
Who is vercel-react-best-practices for?
Solo builders and small teams using React or Next.js who want Cursor or Claude agents to follow Vercel Engineering performance conventions.
When should I use vercel-react-best-practices?
In Build while authoring components and routes, and in Ship during performance review, bundle optimization, and pre-launch refactors of existing Next.js code.
Is vercel-react-best-practices safe to install?
Check the Security Audits panel on this Prism page; the skill expects network fetch to GitHub raw URLs—review that behavior before enabling in locked-down environments.
SKILL.md
READMESKILL.md - Vercel React Best Practices
# Vercel React Best Practices Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel Engineering. Contains 57 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation. ## Loading the Full Guide The complete rules document with all code examples is maintained at: ``` https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/AGENTS.md ``` **When you need detailed rule guidance**, fetch the full document from the URL above using your web fetch tool. The document is ~80KB and contains all 57 rules with incorrect/correct code examples. For individual rules, fetch: ``` https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/{rule-name}.md ``` ## 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 - Refactoring existing React/Next.js code - Optimizing bundle size or load times ## Rule Categories by Priority | Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | Eliminating Waterfalls | CRITICAL | `async-` | | 2 | Bundle Size Optimization | CRITICAL | `bundle-` | | 3 | Server-Side Performance | HIGH | `server-` | | 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` | | 5 | Re-render Optimization | MEDIUM | `rerender-` | | 6 | Rendering Performance | MEDIUM | `rendering-` | | 7 | JavaScript Performance | LOW-MEDIUM | `js-` | | 8 | Advanced Patterns | LOW | `advanced-` | ## Quick Reference ### 1. Eliminating Waterfalls (CRITICAL) - `async-defer-await` — Move await into branches where actually used - `async-parallel` — Use Promise.all() for independent operations - `async-dependencies` — Use better-all for partial dependencies - `async-api-routes` — Start promises early, await late in API routes - `async-suspense-boundaries` — Use Suspense to stream content ### 2. Bundle Size Optimization (CRITICAL) - `bundle-barrel-imports` — Import directly, avoid barrel files - `bundle-dynamic-imports` — Use next/dynamic for heavy components - `bundle-defer-third-party` — Load analytics/logging after hydration - `bundle-conditional` — Load modules only when feature is activated - `bundle-preload` — Preload on hover/focus for perceived speed ### 3. Server-Side Performance (HIGH) - `server-auth-actions` — Authenticate server actions like API routes - `server-cache-react` — Use React.cache() for per-request deduplication - `server-cache-lru` — Use LRU cache for cross-request caching - `server-dedup-props` — Avoid duplicate serialization in RSC props - `server-serialization` — Minimize data passed to client components - `server-parallel-fetching` — Restructure components to parallelize fetches - `server-after-nonblocking` — Use after() for non-blocking operations ### 4. Client-Side Data Fetching (MEDIUM-HIGH) - `client-swr-dedup` — Use SWR for automatic request deduplication - `client-event-listeners` — Deduplicate global event listeners - `client-passive-event-listeners` — Use passive listeners for scroll - `client-localstorage-schema` — Version and minimize localStorage data ### 5. Re-render Optimization (MEDIUM) - `rerender-defer-reads` — Don't subscribe to state only used in callbacks - `rerender-memo` — Extract expensive work into memoized components - `rerender-memo-with-default-value` — Hoist default non-primitive props - `rerender-dependencies` — Use primitive dependencies in effects - `rerender-derived-state` —