What it does
Backend Design reads your existing frontend (React, Vue, Next.js, Svelte, Angular, or 9+ other frameworks) and automatically scaffolds a production-ready backend that matches it.
The skill inventories every screen, component, form, button, and network call in parallel, then synthesizes a complete backend design with entities, relationships, endpoints, and auth models — each decision explained and open to your approval before code generation.
How it works
- Inventory — Parallel agents scan your frontend, auto-detecting the framework and extracting screens, components, forms, and API calls as structured JSON state
- Synthesize — A synthesis agent infers database entities, FK relationships, endpoints, and auth models from the UI; recommends answers to product-intent questions
- Validate — Checks invariants: every foreign key resolves, every button has a handler, every entity has a primary key
- Detect gaps — Identifies missing environment variables, unwired buttons, incomplete auth flows; writes prescriptive fix instructions
- Review & scaffold — Shows you a human-readable design doc; once approved, generates a runnable backend in your chosen stack
Supported stacks
Pick one at setup: Express + Prisma, Fastify + Prisma, Hono + Drizzle, Next.js API routes, FastAPI + SQLAlchemy, or schema-only (Mermaid).
Use cases
- Ship a full-stack app without context-switching between frontend and backend codebases
- Enforce API contract consistency — the backend is always wired to what the UI actually calls
- Onboard new backends to existing frontends without reverse-engineering
- Detect orphan buttons and unwired forms before they reach production