New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Official agent skill

Vercel React Best Practices

by sanity-io in sanity-io/sanity

React and Next.js performance optimization guidelines from Vercel Engineering.

OfficialMITAuto-check passedFrontend & Design

Install Vercel React Best Practices

skills CLI
$ npx skills add sanity-io/sanity --skill vercel-react-best-practices -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install sanity-io/sanity vercel-react-best-practices --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/sanity-io/sanity.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/vercel-react-best-practices .claude/skills/vercel-react-best-practices && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
vercel-react-best-practices
GitHub stars
6.4k
Used in
130 other repos
Token cost
~1.6k tokens
SKILL.md length
569 words
Files
59
Skills in repo
34
Repo updated
First seen
Licence
MIT

At a glance

React and Next.js performance optimization guidelines from Vercel Engineering.

  • Works in 8 steps: Eliminating Waterfalls (CRITICAL) → Bundle Size Optimization (CRITICAL) → Server-Side Performance (HIGH) → …
  • Tasks involving React components
  • SKILL.md covers When to Apply, Rule Categories by Priority, Quick Reference and How to Use, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Vercel React Best Practices is an agent skill from sanity-io/sanity, published by the product's own GitHub organization. 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.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 59 other files (for example `AGENTS.md`, `rules/advanced-event-handler-refs.md` and `rules/advanced-init-once.md`).

It sits in Frontend & Design, covering React components, Performance optimization and Refactoring. It works with Vercel, Next.js and React. The repository describes itself as: Sanity Studio – Rapidly configure content workspaces powered by structured content. The licence is MIT.

When your agent uses it

  • Tasks involving React components
  • Bundle optimization
  • Performance improvements

Example prompts

  • “/vercel-react-best-practices”

Workflow steps

8 steps, taken from the step headings in SKILL.md.

  1. Eliminating Waterfalls (CRITICAL)
  2. Bundle Size Optimization (CRITICAL)
  3. Server-Side Performance (HIGH)
  4. Client-Side Data Fetching (MEDIUM-HIGH)
  5. Re-render Optimization (MEDIUM)
  6. Rendering Performance (MEDIUM)
  7. JavaScript Performance (LOW-MEDIUM)
  8. Advanced Patterns (LOW)

What it can do on your machine

Read from SKILL.md and the folder at commit 982525c. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Vercel React Best Practices loads about 1.6k tokens when it runs. Until then it costs about 89 tokens; SKILL.md has 569 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~89
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from sanity-io/sanity at commit 982525c, republished under its MIT licence (© sanity-io). 569 words, ~1,590 tokens.

Download SKILL.mdSave it as .claude/skills/vercel-react-best-practices/SKILL.md (or your agent's skills folder). This skill also uses 58 other files; get the full folder from GitHub.
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
metadata.version
1.0.0

Vercel React Best Practices

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 57 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

PriorityCategoryImpactPrefix
1Eliminating 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
Show full SKILL.md (208 more words)Show less
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

Read individual rule files for detailed explanations and code examples:

rules/async-parallel.md
rules/bundle-barrel-imports.md

Each rule file contains:

  • Brief explanation of why it matters
  • Incorrect code example with explanation
  • Correct code example with explanation
  • Additional context and references

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md

© sanity-io, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 58 other files in .agents/skills/vercel-react-best-practices of sanity-io/sanity.

  • SKILL.md
  • AGENTS.md
  • rules/advanced-event-handler-refs.md
  • rules/advanced-init-once.md
  • rules/advanced-use-latest.md
  • rules/async-api-routes.md
  • rules/async-defer-await.md
  • rules/async-dependencies.md
  • rules/async-parallel.md
  • rules/async-suspense-boundaries.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
  • … and 39 more

Open the folder on GitHubat commit 982525c

Used in at least 44 other repositories

We found 180 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 130 other GitHub owners. This page covers the copy in sanity-io/sanity, which our catalogue first saw on October 7, 2026.

…and 130 more copies not listed here.

Compare with similar skills

Vercel React Best Practices next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Vercel React Best Practices compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Vercel React Best Practices this skillsanity-io/sanity6.4k130 repos~1.6kAutomated safety check: PassMIT
React Best Practicesryokun6/ryos1.3k—~2kAutomated safety check: PassMIT
Vercel React Best Practicesgambitph/Stackable350—~2kAutomated safety check: PassMIT
React Performanceaffaan-m/ECC274k1 repos~4.5kAutomated safety check: PassMIT
React Best Practicesmajiayu000/spellbook286—~1.1kAutomated safety check: PassMIT
React Best Practicesshapeshift/web2061 repos~2kAutomated safety check: PassMIT

Similar skills

  • React Best Practices

    ryokun6/ryos

    React performance optimization guidelines from Vercel Engineering (vercel-labs/agent-skills).

    1.3k GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Vercel React Best Practices

    gambitph/Stackable

    React performance optimization guidelines from Vercel Engineering.

    350 GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • React Performance

    affaan-m/ECC

    React and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills).

    274k GitHub starsUsed in 1 repo~4.5k tokens
    DevelopmentAuto-check passed

  • React Best Practices

    majiayu000/spellbook

    React and Next.js performance playbook distilled from Vercel Engineering guidance.

    286 GitHub stars~1.1k tokensUpdated today
    Frontend & DesignAuto-check passed

  • React Best Practices

    shapeshift/web

    Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering.

    206 GitHub starsUsed in 1 repo~2k tokens
    DevelopmentAuto-check passed

  • React Refactor Tournament

    ragnar-pwninskjold/tech-snacks

    Review React/Next.js code against the real vercel-react-best-practices skill, backlog the performance findings keyed to actual rule ids + impact tiers, rank the most over-subscribed tiers, then fix…

    136 GitHub stars~1.3k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

More from sanity-io/sanity

All 34 skills in this repo

  • Playwright CLI

    sanity-io/sanity

    Official

    Automates browser interactions for web testing, form filling, screenshots, and data extraction.

    6.4k GitHub starsUsed in 18 repos~1.9k tokens
    Auto-check passed

  • Find Skills

    sanity-io/sanity

    Official

    Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities.

    6.4k GitHub starsUsed in 67 repos~1.2k tokens
    Auto-check passed

  • Before And After

    sanity-io/sanity

    Official

    Add existing screenshots or screen recordings to a GitHub pull request as a before/after or preview block.

    6.4k GitHub starsUsed in 1 repo~2.1k tokens
    Auto-check passed

  • React Devtools

    sanity-io/sanity

    Official

    React DevTools CLI for AI agents. An agent skill from sanity-io/sanity.

    6.4k GitHub starsUsed in 3 repos~2.1k tokens
    Auto-check passed

  • TDD

    sanity-io/sanity

    Official

    Test-driven development with red-green-refactor loop. An agent skill from sanity-io/sanity.

    6.4k GitHub starsUsed in 20 repos~1k tokens
    Auto-check passed

  • Sanity UI Migration Progress

    sanity-io/sanity

    Official

    Measures @sanity/ui v5 side-by-side migration progress — per-component import file counts (v5 alias vs @sanity/ui), JSX instance counts, and styled() instance counts with alias resolution.

    6.4k GitHub stars~2.1k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Vercel React Best Practices

What does Vercel React Best Practices do?

React and Next.js performance optimization guidelines from Vercel Engineering. Vercel React Best Practices is an agent skill from sanity-io/sanity, published by the product's own GitHub organization.js performance optimization guidelines from Vercel Engineering.

When should I use Vercel React Best Practices?

Vercel React Best Practices fits situations like: tasks involving React components; bundle optimization; performance improvements.

How do I install Vercel React Best Practices in Claude Code?

Run `npx skills add sanity-io/sanity --skill vercel-react-best-practices -a claude-code`. Or copy the skill folder (.agents/skills/vercel-react-best-practices in sanity-io/sanity) into .claude/skills/vercel-react-best-practices in your project. Claude Code loads it when a task matches its description.

How do I install Vercel React Best Practices in Codex?

Run `npx skills add sanity-io/sanity --skill vercel-react-best-practices -a codex`. Or copy the skill folder (.agents/skills/vercel-react-best-practices in sanity-io/sanity) into .agents/skills/vercel-react-best-practices in your project. Codex loads it when a task matches its description.

Can I use Vercel React Best Practices in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sanity-io/sanity --skill vercel-react-best-practices -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vercel-react-best-practices, .gemini/skills/vercel-react-best-practices, .github/skills/vercel-react-best-practices and .opencode/skills/vercel-react-best-practices in your project.

What does Vercel React Best Practices need to run?

SKILL.md names no scripts, command-line tools or credentials: Vercel React Best Practices is instructions for the agent only.

Does Vercel React Best Practices access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Vercel React Best Practices safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Vercel React Best Practices use?

Vercel React Best Practices is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Vercel React Best Practices use?

About 1.6k tokens (SKILL.md is roughly 6.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Vercel React Best Practices?

Skills that share tags, products or a category with Vercel React Best Practices: React Best Practices (ryokun6/ryos, 1.3k stars), Vercel React Best Practices (gambitph/Stackable, 350 stars), React Performance (affaan-m/ECC, 274k stars) and React Best Practices (majiayu000/spellbook, 286 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Vercel React Best Practices?

sanity-io (a GitHub organization, an official publisher) maintains it in sanity-io/sanity, which has 6,352 GitHub stars. The repository holds 34 skills in this directory. The repository was last updated on October 7, 2026.

Source: sanity-io/sanity on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.