skip to content
▚shortwind
v0.1 · public beta

Let the model write @card, not forty classes.

Recipes are Tailwind shorthand an LLM writes instead of walls of utilities — expanded to byte-identical CSS at build. Same render, 41% fewer tokens.

Get started → Playground
Dashboard.tsx
model writes 55 tok 
<div class="@card">
  <p class="@eyebrow">Revenue</p>
  <h3 class="@heading-md">$48,120</h3>
  <p class="@muted">+12.5% MoM</p>
</div>
build emits 93 tok 
<div class="rounded-lg border border-border bg-card text-card-foreground p-4">
  <p class="font-mono text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">Revenue</p>
  <h3 class="text-xl font-semibold text-foreground">$48,120</h3>
  <p class="text-sm text-muted-foreground">+12.5% MoM</p>
</div>
both render identically · 41% fewer tokens · Opus 4.8

Revenue

$48,120

+12.5% MoM

  1. 01

    Own your recipes

    init copies a recipes/ folder you edit. Versioned, yours, no black box.

  2. 02

    Agents write @card

    A generated SKILL.md hands your coding agents the whole recipe palette.

  3. 03

    Build expands it

    Recipes compile to Tailwind. Identical CSS, nothing extra shipped to the browser.

25 families · 165 recipes · one init

text layout surface card button badge form navigation list table dialog tooltip feedback progress skeleton empty code icon media site menu segmented sheet stat switch
npx @shortwind/cli@beta init