Migrating existing apps

For apps you inherited, vibe-coded tools, or anything built on another UI library.

Brandrail recognises Angular Material, MUI, Bootstrap (including server templates), Ant Design, Chakra UI and PrimeNG.

1. See what's left

npx brandrail migrate

Shows how much of the app is on the design system, usages left per library, and the files with the most work. Run it again any time to see progress.

2. Let the agent do the work

brandrail connect installs a brandrail-migrate skill and a brandrail-migrator agent for Claude Code. Ask:

Migrate src/app/orders to the design system.

The agent:

works in small batches, a few files at a time;
maps each library piece to your component, in Angular, Vue, React or HTML form;
keeps behaviour identical: events, validation, accessibility;
re-checks every file it touched and fixes what the Checker flags.

Other AI tools get the same instructions through AGENTS.md and the get_migration_map MCP tool.

Review each batch like any other pull request. The agent changes how things look, not what they do, but you know your app.

3. Report progress

npx brandrail report

Writes a shareable HTML handover report with paths and counts, never code. Repos → Handover report in the dashboard covers every connected repo at once; print it to PDF for leadership.

4. Stop new usages

Add the old library to forbiddenImports in brandrail.config.json and the Checker will fail pull requests that add new usages, while the existing ones are migrated.