Skills Agentes

Migrate Radix To Base

Migra proyectos y componentes React de Radix UI a Base UI: wrappers shadcn, composiciones hechas a mano y su código consumidor, componente a componente o el proyecto completo.

Reemplaza a: Reescritura manual de wrappers Radix a Base UI sin CLI ni tablas de mapeo

Estrellas
121k

en todo el repo

Actividad
54

0–100, la ruta de este skill

Actualizado
el mes pasado

último commit aquí

Commits
1

últimos 90 días

Contexto
2.3k tok

64 tok en reposo

Paquete
10 archivos

173 KB

Instalar

Funciona con cualquier agente que lea SKILL.md

npx -y skills add shadcn-ui/ui --skill migrate-radix-to-base --agent claude-code

Se instala solo en este repositorio.

Qué hace

  • Migra wrappers de shadcn y composiciones Radix hechas a mano hacia @base-ui/react, componente por componente o en el proyecto entero
  • Detecta pares golden vía la CLI de shadcn o aplica un motor de transformación con tablas de props por familia cuando no hay par golden
  • Repuntúa consumidores, elimina dependencias de radix al final y deja el proyecto compilando en cada paso
  • Genera reportes en .migration/<componente>.md con lo cambiado, lo dejado igual, cambios de comportamiento y checklist de verificación manual

Úsalo cuando

  • Se pide migrar de radix, mover a base-ui, convertir primitivas radix o cambiar la librería base de un proyecto shadcn
  • Migrar un solo componente (ej. "migrate accordion") o el proyecto completo

No lo uses cuando

  • Para librerías no-radix como cmdk, vaul, sonner, input-otp o react-day-picker, que deben quedar intencionalmente sin tocar

Qué lo activa

Di cualquiera de estas frases y el agente debería cargar este skill.

  • Migra el componente accordion de Radix a Base UI
  • Convierte todo el proyecto shadcn de radix-nova a base-nova
  • Pasa nuestras primitivas radix hechas a mano a @base-ui/react
  • ¿Qué componentes de la UI siguen usando Radix?

SKILL.md

En inglés

Radix UI -> Base UI migration

You migrate shadcn wrappers, hand-rolled radix compositions, and their consumers to @base-ui/react, keeping the project buildable at every step. Be precise; never guess a mapping. When a prop or part is not in these reference files, check node_modules/@base-ui/react/**/*.d.ts before transforming, and record gaps in the report.

Preflight (always)

  1. npx shadcn@latest info --json (or the project's runner): gives the current base, STYLE (e.g. radix-lyra), tailwind version, aliases, installed components, and package manager. Trust it over inference.
  2. Detect the package manager (packageManager field / lockfile: pnpm-lock.yaml, bun.lock, yarn.lock, package-lock.json) and use IT for every install. Never leave a stale lockfile.
  3. Require a clean git tree; work on a branch; one commit per component.
  4. Baseline check BEFORE touching dependencies: run the project's typecheck/build so pre-existing failures are never attributed to you.
  5. Install @base-ui/react alongside radix. Radix packages are removed only after the LAST component is migrated (both coexist fine).

Strategy: golden pair first, transformation engine second

  • Golden pair via the CLI (preferred). If the project is shadcn with a known style (radix-<style>), the shadcn CLI itself is the golden-pair executor:
    1. Classify each ui wrapper FIRST: diff the user's file against its stock origin, using the components.json style VERBATIM in the URL (https://ui.shadcn.com/r/styles/<style>/<component>.json, files[0].content). This works for prefixed styles (radix-nova) AND legacy unprefixed ones (new-york, new-york-v4, default), which are all still served.
    2. WHOLE-PROJECT mode: flip components.json style radix-<style> -> base-<style> now. PROGRESSIVE mode: do NOT flip yet (the project is still mostly radix; the flip happens once, after the last component); fetch base variants directly by URL instead (https://ui.shadcn.com/r/styles/base-<style>/<component>.json).
    3. PRISTINE wrappers, whole-project mode: shadcn add <component> --overwrite delivers the base variant with the project's exact icon/font/preset resolution. Never bulk --all --overwrite; go component by component, or you drown in unrelated registry version drift. PROGRESSIVE mode: never use --overwrite (it destroys the original that consumers still import); write the fetched base variant content to <component>-base.tsx instead.
    4. CUSTOMIZED wrappers: fetch the base variant and replay the user's diff onto it (their customizations must SURVIVE; --overwrite would destroy them). Mechanical implementation that works at scale: git merge-file user.tsx radix-golden.tsx base-golden.tsx (three-way merge, radix golden as ancestor) auto-resolves most files; hand-resolve conflicts with the reference tables.
    5. MANDATORY leftover sweep on EVERY golden-pair file, including ones that merged "clean": grep -n "radix-ui\|@radix-ui\|IconPlaceholder" per file. The registry sometimes reorders functions between variants, which makes three-way merges report zero conflicts while leaving stale radix hunks in place. A clean merge is NOT proof of a clean file. This is more reliable than reconstructing transforms; use it whenever the pair exists. Consumer/app code has no CLI mechanism: always hand-migrate it against consumer-props.md.
  • Legacy styles (new-york, new-york-v4, default): classification only, no replay. These have no base counterpart (there is no base-new-york), and retargeting onto a base-

Reproducido de shadcn-ui/ui bajo licencia MIT. Leer esta página en markdown.

Archivos

10 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.

Antes de instalar

Requiere un árbol git limpio, trabajar en una rama, y ejecutar `npx shadcn@latest info --json` antes de tocar dependencias.

Detalles

Creador
shadcn-ui
Licencia
MIT
Recursos incluidos
Incluye scripts o referencias
Repositorio
shadcn-ui/ui
Código fuente
Ver SKILL.md

Etiquetas

Más de shadcn-ui/ui

Este repo incluye 2 skills. Si instalas uno, normalmente ya tienes los demás.

Shadcn

121k

Gestiona componentes y proyectos shadcn: añadir, buscar, corregir, depurar, estilizar y componer UI, incluyendo interfaces de chat, con contexto del proyecto y documentación.

Costo de contexto al activarse
4.9k tok
Tamaño del paquete
15 archivos
Última actualización
hace 24 días
diseno ui

Shadcn

121k

Gestiona componentes y proyectos shadcn: añadir, buscar, corregir, depurar, estilizar y componer UI, incluyendo interfaces de chat, con docs y ejemplos del proyecto.

Costo de contexto al activarse
4.9k tok
Tamaño del paquete
15 archivos
Última actualización
hace 24 días
diseno ui

Migra proyectos y componentes React de Radix UI a Base UI: componentes individuales ('migrate accordion') o proyectos completos, manteniendo el build funcional en cada paso.

Costo de contexto al activarse
2.3k tok
Tamaño del paquete
10 archivos
Última actualización
el mes pasado
herramientas desarrollo

Skills relacionados

Migra proyectos y componentes React de Radix UI a Base UI: componentes individuales ('migrate accordion') o proyectos completos, manteniendo el build funcional en cada paso.

Costo de contexto al activarse
2.3k tok
Tamaño del paquete
10 archivos
Última actualización
el mes pasado
herramientas desarrollo

Shadcn

121k

Gestiona componentes y proyectos shadcn: añadir, buscar, corregir, depurar, estilizar y componer UI, incluyendo interfaces de chat, con docs y ejemplos del proyecto.

Costo de contexto al activarse
4.9k tok
Tamaño del paquete
15 archivos
Última actualización
hace 24 días
diseno ui

Shadcn

121k

Gestiona componentes y proyectos shadcn: añadir, buscar, corregir, depurar, estilizar y componer UI, incluyendo interfaces de chat, con contexto del proyecto y documentación.

Costo de contexto al activarse
4.9k tok
Tamaño del paquete
15 archivos
Última actualización
hace 24 días
diseno ui