PlugWiki

vercel-react-best-practices Skill: Vercel's React and Next.js Speed Rules

Gives Claude 70 performance rules from Vercel Engineering to follow when it writes, reviews or refactors React and Next.js code.

Installs
861.1K
on skills.sh
Stars
33.4K
on GitHub
Files
60+
besides SKILL.md
Updated
Oct 2026
last repo commit

vercel-react-best-practices is a rulebook the agent consults when you write components, fetch data, review for speed or cut bundle size. The rules fall into 8 categories ranked by impact, starting with eliminating request waterfalls and shrinking bundles, both marked critical.

Each rule is its own short file with a wrong example and a right one, and a combined AGENTS.md holds the full guide. It bundles no scripts. It guides the code the agent writes, so review the diff like any refactor.

Good for

  • React and Next.js developers who want faster pages
  • Teams that review pull requests for performance
  • Anyone asking an agent to refactor components or trim a bundle

Install vercel-react-best-practices

Claude Code

  1. 1

    Copy this prompt.

    Install the vercel-react-best-practices skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

  1. When to Apply
  2. Rule Categories by Priority
  3. Quick Reference
  4. 1. Eliminating Waterfalls (CRITICAL)
  5. 2. Bundle Size Optimization (CRITICAL)
  6. 3. Server-Side Performance (HIGH)
  7. 4. Client-Side Data Fetching (MEDIUM-HIGH)
  8. 5. Re-render Optimization (MEDIUM)
  9. 6. Rendering Performance (MEDIUM)
  10. 7. JavaScript Performance (LOW-MEDIUM)
  11. 8. Advanced Patterns (LOW)
  12. How to Use
  13. Full Compiled Document

Key facts

Author
Vercel (vercel-labs)
Repo
vercel-labs/agent-skills
Installs on skills.sh
861,110 (Nov 2, 2026)
GitHub stars
33,354 (Nov 2, 2026)
Last repo commit
Oct 28, 2026
Files next to SKILL.md
75 files
skills.sh audits
Gen Agent Trust Hub pass, Socket pass, Snyk pass
Rules
70 rules in 8 categories (async, bundle, server, client, rerender, rendering, js, advanced)

What it includes

  • Start promises early, await late, use Promise.all, stream with Suspense

    1. Eliminating waterfalls (critical)

  • Avoid barrel imports, load heavy code dynamically, defer third-party scripts

    2. Bundle size (critical)

  • Authenticate server actions, cache per request, trim data sent to clients

    3. Server-side performance (high)

  • Dedupe requests with SWR, passive scroll listeners, versioned localStorage

    4. Client-side data fetching (medium-high)

  • Derived state in render, functional setState, no components inside components

    5. Re-render optimization (medium)

  • content-visibility, hoisted JSX, hydration fixes, resource hints

    6. Rendering performance (medium)

  • Set and Map lookups, early exits, one-pass loops

    7. JavaScript performance (low-medium)

  • Event handler refs, init once, useLatest

    8. Advanced patterns (low)

From the official docs

Questions

What does vercel-react-best-practices do?

It gives the agent 70 Vercel-written rules for React and Next.js performance, ordered by impact. The agent applies them when you write, review or refactor that kind of code.

How do I install it?

Use the install box at the top. It is a single skill folder with its rules inside, so one install is enough.

Do I need Vercel hosting to use it?

The SKILL.md talks about React and Next.js code, not Vercel deployments. It does not say you need a Vercel account.

Does it run scripts or call the network?

It bundles no scripts. Its files are rules in Markdown plus a metadata.json and a README.

Does it work in Cursor or Codex?

The SKILL.md does not list clients. Skills in this format install through the skills CLI for many agents, so see the install box for the targets we hold.

Is it safe?

It is Markdown guidance with no scripts. It can change how the agent refactors your code, so review the diff. Skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass.

Information

updated Nov 2, 2026

Repository
vercel-labs/agent-skills
Folder
skills/react-best-practices

vercel-labs/agent-skillsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2
  1. vercel-react-best-practices SKILL.md · github.com
  2. vercel-react-best-practices on skills.sh · skills.sh

Updated Nov 2, 2026.