This guide shows how to set up a reusable boilerplate that matches your stack and design system so Fusion can generate clean, idiomatic PRs. Keep it fast, opinionated, and rich with examples. The more real code you include, the better the agent will align.
- Choose framework, language, and build tool (React or Next, TypeScript, Vite or Next build).
- Install your design system as an npm package and index your design system.
- Create a real app shell with header, nav, and router
- Write concise custom instructions that tell the agent exactly how to code here.
- Most important: add as many examples of pages and components as possible.
Pick the tools your team already uses in production. Fusion does not force a stack. Prefer fast feedback and low friction so iteration is quick.
For example, your stack could be:
- Framework: React
- Language: TypeScript
- Build tool: Vite
- Styling: Tailwind, CSS Modules, styled components, or your team standard
The goal is to make sure generated code matches your production stack so generated code can be utilized easily without major rewrites.
Install your design system as a dependency and run an index of your design system so it can be used and the AI is informed about how to use it correctly.
{
"dependencies": {
"@acme/ui": "1.0.0"
}
}Always provide a real application shell so generated pages have a home. Include a header, navigation, and a router. Add at least two example pages so the agent understands how to register routes and compose layouts.
// src/app/App.tsx
import { Outlet, NavLink } from "react-router-dom";
export function App() {
return (
<div className="app">
<header className="header">
<h1>Acme App</h1>
<nav>
<NavLink to="/">Home</NavLink>
<NavLink to="/examples">Examples</NavLink>
</nav>
</header>
<main className="main">
<Outlet />
</main>
</div>
);
}
Include the libraries you expect the agent to use, and wire them into the root. When the agent sees the pattern, like for data fetching or state management, it will reuse it.
import { useQuery } from '@tanstack/react-query'
const { data, error } = useQuery(...);Be explicit. Brief, firm rules outperform vague guidance. Place these in your project in a .builderrules file so every task follows them.
Always
1. Import UI from src/design-system/index.ts
2. Use @tanstack/react-query for data fetching
3. Put shared UI in src/components and feature code in src/features
4. Add routes under src/routes and register them in src/app/router.tsx
5. Use tailwind for styling
6. Use accessible markup and proper labels
7. Use helpers in src/lib/api for network calls or stub with a TODO
8. Copy patterns from src/examples when in doubt
Return only changed files with complete content blocks.AI learns from high quality examples. Provide example pages in your template app so the AI can see real world patterns it should follow.
Suggested examples:
- Full example pages and components
- Basic interactions like forms, tables, or modals
- Any best practice patterns like responsive grids or common layouts
To reference additional repos for examples, connect them in Builder and add them to the project and you can add instructions about how to reference the other repositories (like what to look at and when). See adding additional repositories.
- Keep examples realistic and close to production code
- Update examples as your patterns evolve so the agent stays aligned
- When it comes to examples, the more the merrier, wether in this repo or in an additional repo