| name | full-stack |
| description | Full-stack development skill that coordinates backend and frontend changes together. Use for features that span both layers: new API endpoint + UI, data model changes, end-to-end flows.
|
Full-Stack Development
Use for features that span both FastAPI backend and Next.js frontend.
Architecture
- Backend: FastAPI + Python 3.13+, TinyDB, LiteLLM
- Frontend: Next.js 16 + React 19, Tailwind CSS v4, Swiss International Style
- API: REST endpoints at
/api/v1/*
Workflow
1. Design the API contract first
Route: POST /api/v1/my-feature
Request: { field: string, ... }
Response: { id: string, result: ... }
2. Backend implementation
- Schema in
apps/backend/app/schemas/
- Service in
apps/backend/app/services/
- Router in
apps/backend/app/routers/
- Register router in
apps/backend/app/main.py
3. Frontend implementation
- API call in
apps/frontend/lib/
- Component in
apps/frontend/components/
- Page integration in
apps/frontend/app/
4. Verify end-to-end
- Backend serves correct data
- Frontend displays correctly with Swiss style
- Error states handled on both sides
Non-Negotiable Rules
Backend
- Type hints on all functions
copy.deepcopy() for mutable defaults- Log errors server-side, generic messages to clients
- API keys via
api_key= parameter
Frontend
- Swiss International Style (
rounded-none, hard shadows, Swiss palette)
npm run lint && npm run format- Enter key handling on textareas
Promise.all() for independent fetches
Key Files
| Layer | Entry Point |
|---|
| Backend startup | apps/backend/app/main.py |
| Backend config | apps/backend/app/config.py |
| Frontend pages | apps/frontend/app/ |
| API client | apps/frontend/lib/ |
References
- API contracts:
docs/agent/apis/front-end-apis.md
- Backend guide:
docs/agent/architecture/backend-guide.md
- Frontend workflow:
docs/agent/architecture/frontend-workflow.md
- Style guide:
docs/agent/design/style-guide.md
