Add React sync development skill (#95620)

### What?

Add a repository skill for building local React stable and experimental
bundles, syncing them into Next.js, and verifying the integration.

### Why?

Testing upstream React changes in Next.js requires a precise bundle
list, both React release channels, and the repository-pinned pnpm
version. Capturing the workflow as a skill makes it repeatable and
avoids global pnpm versions bypassing workspace linking.

### How?

Add `$react-sync` with a reusable build helper and document it in
`AGENTS.md`. The sync command puts the Corepack shim first on `PATH` so
nested pnpm commands use the version pinned by Next.js.

### Verification

- `bash -n .agents/skills/react-sync/scripts/build-for-next.sh`
- `python3
~/.codex/skills/.system/skill-creator/scripts/quick_validate.py
.agents/skills/react-sync`
- Prettier check for `AGENTS.md` and `SKILL.md`
- Full local React build and `pnpm sync-react` workflow completed
successfully
- `pnpm --filter=next build`

<!-- NEXT_JS_LLM_PR -->
This commit is contained in:
Tim Neutkens
2026-07-14 12:49:59 +02:00
committed by GitHub
parent cecb6f3276
commit 0f01364309
3 changed files with 89 additions and 0 deletions
+53
View File
@@ -0,0 +1,53 @@
---
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.
## Related Skills
- `$react-vendoring` - vendored React runtime and type boundaries after syncing.
@@ -0,0 +1,35 @@
#!/usr/bin/env bash
set -euo pipefail
set -x
bundles=(
"react/index"
"react/jsx"
"react-jsx-runtime.react-server"
"react-jsx-dev-runtime.react-server"
"react/compiler-runtime"
"react.react-server"
"react-dom/index"
"react-dom/client"
"react-dom/profiling"
"react-dom/server"
"react-dom.react-server"
"react-dom-server.browser"
"react-dom-server.bun"
"react-dom-server.edge"
"react-dom-server.node"
"react-dom-server-legacy.browser"
"react-dom-server-legacy.node"
"react-is"
"scheduler"
"react-server-dom-webpack/"
"react-server-dom-turbopack/"
)
type="BUN_DEV,BUN_PROD,NODE_DEV,NODE_PROD,NODE_PROFILING,ESM_DEV,ESM_PROD,NODE_ES2015"
RELEASE_CHANNEL=stable node ./scripts/rollup/build.js "${bundles[@]}" --type="$type"
mv ./build/node_modules ./build/oss-stable
RELEASE_CHANNEL=experimental node ./scripts/rollup/build.js "${bundles[@]}" --type="$type" --unsafe-partial
mv ./build/node_modules ./build/oss-experimental
+1
View File
@@ -388,6 +388,7 @@ Use skills for conditional, deep workflows. Keep baseline iteration/build/test p
- `$flags` - feature-flag wiring across config/schema/define-env/runtime env
- `$dce-edge` - DCE-safe `require()` patterns and edge/runtime constraints
- `$react-vendoring` - `entry-base.ts` boundaries and vendored React type/runtime rules
- `$react-sync` - build a local React checkout and sync it into Next.js for testing
- `$runtime-debug` - runtime-bundle/module-resolution regression reproduction and verification
- `$next-rspack` - @next/rspack-core and @next/rspack-binding maintenance (rspack/ directory)
- `$authoring-skills` - how to create and maintain skills in `.agents/skills/`