ASD

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

    Skills relacionados

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

    Úsalo al empezar trabajo de feature que necesita aislamiento del workspace actual, o antes de ejecutar planes de implementación: asegura un workspace aislado vía herramientas nativas o fallback a git worktree.

    Costo de contexto al activarse
    1.7k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    el mes pasado
    herramientas desarrollo

    Úsala al crear nuevas skills, editar skills existentes o verificar que funcionan antes de desplegarlas.

    Costo de contexto al activarse
    6.6k tok
    Tamaño del paquete
    7 archivos
    Última actualización
    anteayer
    herramientas desarrollo