Comparison
Windcraft vs vanilla-extract
vanilla-extract is a strong styling foundation — type-safe CSS in TypeScript with theme contracts checked at build time. It makes your theme values real and typed. What it does not do is reach your AI tools, check code outside the theme API, or describe how components and pages should be composed. Windcraft is the layer above.
vanilla-extract solves styling: typed, zero-runtime CSS with theme contracts the compiler checks. It is excellent at that and Windcraft does not replace it. But its guarantees stop at its own API — TypeScript will catch a wrong theme reference, not a developer or AI tool hard-coding a hex in an inline style or a className elsewhere. Windcraft is styling-tech-agnostic: it serves tokens to AI over MCP, flags off-system values wherever they appear, and adds the contracts and patterns vanilla-extract has no concept of.
How they compare
| Aspect | vanilla-extract | Windcraft |
|---|---|---|
| Layer | Type-safe styling and theming in TS | Design coherence above any styling tech |
| Delivery to AI tools | None — the model never reads your theme | Tokens and contracts served over MCP |
| Enforcement reach | Type errors inside the theme API only | Off-system values flagged anywhere |
| Scope | CSS-in-TS | Tokens + contracts + patterns + cross-platform |
When vanilla-extract is the right call
vanilla-extract wins when you want type-safe, zero-runtime CSS with theme contracts enforced by the compiler — a genuinely good styling foundation. Windcraft does not compete with it; it sits on top. Use vanilla-extract for how you author styles, and Windcraft to feed AI the right values, catch the ones that slip outside the theme API, and govern components and pages. The styling layer and the coherence layer are different problems.
FAQ
- Does Windcraft replace vanilla-extract?
- No. vanilla-extract is your styling layer; Windcraft is the coherence layer above it. You can keep authoring styles in vanilla-extract and let Windcraft handle AI delivery, enforcement, contracts, and patterns.
- But vanilla-extract is already type-safe — isn’t that enforcement?
- Within its API, yes. TypeScript catches a wrong reference to your theme. It cannot catch a hard-coded hex in an inline style, a className built elsewhere, or an AI tool bypassing the theme entirely. Windcraft’s analyzer checks the code regardless of how the style was authored.
- Can I use both?
- Yes. vanilla-extract for typed styling, Windcraft for design coherence across your tools and pages. They operate at different layers and stack cleanly.