# React Sync

> Compila cambios locales de React en las variantes de bundle que consume Next.js, los sincroniza con un checkout local de Next.js y prueba la integración.

Fuente: https://skillsagentes.com/skills/vercel/next.js/react-sync
Markdown: https://skillsagentes.com/skills/vercel/next.js/react-sync.md

Repositorio: https://github.com/vercel/next.js
Autor: vercel
Licencia: MIT
Actualizado: el mes pasado
Coste de contexto: 78 tok instalada, 485 tok al activarse, 726 tok con todos los archivos del bundle
Bundle: 2 archivos, 3 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add vercel/next.js --skill react-sync --agent claude-code
# Cursor
npx -y skills add vercel/next.js --skill react-sync --agent cursor
# Codex
npx -y skills add vercel/next.js --skill react-sync --agent codex
# Gemini CLI
npx -y skills add vercel/next.js --skill react-sync --agent gemini
# Windsurf
npx -y skills add vercel/next.js --skill react-sync --agent windsurf
# Cline
npx -y skills add vercel/next.js --skill react-sync --agent cline
```

## Qué hace

- Compila cambios locales de React en las variantes de bundle que consume Next.js
- Los sincroniza con un checkout local de Next.js
- Prueba la integración resultante

## Cuándo usarla

- Se trabaja en cambios de React que hay que validar dentro de Next.js
- Se pide ejecutar `buildForNext` o `pnpm sync-react`

## Qué la activa

- "Sincroniza mi React local con Next.js"
- "Ejecuta buildForNext y prueba la integración"
- "Valida este cambio de React dentro de Next"

## Antes de instalar

- Necesita un checkout local de React y otro de Next.js.

## Archivos

- SKILL.md — 2 KB
- scripts/build-for-next.sh — 964 B

## SKILL.md

Reproducido tal cual desde vercel/next.js bajo MIT. Esta sección es el documento original y está en inglés.

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

## Dónde encaja

- Categoría: [Herramientas para desarrolladores](https://skillsagentes.com/categorias/herramientas-desarrollo.md) — Skills que cambian cómo tu agente escribe, revisa y despliega código.
- Creador: [vercel](https://skillsagentes.com/creators/vercel.md) — 36 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Next Cache Components Adoption](https://skillsagentes.com/skills/vercel/next.js/next-cache-components-adoption.md): Activa Cache Components en una app de Next.js y resuelve las rutas bloqueantes que aparecen. Úsalo para adoptar o migrar, activar el flag cacheComponents o decidir entre excluir rutas y arreglarlas.
- [Next Cache Components Optimizer](https://skillsagentes.com/skills/vercel/next.js/next-cache-components-optimizer.md): Lleva una ruta de Next.js a navegación instantánea bajo Cache Components o PPR mediante un bucle agéntico: codifica el objetivo como un e2e instant() en rojo y lo trabaja hasta verde, ruta a ruta.
- [Next Partial Prefetching Adoption](https://skillsagentes.com/skills/vercel/next.js/next-partial-prefetching-adoption.md): Activa Partial Prefetching en una app de Next.js y resuelve las insights que surgen: audita los Link con prefetch, activa partialPrefetching y opta por rutas con prefetch = 'partial'.
- [Next Dev Loop](https://skillsagentes.com/skills/vercel/next.js/next-dev-loop.md): Verifica el comportamiento en runtime de Next.js tras editar código de la aplicación. Combina /_next/mcp, la visión de Next.js, con agent-browser, la del navegador. Requiere un next dev en marcha.
- [Gh Stack](https://skillsagentes.com/skills/vercel/next.js/gh-stack.md): Gestiona PRs apilados y parte el trabajo en ramas revisables con gh-stack: creación, visualización, edición, push, envío, sincronización, rebase, merge y checkout.

## Skills relacionadas

- [Authoring Skills](https://skillsagentes.com/skills/vercel/next.js/authoring-skills.md): Cómo crear y mantener skills de agente en .agents/skills/. Úsalo al crear un SKILL.md, escribir descripciones, elegir campos de frontmatter o decidir qué va en un skill y qué en AGENTS.md.
- [Backport Pr](https://skillsagentes.com/skills/vercel/next.js/backport-pr.md): Lleva un pull request fusionado de Next.js desde canary a una rama de release anterior como next-16-2: localiza el commit, crea la rama, hace cherry-pick, valida y abre el PR.
- [Create Pr](https://skillsagentes.com/skills/vercel/next.js/create-pr.md): Crea ramas, commits, pushes y pull requests de GitHub para Next.js. Cubre la plantilla de PR, el formato de --body, las ramas codex/ y las directivas de git de la app Codex.
- [Dce Edge](https://skillsagentes.com/skills/vercel/next.js/dce-edge.md): Patrones de require() seguros para eliminación de código muerto y restricciones del runtime edge. Úsalo al escribir require condicionales, proteger imports de Node o editar define-env-plugin.ts.
- [Flags](https://skillsagentes.com/skills/vercel/next.js/flags.md): Cómo añadir o modificar flags experimentales de Next.js de principio a fin: tipo, esquema zod, inyección en build, paso de variables en runtime y elección entre ramificar o generar variantes.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)