Migrar desde shadcn

Tenés componentes de shadcn/ui en una app React. Querés los mismos componentes en templates de Django, HTML plano, o cualquier stack al que Chiralkit apunte — sin reescribirlos a mano. Este es el flujo.

Prerrequisitos

• El CLI de Chiralkit instalado global (pnpm add -g chiralkit).
• El source de un componente shadcn/ui (un .tsx que exporta el componente).
• Un tokens.map.json que mapee nombres de clases Tailwind a tus design tokens.

El mapa le dice al extractor qué clases Tailwind tratar como tokens vs. estilos sin mapear. Un shape mínimo:

{
  "colors": {
    "bg-primary": "color.primary",
    "text-primary-foreground": "color.primary-foreground",
    "bg-destructive": "color.destructive"
  },
  "spacing": { "px-4": "spacing.4", "h-10": "spacing.10" },
  "radius": { "rounded-md": "radius.md" }
}

1. Extraer el spec

Apuntá spec from-react al source del componente y a tu tokens map. Camina el type-checker de TypeScript para inferir props y escanea variantes de cva y strings de className buscando uso de tokens.

Output (extracto):

{
  "name": "shadcn-button",
  "version": "1.0.0",
  "props": {
    "variant": {
      "type": "enum",
      "values": ["default", "destructive", "outline", "secondary", "ghost", "link"],
      "default": "default"
    },
    "size": {
      "type": "enum",
      "values": ["default", "sm", "lg", "icon"],
      "default": "default"
    },
    "asChild": { "type": "boolean", "default": false },
    "disabled": { "type": "boolean", "default": false },
    "href": { "type": "string" }
  },
  "tokens_used": {
    "colors": ["color.primary", "color.primary-foreground", "color.destructive", ...],
    "spacing": ["spacing.10", "spacing.4", "spacing.9", ...],
    "radius": ["radius.md"],
    "font": ["font.size-sm", "font.weight-medium"],
    "_unmapped": ["inline-flex", "items-center", "focus-visible:ring-2", ...]
  }
}

2. Revisar el spec

Dos campos merecen una segunda lectura. props captura la API pública del componente React — cualquier cosa que no quieras exponer en la versión web component, quitala acá. tokens_used._unmapped lista cada clase Tailwind que el mapa no reconoció; cada una es o bien un estilo genuino para tokenizar (añadilo al mapa y volvé a correr) o styling literal intencional que se queda así.

3. Generar una implementación

Pasás el spec a generate y le decís qué stack objetivo. Chiralkit compone un prompt desde el spec y o bien lanza tu agente local (Claude Code, Cursor, Aider) o llama a un LLM vía el AI SDK, según registry/generator.config.json.

El generador produce archivos source por stack bajo registry/shadcn-button/implementations/<stack>/. Revisá el output como cualquier código — el spec es el contrato, la implementación es una interpretación.

4. Usarlo en tu proyecto

Una vez el módulo vive en el registry, consumirlo es el flujo add estándar — igual que cualquier módulo de Chiralkit.

Los archivos aterrizan en tu proyecto, tracked por git, editables como código propio.