Lovable

Lovable cannot use an OTF kit as its repository. Its docs say connecting a project creates a new GitHub repository, and that an existing repository cannot be imported. So the kit stays in your own repo, where you edit it in Cursor or Claude Code. To bring its conventions into Lovable, paste a short section into the project's knowledge field.

We checked this against Lovable's docs on 13 October 2026. The docs show no last-updated date, so check them again before you rely on the details.

What Lovable does with GitHubCopy Anchor Link

• Connecting a Lovable project creates a new GitHub repository and starts two-way sync. Edits in Lovable are committed to that repository, and commits pushed to the synced branch come back into the project.
• Lovable syncs one branch at a time. By default that is the repository's default branch, usually main.
• Reconnecting creates a new repository. The docs also list reconnecting to the same repository as a limitation.
• Import runs one way. The docs say: "Export only. You can't import an existing repository into Lovable."

Sources for this section: GitHub integration and Git sync overview.

Where project instructions goCopy Anchor Link

Lovable's knowledge page says the following, as checked on 13 October 2026:

• Project knowledge is a text field for one project. Enter it under Project settings → Knowledge.
• The field holds up to 10,000 characters.
• When you send a message, Lovable reads the project knowledge, the workspace knowledge and the project code before it generates edits.

The same page says that instruction files such as AGENTS.md or CLAUDE.md in a connected GitHub repository can guide the Lovable agent, and that a root-level AGENTS.md is always read. We have not tested CLAUDE.md in a Lovable project, so do not rely on it. Paste the conventions into project knowledge instead.

Source: Project knowledge.

What each kit shipsCopy Anchor Link

• The SaaS Dashboard, Fitness and Arcade kits each ship a CLAUDE.md and a .cursorrules file at the kit root.
• No kit ships a lovable.md file.
• Each kit also ships an AGENTS.md at the kit root.

The kit CLAUDE.md files run from about 14 to 16 KB, which is over the 10,000-character limit. Paste a section, not the whole file. The excerpt below comes from the SaaS Dashboard kit. The Fitness and Arcade files have their own sections and paths, so pick from those the same way.

Paste a section into project knowledgeCopy Anchor Link

This excerpt covers adding a screen, mock data, and coding conventions. It leaves out the demo login. The paths refer to the kit's layout. A Lovable project has its own file layout, so check each path before the agent uses it.

## Adding a new screen

1. **Page** — `src/pages/home/<page-name>.tsx` — wrap content in `<FadeIn>` + `<Page>`/`<PageHeader>`/`<PageBody>` from `@otfdashkit/ui`
2. **Route** — in `src/main.tsx`, add a lazy `import` + `createRoute({ path: '<page-name>', getParentRoute: () => homeLayoutRoute, component: lazy(() => import('./pages/home/<page-name>')) })`, then add it to `homeLayoutRoute.addChildren([...])`
3. **Sidebar** — add an `<AppSidebar.Item>` to `src/components/Sidebar.tsx` (use a Lucide icon)
4. **Hotkey** (optional) — add a `useEffect` keydown listener inside the page that calls `navigate({ to: '/home/<page-name>' })`

Every page should have a loading `<Skeleton>`, an `<EmptyState>` for zero data, and a `<FadeIn>` mount.

## Mock data must be generic

Kits are templates. Use fictional names (Sarah Chen, Alex Rivera, …) and generic SaaS labels. **Never check in** the kit author's real name, real teammates, or real-world internal command names.

## Coding conventions

- No comments in code unless explaining a non-obvious *why*.
- Strict TypeScript — no `any`, no `as` casts unless documented.
- Functional components everywhere. Use `forwardRef` only on DOM-leaf components.
- `data-slot` attribute on every custom component for design-system tooling.
- Tailwind token classes only — no inline `style={{ background: '#...' }}`.
- Generic mock data only (no real names).

Where to start insteadCopy Anchor Link

Open the kit in Cursor or Claude Code, where its CLAUDE.md and .cursorrules are read from the repo. The getting started guide has the steps, and each kit has a live demo you can click through first.

What we did not checkCopy Anchor Link

• We did not create a Lovable project from a kit, and we did not run an agent edit against these paths.
• Lovable's FAQ pages seem to describe choosing an existing repository when you connect. We did not confirm that path, and the docs above say import is not supported. Follow the docs.
• The docs show no last-updated date.