Chiralkit

Migrar desde shadcn

Tienes componentes de shadcn/ui en una app React. Quieres los mismos componentes en plantillas de Django, HTML plano o cualquier stack al que apunte Chiralkit, sin reescribirlos a mano. Este es el flujo.

Prerrequisitos

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" }
}

0. Migra tus tokens

Ejecuta primero ck tokens migrate. No necesita IA ni clave de API: lee el globals.css de tu shadcn a través de components.json y escribe ck/chiraltokens.css, con tus colores, radios y fuentes traducidos a tokens de ChiralUI. Después importa ese archivo tras @chiralkit/tokens/tokens.css.

@import "@chiralkit/tokens/tokens.css";
@import "./ck/chiraltokens.css";

1. Extraer el spec

Apunta spec from-react al código fuente del componente y a tu mapa de tokens. Recorre el type-checker de TypeScript para inferir props y analiza las variantes de cva y las cadenas de className en busca de 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 recoge la API pública del componente React: cualquier cosa que no quieras exponer en la versión web component, quítala aquí. tokens_used._unmapped enumera cada clase de Tailwind que el mapa no reconoció; cada una es o bien un estilo real que conviene tokenizar (añádelo al mapa y vuelve a ejecutarlo) o un estilo literal intencionado que se queda así.

3. Generar una implementación

Pasas la spec a generate y le indicas el stack de destino. Chiralkit compone un prompt a partir de la spec y, según registry/generator.config.json, lanza tu agente local (Claude Code, Cursor, Aider) o llama a un LLM a través del AI SDK.

El generador produce archivos fuente por stack en registry/shadcn-button/implementations/<stack>/. Revisa el resultado como cualquier otro código: la spec es el contrato; la implementación, 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, listos para commitear y editar como código propio.

ChiralFM