Handbook
The IR is framework-agnostic. A projection is a pure function IR → files for a chosen markup and style system. One design, many targets — same structure, different surface syntax.
| tailwind | css | css-in-js | less / scss | style (inline) | |
|---|---|---|---|---|---|
| react | ✓ | ✓ | ✓ | ✓ | — |
| vue | ✓ | ✓ | ✓ | ✓ | — |
| svelte | ✓ | ✓ | — | — | — |
| angular | ✓ | ✓ | — | — | — |
| html | ✓ | ✓ | — | — | ✓ (inline only) |
Defaults: markup=react, style=tailwind. HTML may use split: true for a separate stylesheet.
| Concern | Example |
|---|---|
| Loop syntax | React .map · Vue v-for · HTML unroll |
| Local components | React function Card · Vue defineComponent |
| Slots | React JSX prop · Vue <template #icon> |
| Class vs style object | Tailwind classes · CSS modules / style blocks · CSS-in-JS |
After structure argmin is full, remaining quality work lives in a
projection dictionary: hole roles (title, price, avatar…),
token profiles, scale tables. Rules are tables with veto conditions — not free-form LLM naming.
react + tailwind (default path)react + css or css-in-jshtml + tailwind or stylemarkup accordinglySee the full field tables in Markup & style.