How the kit works
Mock data, integration seams, and why nothing breaks.
The kit follows one rule: the UI is finished, the backend is swappable. Every screen renders real components against mock data, and every place a real service belongs is marked in code with the same greppable comment:
// 🔌 INTEGRATION: <Service> — see agent-skills/<skill>.mdFind every seam in the project at once:
grep -rn "🔌 INTEGRATION" app/The seam map
| Feature | Where the seam lives | Skill |
|---|---|---|
| Auth | app/lib/auth.tsx, login/register routes | wire-auth.md |
| Billing | app/routes/app/billing.tsx | wire-billing.md |
| AI chat | app/routes/app/chat.tsx | wire-ai-chat.md |
| AI search | app/routes/app/search.tsx | wire-ai-search.md |
| File uploads | app/routes/app/files.tsx | wire-file-uploads.md |
| Contact form | app/routes/contact.tsx | wire-contact-form.md |
| Newsletter | app/routes/app/settings.tsx | wire-newsletter.md |
| Notifications | app/lib/notifications.tsx | wire-notifications.md |
Why this never breaks
Each seam is independent. The UI already works on mock data, so wiring auth never touches billing, and an unwired screen keeps rendering happily. Ship with three features wired and the rest on mocks, then grow from there.
Ask your AI for the map
Say "what's mock?" or "what needs wiring?" and your agent reads
agent-skills/integration-points.md, which keeps the full table.