Questions? hello@viberation.devGet supportBlogDocsChangelog

Colour mode

XGitHub
Get started

React Best Practices

Skills#frontend

Vercel's React and Next.js performance rules for your agent.

Performance guidelines from Vercel Engineering that your agent applies while writing, reviewing or refactoring React and Next.js code: components, pages, data fetching and bundle size.

Install this skill

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices

Runs the open-source skills CLI in your own terminal. It asks which agents to add the skill to. Read what it tells your agent to do before you install it.

Download skill (.zip)

Install for your agent

  • Claude Code

    Run this in your project

    npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices -a claude-code

    Add -g to install it for every project instead.

    Or ask Claude Code to do it

    Install the "vercel-react-best-practices" skill from https://github.com/vercel-labs/agent-skills for Claude Code.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .claude/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .claude/skills/ for this project, or ~/.claude/skills/ for all your projects.

    Picked up in the current session, no restart needed.

    Claude Code skills docs
  • Claude.ai

    Upload the ZIP

    1. In Settings > Capabilities, turn on Code execution and file creation.
    2. Go to Customize > Skills, press +, then Create skill.
    3. Choose Upload a skill and pick the ZIP you downloaded.

    Free, Pro and Max plans. On Team and Enterprise, an owner turns skills on in Organization settings first.

    Claude.ai skills docs
  • ChatGPT

    Upload the ZIP

    1. Open Skills in ChatGPT and select Create.
    2. Select Upload from your computer and pick the ZIP you downloaded.
    3. Wait for ChatGPT's safety scan. A skill marked Needs Review asks you to check it before use.

    Skills that rely on scripts or a terminal may not work unchanged in ChatGPT.

    ChatGPT skills docs
  • Codex

    Run this in your project

    npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices -a codex

    Add -g to install it for every project instead.

    Or ask Codex to do it

    Install the "vercel-react-best-practices" skill from https://github.com/vercel-labs/agent-skills for Codex.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .agents/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .agents/skills/ for this project, or ~/.agents/skills/ for all your projects.

    Restart Codex if the skill does not show up.

    Codex skills docs
  • Cursor

    Run this in your project

    npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices -a cursor

    Add -g to install it for every project instead.

    Or ask Cursor to do it

    Install the "vercel-react-best-practices" skill from https://github.com/vercel-labs/agent-skills for Cursor.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .cursor/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .cursor/skills/ for this project, or ~/.cursor/skills/ for all your projects.

    Run it by typing / and the skill name in chat.

    Cursor skills docs
  • GitHub Copilot

    Run this in your project

    npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices -a github-copilot

    Add -g to install it for every project instead.

    Or ask GitHub Copilot to do it

    Install the "vercel-react-best-practices" skill from https://github.com/vercel-labs/agent-skills for GitHub Copilot.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .github/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .github/skills/ for this project, or ~/.copilot/skills/ for all your projects.

    Works in Copilot CLI, the cloud agent and agent mode in VS Code and JetBrains.

    GitHub Copilot skills docs
  • Antigravity

    Run this in your project

    npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices -a antigravity

    Add -g to install it for every project instead.

    Or ask Antigravity to do it

    Install the "vercel-react-best-practices" skill from https://github.com/vercel-labs/agent-skills for Antigravity.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .agents/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .agents/skills/ for this project, or ~/.gemini/config/skills/ for all your projects.

    Antigravity skills docs
  • Gemini CLI

    Run this in your project

    npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices -a gemini-cli

    Add -g to install it for every project instead.

    Or ask Gemini CLI to do it

    Install the "vercel-react-best-practices" skill from https://github.com/vercel-labs/agent-skills for Gemini CLI.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .gemini/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .gemini/skills/ for this project, or ~/.gemini/skills/ for all your projects.

    Run /skills to check it was found.

    Gemini CLI skills docs
Installs
710.2K via skills.sh
GitHub
31.2K stars ↗
Last updated
28 Aug 2026

Security checks

Run by independent scanners and published on skills.sh. Their results, not a Viberation review.

  • Gen Agent Trust Hub Pass

    This skill provides a comprehensive set of React and Next.js performance guidelines from Vercel Engineering. It is composed of educational markdown files and code examples designed to assist agents in optimizing codebases. No security issues were detected.

    15 Apr 2026

  • Socket Pass

    No alerts

    15 Apr 2026

  • Snyk Pass

    Risk: LOW · No issues

    15 Apr 2026

  • Runlayer Pass

    1/68 files flagged

    12 Mar 2026

  • ZeroLeaks Pass

    Score: 93/100 · 2 sections analyzed

    15 Apr 2026
What's inside (76 files)
  • AGENTS.md108.2K chars
  • metadata.json921 chars
  • README.md3.4K chars
  • rules/_sections.md1.6K chars
  • rules/_template.md631 chars
  • rules/advanced-effect-event-deps.md1.8K chars
  • rules/advanced-event-handler-refs.md1.5K chars
  • rules/advanced-init-once.md958 chars
  • rules/advanced-use-latest.md1.1K chars
  • rules/async-api-routes.md1.1K chars
  • rules/async-cheap-condition-before-await.md1.2K chars
  • rules/async-defer-await.md2.2K chars
  • rules/async-dependencies.md1.3K chars
  • rules/async-parallel.md653 chars
  • rules/async-suspense-boundaries.md2.5K chars
  • rules/bundle-analyzable-paths.md2.4K chars
  • rules/bundle-barrel-imports.md2.8K chars
  • rules/bundle-conditional.md949 chars
  • rules/bundle-defer-third-party.md920 chars
  • rules/bundle-dynamic-imports.md791 chars
  • rules/bundle-preload.md1.1K chars
  • rules/client-event-listeners.md2K chars
  • rules/client-localstorage-schema.md2K chars
  • rules/client-passive-event-listeners.md1.6K chars
  • rules/client-swr-dedup.md1.2K chars
  • rules/js-batch-dom-css.md3.3K chars
  • rules/js-cache-function-results.md1.9K chars
  • rules/js-cache-property-access.md531 chars
  • rules/js-cache-storage.md1.7K chars
  • rules/js-combine-iterations.md753 chars
  • rules/js-early-exit.md1.1K chars
  • rules/js-flatmap-filter.md1.4K chars
  • rules/js-hoist-regexp.md1K chars
  • rules/js-index-maps.md834 chars
  • rules/js-length-check-first.md1.7K chars
  • rules/js-min-max-loop.md2.3K chars
  • rules/js-request-idle-callback.md2.6K chars
  • rules/js-set-map-lookups.md532 chars
  • rules/js-tosorted-immutable.md1.8K chars
  • rules/rendering-activity.md564 chars
  • rules/rendering-animate-svg-wrapper.md1.2K chars
  • rules/rendering-conditional-render.md980 chars
  • rules/rendering-content-visibility.md814 chars
  • rules/rendering-hoist-jsx.md1K chars
  • rules/rendering-hydration-no-flicker.md2.3K chars
  • rules/rendering-hydration-suppress-warning.md870 chars
  • rules/rendering-resource-hints.md2.5K chars
  • rules/rendering-script-defer-async.md1.9K chars
  • rules/rendering-svg-precision.md588 chars
  • rules/rendering-usetransition-loading.md2.1K chars
  • rules/rerender-defer-reads.md973 chars
  • rules/rerender-dependencies.md824 chars
  • rules/rerender-derived-state-no-effect.md1.2K chars
  • rules/rerender-derived-state.md728 chars
  • rules/rerender-functional-setstate.md3K chars
  • rules/rerender-lazy-state-init.md2K chars
  • rules/rerender-memo-with-default-value.md1.2K chars
  • rules/rerender-memo.md1.1K chars
  • rules/rerender-move-effect-to-event.md1.3K chars
  • rules/rerender-no-inline-components.md2.1K chars
  • rules/rerender-simple-expression-in-memo.md1K chars
  • rules/rerender-split-combined-hooks.md1.8K chars
  • rules/rerender-transitions.md1.1K chars
  • rules/rerender-use-deferred-value.md1.8K chars
  • rules/rerender-use-ref-transient-values.md1.7K chars
  • rules/server-after-nonblocking.md2K chars
  • rules/server-auth-actions.md2.6K chars
  • rules/server-cache-lru.md1.4K chars
  • rules/server-cache-react.md2.2K chars
  • rules/server-dedup-props.md2.1K chars
  • rules/server-hoist-static-io.md4.4K chars
  • rules/server-no-shared-module-state.md1.8K chars
  • rules/server-parallel-fetching.md1.6K chars
  • rules/server-parallel-nested-fetching.md990 chars
  • rules/server-serialization.md996 chars
  • SKILL.md7.3K chars

SKILL.md, first part. Shown as plain text.

---
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 code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
license: MIT
metadata:
  author: vercel
  version: "1.0.0"
---

# 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

| 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-cheap-condition-before-await` - Check cheap sync conditions before awaiting flags or remote values
- `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-analyzable-paths` - Prefer statically analyzable import and file-system paths to avoid broad bundles and traces
- `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-hoist-static-io` - Hoist static I/O (fonts, logos) to module level
- `server-no-shared-module-state` - Avoid module-level mutable request state in RSC/SSR
- `server-serialization` - Minimize data passed to client components
- `server-parallel-fetching` - Restructure components to parallelize fetches
- `server-parallel-nested-fetching` - Chain nested fetches per item in Promise.all
- `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, no

Key info

Pricing
Free
Category
Skills

More in Skills