Chiralkit

Migratio shadcn

Componentes shadcn/ui in applicatione React habes. Eosdem componentes vis in templates Django, in HTML simplici aut in quolibet stack quem Chiralkit petit — sine manu rescribendo. Haec est via.

Praerequisita

Tabula extractori indicat quas classes Tailwind ut tokens tractet et quas ut stilum non relatum. Forma minima:

{
  "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. Tokens tua migra

Primum ck tokens migrate exsequere. Nullam AI, nullam clavem API requirit: globals.css tuum ex shadcn per components.json legit et ck/chiraltokens.css scribit, coloribus, radio et litteris tuis ad tokens ChiralUI relatis. Deinde eum fasciculum post @chiralkit/tokens/tokens.css importa.

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

1. Spec extrahe

Spec from-react ad fontem componentis et ad tabulam tokens tuam dirige. Per inspectorem generum TypeScript ambulat ut props deducat, et variantes cva atque chordas className pro usu tokens perscrutatur.

Egesta (excerptum):

{
  "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. Spec recense

Duo campi iteratam lectionem merentur. props API publicam componentis React capit — quidquid in versione web-component exponi non vis, hic remove. tokens_used._unmapped omnem classem Tailwind enumerat quam tabula non agnovit; quaeque aut stilus verus est quem in token vertere debes (eum tabulae adde et iterum exsequere) aut stilus litteralis consultus qui ut est manet.

3. Effectionem gene

Spec mandato generate praebe et dic quem stack petat. Chiralkit prompt ex spec componit et aut agentem tuum localem (Claude Code, Cursor, Aider) excitat aut LLM per AI SDK vocat, secundum registry/generator.config.json.

Generator fasciculos fontis pro quoque stack sub registry/shadcn-button/implementations/<stack>/ producit. Egesta ut quemlibet codicem recense — spec est contractus, effectio est una eius interpretatio.

4. In incepto tuo utere

Cum modulus in registry habitat, eo uti est via add solita — ut cuiuslibet moduli Chiralkit.

Fasciculi in inceptum tuum veniunt, ad commit parati et ut tui mutandi.

ChiralFM