Skills Agentes

Migrate Radix To Base

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.

Reemplaza a: Reconstrucción manual de transformaciones radix->base sin usar el CLI de shadcn

Estrellas
124k

en todo el repo

Actividad
51

0–100, la ruta de este skill

Actualizado
hace 2 meses

ú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, composiciones radix hechas a mano y su código consumidor de @radix-ui a @base-ui/react
  • Usa el CLI de shadcn como 'golden pair' para reconstruir componentes stock antes de recurrir a una transformación manual
  • Aplica tablas de props por familia (overlays, menus, form-controls, disclosure, display-misc) y class-mapping.md para reescrituras
  • Genera un reporte por componente en .migration/<component>.md con cambios, comportamientos alterados y checklist de QA manual
  • Detecta y respeta librerías no-radix (cmdk, vaul, sonner, input-otp, react-day-picker, recharts) dejándolas intactas

Úsalo cuando

  • Se pide migrar de radix, pasar a base-ui, convertir primitivas radix, o cambiar la librería base de un proyecto shadcn
  • Migrar un componente individual (ej. 'migrate accordion') o un proyecto shadcn completo
  • El proyecto mezcla estados: algunos componentes ya en base, otros aún en radix, y hay que continuar el trabajo

No lo uses cuando

    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 de radix-ui a base-ui”
    • “Pasa el dropdown-menu y el alert-dialog a @base-ui/react”
    • “¿Qué componentes quedan pendientes de migrar de 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 detectar el gestor de paquetes del proyecto (pnpm/bun/yarn/npm) antes de instalar @base-ui/react.

    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 4 skills. Si instalas uno, normalmente ya tienes los demás. Ver el pack ui entero y su comando de instalación

    Shadcn

    124k

    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 21 días
    diseno ui

    Shadcn

    124k

    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 2 meses
    diseno ui

    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.

    Costo de contexto al activarse
    2.3k tok
    Tamaño del paquete
    10 archivos
    Última actualización
    hace 2 meses
    herramientas desarrollo

    Skills relacionados

    Shadcn

    124k

    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 21 días
    diseno ui

    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.

    Costo de contexto al activarse
    2.3k tok
    Tamaño del paquete
    10 archivos
    Última actualización
    hace 2 meses
    herramientas desarrollo

    Shadcn

    124k

    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 2 meses
    diseno ui