Sync React to Next.js
SkillCloud & infraLets your agent build React changes and sync them into a local Next.js checkout to test how they work together.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Sync React to Next.js skill
About this capability
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 wi
What this skill tells your AI
The instructions your AI receives, as published by vercel/next.js in .agents/skills/react-sync/SKILL.md and read by ahel’s review.
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.shThis creates
build/oss-stableandbuild/oss-experimentalwith 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 onPATH. Codex injects a separate bundledpnpmexecutable ahead of the user's Corepack shim, and command lookup happens before Corepack reads the repository'spackageManagerfield. The prefix makes both this command andsync-react's nestedpnpm installresolve through Corepack to the repository-pinned pnpm version. Invoking only the outer command withcorepack pnpmis insufficient because the nested command still resolvespnpmfromPATH. -
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.
Signals
- GitHub stars
- 142k
- Forks
- 32k
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
react-sync- Source
- github.com/vercel/next.js