Vercel React Best Practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…
Install
Quick install
npx skills add https://github.com/vercel-labs/cursor-plugin/tree/HEAD/skills/vercel-react-best-practicesnpx skills add vercel-labs/cursor-plugin --skill vercel-react-best-practices --agent claude-codenpx skills add vercel-labs/cursor-plugin --skill vercel-react-best-practices --agent cursornpx skills add vercel-labs/cursor-plugin --skill vercel-react-best-practices --agent codexnpx skills add vercel-labs/cursor-plugin --skill vercel-react-best-practices --agent opencodenpx skills add vercel-labs/cursor-plugin --skill vercel-react-best-practices --agent github-copilotnpx skills add vercel-labs/cursor-plugin --skill vercel-react-best-practices --agent windsurfMore install options
Shorthand — useful for multi-skill repos:
npx skills add vercel-labs/cursor-plugin --skill vercel-react-best-practicesManual — clone the repo and drop the folder into your agent's skills directory:
git clone https://github.com/vercel-labs/cursor-plugin.gitcp -r cursor-plugin/skills/vercel-react-best-practices ~/.claude/skills/vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…
vercel-react-best-practicesby vercel
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…npx skills add https://github.com/vercel-labs/cursor-plugin --skill vercel-react-best-practicesDownload ZIPGitHub
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
PriorityCategoryImpactPrefix1Eliminating WaterfallsCRITICALasync-2Bundle Size OptimizationCRITICALbundle-3Server-Side PerformanceHIGHserver-4Client-Side Data FetchingMEDIUM-HIGHclient-5Re-render OptimizationMEDIUMrerender-6Rendering PerformanceMEDIUMrendering-7JavaScript PerformanceLOW-MEDIUMjs-8Advanced PatternsLOWadvanced-
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— Subscribe to derived booleans, not raw values
rerender-derived-state-no-effect— Derive state during render, not effects
rerender-functional-setstate— Use functional setState for stable callbacks
rerender-lazy-state-init— Pass function to useState for expensive values
rerender-simple-expression-in-memo— Avoid memo for simple primitives
rerender-move-effect-to-event— Put interaction logic in event handlers
rerender-transitions— Use startTransition for non-urgent updates
rerender-use-ref-transient-values— Use refs for transient frequent values
6. Rendering Performance (MEDIUM)
rendering-animate-svg-wrapper— Animate div wrapper, not SVG element
rendering-content-visibility— Use content-visibility for long lists
rendering-hoist-jsx— Extract static JSX outside components
rendering-svg-precision— Reduce SVG coordinate precision
rendering-hydration-no-flicker— Use inline script for client-only data
rendering-hydration-suppress-warning— Suppress expected mismatches
rendering-activity— Use Activity component for show/hide
rendering-conditional-render— Use ternary, not && for conditionals
rendering-usetransition-loading— Prefer useTransition for loading state
7. JavaScript Performance (LOW-MEDIUM)
js-batch-dom-css— Group CSS changes via classes or cssText
js-index-maps— Build Map for repeated lookups
js-cache-property-access— Cache object properties in loops
js-cache-function-results— Cache function results in module-level Map
js-cache-storage— Cache localStorage/sessionStorage reads
js-combine-iterations— Combine multiple filter/map into one loop
js-length-check-first— Check array length before expensive comparison
js-early-exit— Return early from functions
js-hoist-regexp— Hoist RegExp creation outside loops
js-min-max-loop— Use loop for min/max instead of sort
js-set-map-lookups— Use Set/Map for O(1) lookups
js-tosorted-immutable— Use toSorted() for immutability
8. Advanced Patterns (LOW)
advanced-event-handler-refs— Store event handlers in refs
advanced-init-once— Initialize app once per app load
advanced-use-latest— useLatest for stable callback refs
How to Use
When a user asks about React/Next.js performance, or when writing/reviewing React code:
- Identify the relevant category from the priority table above
- Fetch the specific rule from GitHub for detailed guidance:
`https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/{rule-name}.md
`- Or fetch the full guide for comprehensive review:
`https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/AGENTS.md
`- Apply the rule's correct pattern, explaining why it matters
Each rule file contains:
- Brief explanation of why it matters
- Incorrect code example with explanation
- Correct code example with explanation
- Additional context and references
Source
Maintained by Vercel Engineering at github.com/vercel-labs/agent-skills.
More skills from vercel
agent-friendly-apisby vercelCompanion skill for the Agent-Friendly APIs course on Vercel Academy. Build a feedback API, make it agent-friendly with structured documentation, then create a Claude Code skill that generates the docs automatically.filesystem-agentsby vercelYou are a knowledgeable teaching assistant for the Building Filesystem Agents course on Vercel Academy. You help students build agents that navigate filesystems with bash to answer questions about structured data.add-provider-packageby vercelGuide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk/<provider> package to integrate an AI service into the SDK.csvby vercelAnalyze and transform CSV data using bash toolsaiby vercelPythonai module — models, agents, hooks, middleware, MCP, structured outputcron-jobsby vercelVercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json.frontend-designby vercelCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…vercel-react-best-practicesby vercelReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…
---
Source: https://github.com/vercel-labs/cursor-plugin/tree/HEAD/skills/vercel-react-best-practices
Author: vercel
Discovered via: mcpservers.org
SKILL.md source
---
name: vercel-react-best-practices
description: React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…
---
# vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…
# vercel-react-best-practicesby vercel
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…
`npx skills add https://github.com/vercel-labs/cursor-plugin --skill vercel-react-best-practices`Download ZIPGitHub
## 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
PriorityCategoryImpactPrefix1Eliminating WaterfallsCRITICAL`async-`2Bundle Size OptimizationCRITICAL`bundle-`3Server-Side PerformanceHIGH`server-`4Client-Side Data FetchingMEDIUM-HIGH`client-`5Re-render OptimizationMEDIUM`rerender-`6Rendering PerformanceMEDIUM`rendering-`7JavaScript PerformanceLOW-MEDIUM`js-`8Advanced PatternsLOW`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` — Subscribe to derived booleans, not raw values
* `rerender-derived-state-no-effect` — Derive state during render, not effects
* `rerender-functional-setstate` — Use functional setState for stable callbacks
* `rerender-lazy-state-init` — Pass function to useState for expensive values
* `rerender-simple-expression-in-memo` — Avoid memo for simple primitives
* `rerender-move-effect-to-event` — Put interaction logic in event handlers
* `rerender-transitions` — Use startTransition for non-urgent updates
* `rerender-use-ref-transient-values` — Use refs for transient frequent values
### 6. Rendering Performance (MEDIUM)
* `rendering-animate-svg-wrapper` — Animate div wrapper, not SVG element
* `rendering-content-visibility` — Use content-visibility for long lists
* `rendering-hoist-jsx` — Extract static JSX outside components
* `rendering-svg-precision` — Reduce SVG coordinate precision
* `rendering-hydration-no-flicker` — Use inline script for client-only data
* `rendering-hydration-suppress-warning` — Suppress expected mismatches
* `rendering-activity` — Use Activity component for show/hide
* `rendering-conditional-render` — Use ternary, not && for conditionals
* `rendering-usetransition-loading` — Prefer useTransition for loading state
### 7. JavaScript Performance (LOW-MEDIUM)
* `js-batch-dom-css` — Group CSS changes via classes or cssText
* `js-index-maps` — Build Map for repeated lookups
* `js-cache-property-access` — Cache object properties in loops
* `js-cache-function-results` — Cache function results in module-level Map
* `js-cache-storage` — Cache localStorage/sessionStorage reads
* `js-combine-iterations` — Combine multiple filter/map into one loop
* `js-length-check-first` — Check array length before expensive comparison
* `js-early-exit` — Return early from functions
* `js-hoist-regexp` — Hoist RegExp creation outside loops
* `js-min-max-loop` — Use loop for min/max instead of sort
* `js-set-map-lookups` — Use Set/Map for O(1) lookups
* `js-tosorted-immutable` — Use toSorted() for immutability
### 8. Advanced Patterns (LOW)
* `advanced-event-handler-refs` — Store event handlers in refs
* `advanced-init-once` — Initialize app once per app load
* `advanced-use-latest` — useLatest for stable callback refs
## How to Use
When a user asks about React/Next.js performance, or when writing/reviewing React code:
* Identify the relevant category from the priority table above
* Fetch the specific rule from GitHub for detailed guidance:
```
`https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/{rule-name}.md
`
```
* Or fetch the full guide for comprehensive review:
```
`https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/AGENTS.md
`
```
* Apply the rule's correct pattern, explaining why it matters
Each rule file contains:
* Brief explanation of why it matters
* Incorrect code example with explanation
* Correct code example with explanation
* Additional context and references
## Source
Maintained by Vercel Engineering at github.com/vercel-labs/agent-skills.
## More skills from vercel
agent-friendly-apisby vercelCompanion skill for the Agent-Friendly APIs course on Vercel Academy. Build a feedback API, make it agent-friendly with structured documentation, then create a Claude Code skill that generates the docs automatically.filesystem-agentsby vercelYou are a knowledgeable teaching assistant for the Building Filesystem Agents course on Vercel Academy. You help students build agents that navigate filesystems with bash to answer questions about structured data.add-provider-packageby vercelGuide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk/<provider> package to integrate an AI service into the SDK.csvby vercelAnalyze and transform CSV data using bash toolsaiby vercelPython `ai` module — models, agents, hooks, middleware, MCP, structured outputcron-jobsby vercelVercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json.frontend-designby vercelCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…vercel-react-best-practicesby vercelReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…
---
**Source**: https://github.com/vercel-labs/cursor-plugin/tree/HEAD/skills/vercel-react-best-practices
**Author**: vercel
**Discovered via**: mcpservers.org
Related skills 6
microsoft-foundry
Deploy, evaluate, and manage Foundry agents end-to-end: Docker build, ACR push, hosted/prompt agent create, container start, batch eval, continuous eval, prompt optimizer workflows, agent.yaml, dataset curation from traces. USE FOR: deploy agent to Foundry, hosted agent, create agent, invoke agent, evaluate agent, run batch eval, continuous eval, continuous monitoring, continuous eval status, optimize prompt, improve prompt, prompt optimizer, optimize agent instructions, improve agent instruc...
azure-ai
Use for Azure AI: Search, Speech, OpenAI, Document Intelligence. Helps with search, vector/hybrid search, speech-to-text, text-to-speech, transcription, OCR. WHEN: AI Search, query search, vector search, hybrid search, semantic search, speech-to-text, text-to-speech, transcribe, OCR, convert text to speech.
azure-deploy
Execute Azure deployments for ALREADY-PREPARED applications that have existing .azure/deployment-plan.md and infrastructure files. DO NOT use this skill when the user asks to CREATE a new application — use azure-prepare instead. This skill runs azd up, azd deploy, terraform apply, and az deployment commands with built-in error recovery. Requires .azure/deployment-plan.md from azure-prepare and validated status from azure-validate. WHEN: "run azd up", "run azd deploy", "execute deployment", "p...
azure-diagnostics
Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe triage. WHEN: debug production issues, troubleshoot app service, app service high CPU, app service deployment failure, troubleshoot container apps, troubleshoot functions, troubleshoot AKS, kubectl cannot connect, kube-system/CoreDNS failures, pod pending, crashloop, node not ready, upgrade failures, analyze logs, KQL, insights, image pull failures, cold start issues, health probe failures, resource...
azure-resource-lookup
List, find, and show Azure resources across subscriptions or resource groups. Handles prompts like "list the websites in my subscription", "list my web apps", "show my app services", "list virtual machines", "list my VMs", "show storage accounts", "find container apps", and "what resources do I have". USE FOR: list websites, list web apps, list app services, show websites in subscription, resource inventory, find resources by tag, tag analysis, orphaned resource discovery (not for cost analys...
azure-resource-visualizer
Analyze Azure resource groups and generate detailed Mermaid architecture diagrams showing the relationships between individual resources. WHEN: create architecture diagram, visualize Azure resources, show resource relationships, generate Mermaid diagram, analyze resource group, diagram my resources, architecture visualization, resource topology, map Azure infrastructure.