StealIt

Vercel React Best Practices

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.

Install

Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.

$ npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices

Needs Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.

How to use Vercel React Best Practices

Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name. In Claude Code you can also run it directly by typing /vercel-react-best-practices.

It contains no scripts, only instructions and reference files, so it can't run code on its own.

What the instructions cover

  1. 1When to Apply
  2. 2Rule Categories by Priority
  3. 3Quick Reference
  4. 4How to Use
  5. 5Full Compiled Document

Section headings from the skill's SKILL.md file.

What's inside · 76 files

  • AGENTS.md
  • README.md
  • SKILL.md
  • metadata.json
  • rules/_sections.md
  • rules/_template.md
  • rules/advanced-effect-event-deps.md
  • rules/advanced-event-handler-refs.md
  • rules/advanced-init-once.md
  • rules/advanced-use-latest.md
  • rules/async-api-routes.md
  • rules/async-cheap-condition-before-await.md
  • rules/async-defer-await.md
  • rules/async-dependencies.md
  • rules/async-parallel.md
  • rules/async-suspense-boundaries.md
  • rules/bundle-analyzable-paths.md
  • rules/bundle-barrel-imports.md
  • rules/bundle-conditional.md
  • rules/bundle-defer-third-party.md
  • rules/bundle-dynamic-imports.md
  • rules/bundle-preload.md
  • rules/client-event-listeners.md
  • rules/client-localstorage-schema.md
  • rules/client-passive-event-listeners.md
  • rules/client-swr-dedup.md
  • rules/js-batch-dom-css.md
  • rules/js-cache-function-results.md
  • rules/js-cache-property-access.md
  • rules/js-cache-storage.md
  • rules/js-combine-iterations.md
  • rules/js-early-exit.md
  • rules/js-flatmap-filter.md
  • rules/js-hoist-regexp.md
  • rules/js-index-maps.md
  • rules/js-length-check-first.md
  • rules/js-min-max-loop.md
  • rules/js-request-idle-callback.md
  • rules/js-set-map-lookups.md
  • rules/js-tosorted-immutable.md
  • + 36 more files on GitHub →

More from Vercel

See all →

Deploy To Vercel

Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a…

Cloud & DevOpsVercel34k

Vercel CLI With Tokens

Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to…

Cloud & DevOpsVercel34k

Vercel Composition Patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers…

FrontendVercel34k

Vercel Optimize

Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config…

Cloud & DevOpsVercel34k
See all →

Web Artifacts Builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts…

FrontendAnthropic187k

Angular Migration

Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning…

FrontendSeth Hobson42k

Modern Javascript Patterns

Master ES6+ features including async/await, destructuring, spread operators, arrow functions, promises, modules, iterators, generators, and functional programming patterns for…

FrontendSeth Hobson42k

Nextjs App Router Patterns

Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or…

FrontendSeth Hobson42k