Migration guides
Adopting Windcraft into an existing project.
Windcraft is opinionated — it ships the design system, you don't bring your own. That means most "migration" is actually:
- Run
npx windcraft initin the repo - Let it overwrite
tailwind.config.ts,app/globals.css, the RN theme, andwindcraft.types.d.ts - Replace any hand-rolled tokens (raw hex, ad-hoc spacing scales) with token references
- Run
windcraft checkand clean up the violations
ShipFast / Makerkit / SaaS starter
These typically ship with their own Tailwind config and a colour palette.
After init, delete the starter's palette block and let Windcraft's
config drive Tailwind. Keep route-level layouts and feature code as-is —
Windcraft never touches your application logic.
Existing Tailwind project
Same flow. The riskiest change is the tailwind.config.ts — review it
before merging the first sync PR. CSS variables in app/globals.css
land inside a guarded block (look for the windcraft-vars markers) so
your other CSS stays untouched.
React Native / Expo
init writes theme.ts next to your existing styles. Swap your
hand-written theme imports to import { theme } from './theme'. The
mirror engine (POST /projects/:id/mirror or the MCP tool) helps when
porting individual components from web.
Dropping in mid-project
Windcraft does not require a clean slate. The static analyzer catches
the worst offences (no-hardcoded-color, no-arbitrary-spacing) so you
can prioritise fixes without grepping the whole repo. Use exceptions
in .windcraft/config.json to silence anything you can't fix yet.