New: 98,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

React Sync

by vercel in vercel/next.js

Build local React changes in the bundle variants consumed by Next.js, sync them into a local Next.js checkout, and test the resulting integration.

OfficialMITAuto-check passed

Install React Sync

skills CLI
$ npx skills add vercel/next.js --skill react-sync -a claude-code

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

GitHub CLI
$ gh skill install vercel/next.js react-sync --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/vercel/next.js.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/react-sync .claude/skills/react-sync && 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
react-sync
GitHub stars
143k
Token cost
~486 tokens
SKILL.md length
180 words
Files
2 (incl. scripts)
Skills in repo
27
Repo updated
First seen
Licence
MIT

At a glance

Build local React changes in the bundle variants consumed by Next.js, sync them into a local Next.js checkout, and test the resulting integration.

  • Works in 3 steps: Build React from its own checkout. Pass… → Sync the build into Next.js → Inspect the sync result before testing.…
  • Working on React changes that need validation in Next.js
  • SKILL.md covers Build and sync and Related Skills
  • Runs Shell scripts from its folder; calls pnpm and bash

What it does

React Sync is an agent skill from vercel/next.js, published by the product's own GitHub organization. Build local React changes in the bundle variants consumed by Next.js, sync them into a local Next.js checkout, and test the resulting integration. Use when working on React changes that need validation in Next.js, or when asked to run buildForNext, pnpm sync-react, or synchronize a React checkout with Next.js.

Its SKILL.md is about 490 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including scripts (for example `scripts/build-for-next.sh`).

It works with React, Next.js and pnpm. The licence is MIT.

When your agent uses it

  • Working on React changes that need validation in Next.js
  • Asked to run buildForNext
  • Pnpm sync-react
  • Synchronize a React checkout with Next.js

Example prompts

  • “/react-sync”

Requirements

  • A Bash shell

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Build React from its own checkout. Pass this skill's script by its absolute
  2. Sync the build into Next.js
  3. Inspect the sync result before testing. Preserve unrelated changes in both

What it can do on your machine

Read from SKILL.md and the folder at commit a32ddfd. 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

    Ships 1 file in scripts/ (Shell), which the agent can run.

    Shell commands in SKILL.md call:

    • pnpm
    • bash

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

  • Network

    No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.

    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

React Sync loads about 486 tokens when it runs. Until then it costs about 81 tokens; SKILL.md has 180 words of instructions outside code blocks.

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

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); the scripts in this folder are not scanned.

SKILL.md

The full file from vercel/next.js at commit a32ddfd, republished under its MIT licence (© vercel). 180 words, ~486 tokens.

Download SKILL.mdSave it as .claude/skills/react-sync/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
react-sync
description
Build local React changes in the bundle variants consumed by Next.js, sync them into a local Next.js checkout, and test the resulting integration. Use when working on React changes that need validation in Next.js, or when asked to run buildForNext, pnpm sync-react, or synchronize a React checkout with Next.js.
metadata.internal
true

Sync React to Next.js

Use this skill when syncing a local React checkout into this Next.js checkout.

Build and sync

  1. Build React from its own checkout. Pass this skill's script by its absolute path, because the working directory must be the React repository.

    bash
    cd <react-repo>
bash <next-repo>/.agents/skills/react-sync/scripts/build-for-next.sh

    This creates build/oss-stable and build/oss-experimental with the bundle variants that Next.js consumes.

  2. Sync the build into Next.js:

    bash
    cd <next-repo>
PATH="$(dirname "$(command -v corepack)"):$PATH" \
  pnpm sync-react --version <react-repo>

    Work around a Codex PATH-precedence bug by keeping the directory containing the active Corepack shim first on PATH. Codex injects a separate bundled pnpm executable ahead of the user's Corepack shim, and command lookup happens before Corepack reads the repository's packageManager field. The prefix makes both this command and sync-react's nested pnpm install resolve through Corepack to the repository-pinned pnpm version. Invoking only the outer command with corepack pnpm is insufficient because the nested command still resolves pnpm from PATH.

  3. Inspect the sync result before testing. Preserve unrelated changes in both checkouts. Rebuild Next.js when required, then run the focused test command matching the changed behavior.

  • $react-vendoring - vendored React runtime and type boundaries after syncing.

© vercel, 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 1 other file (scripts) in .agents/skills/react-sync of vercel/next.js.

  • SKILL.md
  • scripts/build-for-next.sh

Open the folder on GitHubat commit a32ddfd

Compare with similar skills

React Sync 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.

React Sync compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React Sync this skillvercel/next.js143k—~486Automated safety check: PassMIT
AI SDKvercel-labs/ai-facts16821 repos~1.2kAutomated safety check: PassNone
Chakra UI v3 Builderchakra-ui/chakra-ui41k—~3.1kAutomated safety check: PassMIT
Remotion Best Practiceslyonjs/shortvid.io14733 repos~1kAutomated safety check: PassMIT
React View Transitions Guidevercel-labs/next-beats16710 repos~3.1kAutomated safety check: PassMIT
Website ClonerJCodesMore/ai-website-cloner-template36k—~1.7kAutomated safety check: PassMIT

Similar skills

  • AI SDK

    vercel-labs/ai-facts

    Official

    Answer questions about the AI SDK and help build AI-powered features.

    168 GitHub starsUsed in 21 repos~1.2k tokens
    AI & LLM EngineeringAuto-check passed

  • Chakra UI v3 Builder

    chakra-ui/chakra-ui

    Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.

    41k GitHub stars~3.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Remotion Best Practices

    lyonjs/shortvid.io

    Best practices for Remotion - Video creation in React. An agent skill from lyonjs/shortvid.io.

    147 GitHub starsUsed in 33 repos~1k tokens
    Media & CreativeAuto-check passed

  • React View Transitions Guide

    vercel-labs/next-beats

    Official

    Guides implementing animated page and state transitions in React with the native View Transition API, covering shared elements, list reorders and directional navigation.

    167 GitHub starsUsed in 10 repos~3.1k tokens
    Frontend & DesignAuto-check passed

  • Website Cloner

    JCodesMore/ai-website-cloner-template

    Rebuilds existing web pages as editable local code that matches their content, assets, responsive layout and interactions, including Framer sites and animated pages.

    36k GitHub stars~1.7k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • @pierre/diffs Code Rendering

    pierrecomputer/pierre

    Guides an agent through using @pierre/diffs to render syntax-highlighted files and diffs, and to build editing and review surfaces in React or plain JavaScript.

    6.2k GitHub starsUsed in 2 repos~803 tokens
    DevelopmentAuto-check passed

More from vercel/next.js

All 27 skills in this repo

  • Gh Stack

    vercel/next.js

    Official

    Manages stacked PRs and splits multi-part work into reviewable branches with gh-stack.

    143k GitHub starsUsed in 7 repos~2.3k tokens
    Auto-check passed

  • Sandbox Bench

    vercel/next.js

    Official

    Benchmark React or Next.js changes on Vercel Sandbox VMs with paired A/B statistics: react PR/commit vs base, or Next.js PR/commit vs base, measured end-to-end through the bench/render-pipeline app…

    143k GitHub stars~4.1k tokensUpdated today
    Auto-check passed

  • Next Dev Loop

    vercel/next.js

    Official

    Verify Next.js runtime behavior after editing app code. An agent skill from vercel/next.js.

    143k GitHub starsUsed in 9 repos~2.3k tokens
    Auto-check passed

  • Docs Diagrams

    vercel/next.js

    Official

    Draw diagrams for the Next.js docs in the style of the ones already published there: the light/dark PNGs an mdx references with <Image srcLight="/docs/light/<name.png" srcDark="/docs/dark/<name.png".

    143k GitHub stars~2.9k tokensUpdated today
    Auto-check passed

  • Next Cache Components Adoption

    vercel/next.js

    Official

    Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces.

    143k GitHub starsUsed in 6 repos~8.3k tokens
    Auto-check passed

  • Next Bundle Optimizer

    vercel/next.js

    Official

    Audit and reduce Next.js browser initial-load work. An agent skill from vercel/next.js.

    143k GitHub stars~2.4k tokensUpdated today
    Auto-check passed

Works with

Questions about React Sync

What does React Sync do?

Build local React changes in the bundle variants consumed by Next.js, sync them into a local Next.js checkout, and test the resulting integration. js, published by the product's own GitHub organization.js checkout, and test the resulting integration.

When should I use React Sync?

React Sync fits situations like: working on React changes that need validation in Next.js; asked to run buildForNext; pnpm sync-react; synchronize a React checkout with Next.js.

How do I install React Sync in Claude Code?

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

How do I install React Sync in Codex?

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

Can I use React Sync 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 vercel/next.js --skill react-sync -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-sync, .gemini/skills/react-sync, .github/skills/react-sync and .opencode/skills/react-sync in your project.

What does React Sync need to run?

Going by SKILL.md and its folder, React Sync needs a shell for the scripts in its folder and the command-line tools its instructions call (pnpm and bash). Our summary lists: A Bash shell.

Does React Sync 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 React Sync 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does React Sync use?

React Sync is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React Sync use?

About 486 tokens (SKILL.md is roughly 1.9k 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 React Sync?

Skills that share tags, products or a category with React Sync: AI SDK (vercel-labs/ai-facts, 168 stars), Chakra UI v3 Builder (chakra-ui/chakra-ui, 41k stars), Remotion Best Practices (lyonjs/shortvid.io, 147 stars) and React View Transitions Guide (vercel-labs/next-beats, 167 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Sync?

vercel (a GitHub organization, an official publisher) maintains it in vercel/next.js, which has 143,241 GitHub stars. The repository holds 27 skills in this directory. The repository was last updated on October 8, 2026.

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