Individual skill

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 code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

plugins/react-skills/skills/react-best-practices/SKILL.md

Read pinned source

Source commit 4f2b4bc9a74024397b4688cbafd1ae538a83a5fb

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: No
Observed behavior: Network or broad shell
Last checked: Nov 4, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 1,200
Repository last updated: Nov 6, 2026
License: Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

claude-code Repository topic
github Repository topic
commit-message Repository topic
pull-requests Repository topic
cursor Repository topic
gemini-cli Repository topic
codex Repository topic
codex-cli Repository topic
plugin Repository topic
ai-agents Repository topic
engineering Derived category
writing Derived category
data Derived category
engineering-web Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 7,251 bytes
rules/_sections.mddoc · 1,554 bytes
rules/_template.mddoc · 631 bytes
rules/advanced-effect-event-deps.mddoc · 1,802 bytes
rules/advanced-event-handler-refs.mddoc · 1,483 bytes
rules/advanced-init-once.mddoc · 958 bytes
rules/advanced-use-latest.mddoc · 1,072 bytes
rules/async-api-routes.mddoc · 1,125 bytes
rules/async-cheap-condition-before-await.mddoc · 1,220 bytes
rules/async-defer-await.mddoc · 2,208 bytes
rules/async-dependencies.mddoc · 1,293 bytes
rules/async-parallel.mddoc · 654 bytes
rules/async-suspense-boundaries.mddoc · 2,510 bytes
rules/bundle-analyzable-paths.mddoc · 2,382 bytes
rules/bundle-barrel-imports.mddoc · 2,795 bytes
rules/bundle-conditional.mddoc · 949 bytes
rules/bundle-defer-third-party.mddoc · 920 bytes
rules/bundle-dynamic-imports.mddoc · 791 bytes
rules/bundle-preload.mddoc · 1,149 bytes
rules/client-event-listeners.mddoc · 1,969 bytes
rules/client-localstorage-schema.mddoc · 1,950 bytes
rules/client-passive-event-listeners.mddoc · 1,644 bytes
rules/client-swr-dedup.mddoc · 1,159 bytes
rules/js-batch-dom-css.mddoc · 3,266 bytes
rules/js-cache-function-results.mddoc · 1,949 bytes
rules/js-cache-property-access.mddoc · 532 bytes
rules/js-cache-storage.mddoc · 1,651 bytes
rules/js-combine-iterations.mddoc · 753 bytes
rules/js-early-exit.mddoc · 1,133 bytes
rules/js-flatmap-filter.mddoc · 1,411 bytes
rules/js-hoist-regexp.mddoc · 1,028 bytes
rules/js-index-maps.mddoc · 837 bytes
rules/js-length-check-first.mddoc · 1,747 bytes
rules/js-min-max-loop.mddoc · 2,290 bytes
rules/js-request-idle-callback.mddoc · 2,647 bytes
rules/js-set-map-lookups.mddoc · 532 bytes
rules/js-tosorted-immutable.mddoc · 1,782 bytes
rules/rendering-activity.mddoc · 564 bytes
rules/rendering-animate-svg-wrapper.mddoc · 1,185 bytes
rules/rendering-conditional-render.mddoc · 980 bytes
rules/rendering-content-visibility.mddoc · 815 bytes
rules/rendering-hoist-jsx.mddoc · 1,039 bytes
rules/rendering-hydration-no-flicker.mddoc · 2,308 bytes
rules/rendering-hydration-suppress-warning.mddoc · 872 bytes
rules/rendering-resource-hints.mddoc · 2,549 bytes
rules/rendering-script-defer-async.mddoc · 1,868 bytes
rules/rendering-svg-precision.mddoc · 588 bytes
rules/rendering-usetransition-loading.mddoc · 2,074 bytes
rules/rerender-defer-reads.mddoc · 973 bytes
rules/rerender-dependencies.mddoc · 824 bytes
rules/rerender-derived-state-no-effect.mddoc · 1,201 bytes
rules/rerender-derived-state.mddoc · 728 bytes
rules/rerender-functional-setstate.mddoc · 2,968 bytes
rules/rerender-lazy-state-init.mddoc · 2,016 bytes
rules/rerender-memo-with-default-value.mddoc · 1,173 bytes
rules/rerender-memo.mddoc · 1,148 bytes
rules/rerender-move-effect-to-event.mddoc · 1,268 bytes
rules/rerender-no-inline-components.mddoc · 2,135 bytes
rules/rerender-simple-expression-in-memo.mddoc · 1,018 bytes
rules/rerender-split-combined-hooks.mddoc · 1,844 bytes
rules/rerender-transitions.mddoc · 1,055 bytes
rules/rerender-use-deferred-value.mddoc · 1,846 bytes
rules/rerender-use-ref-transient-values.mddoc · 1,742 bytes
rules/server-after-nonblocking.mddoc · 2,012 bytes
rules/server-auth-actions.mddoc · 2,649 bytes
rules/server-cache-lru.mddoc · 1,353 bytes
rules/server-cache-react.mddoc · 2,228 bytes
rules/server-dedup-props.mddoc · 2,060 bytes
rules/server-hoist-static-io.mddoc · 4,423 bytes
rules/server-no-shared-module-state.mddoc · 1,766 bytes
rules/server-parallel-fetching.mddoc · 1,554 bytes
rules/server-parallel-nested-fetching.mddoc · 992 bytes
rules/server-serialization.mddoc · 996 bytes

Read excerpt


# Vercel React Best Practices

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 70 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

## 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