mcpbeat

React Sync

vercel/react-sync

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

726 tokens
context cost
the whole folder, loaded on every use
2
files
ships runnable scripts
0
copies elsewhere
how many repositories repackaged it
141327
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/vercel/next.js --skill react-sync

What comes with it

964 bytes besides the instruction
scripts/build-for-next.sh

The instruction itself

3 sections, as written by the author

Sync React to Next.js

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

Build and sync

  • Build React from its own checkout. Pass this skill's script by its absolute

path, because the working directory must be the React repository.

   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.

  • Sync the build into Next.js:
   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.

  • 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.

Related Skills

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

How to use it

Copy the folder

Take vercel/react-sync from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.

Install what it needs

The instructions reference npm. Without those the skill loads but fails at the first command.