areas/software/full-stack/skills/app-builder/SKILL.md
Orchestrate full-stack application scaffolding — determine project type, select tech stack, coordinate agents, scaffold structure.
npx skillsauth add sawrus/agent-guides app-builderInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Analyzes requests, selects tech stack, scaffolds structure, coordinates agents.
| Keywords | Project Type | Default Stack | |---|---|---| | dashboard, admin, crud, internal tool | Full-stack web | Next.js + Prisma + Postgres | | SaaS, subscription, billing | SaaS web | Next.js + Stripe + Clerk + Prisma | | API, microservice, backend | REST API | FastAPI (Python) or Express (Node) | | mobile app, iOS, Android | Mobile | React Native + Expo | | CLI, command line, terminal | CLI tool | Node.js + Commander or Python + Typer | | monorepo, multiple apps | Monorepo | Turborepo + pnpm |
Frontend: Next.js 15 (App Router) + TypeScript strict + Tailwind + shadcn/ui
Backend: Next.js Server Actions (collocated) or FastAPI (standalone API)
Database: PostgreSQL via Prisma (JS) or SQLAlchemy async (Python)
Auth: Clerk (SaaS/Web) or custom JWT (API-only)
Testing: Vitest + Playwright (JS) | pytest + Playwright (Python)
Deploy: Vercel (Next.js) | Railway/Render (FastAPI)
src/
├── app/ # Routes only — thin layer
│ ├── layout.tsx
│ ├── (auth)/ # Route group — auth pages
│ ├── (dashboard)/ # Route group — protected pages
│ └── api/[resource]/route.ts
│
├── features/ # Feature-based modules (primary work happens here)
│ ├── orders/
│ │ ├── components/ # UI — OrderCard, OrderList
│ │ ├── actions.ts # Server Actions — createOrder, cancelOrder
│ │ ├── queries.ts # Data fetching — getOrder, listOrders
│ │ └── types.ts
│ └── auth/
│ ├── components/
│ ├── actions.ts
│ └── queries.ts
│
├── shared/
│ ├── components/ui/ # Reusable: Button, Input, Card
│ └── lib/ # Utilities, formatters, constants
│
└── server/ # Server-only (never imported in client components)
├── db/ # Prisma client
├── auth/ # Auth config
└── services/ # External API integrations
src/
├── api/
│ ├── v1/
│ │ ├── endpoints/ # Thin: validation, call service, return response
│ │ │ ├── orders.py
│ │ │ └── users.py
│ │ └── router.py
│ └── deps.py # FastAPI dependencies (get_db, get_current_user)
│
├── services/ # Business logic — no DB imports
│ ├── order_service.py
│ └── user_service.py
│
├── repositories/ # DB access only — no business logic
│ ├── order_repo.py
│ └── user_repo.py
│
├── models/ # SQLAlchemy ORM models
├── schemas/ # Pydantic I/O models
└── core/
├── config.py # Pydantic BaseSettings
├── database.py # Async engine + session factory
└── security.py # JWT, password hashing
@project-planner → decompose request into tasks + dependency graph
@backend-dev → implement API, DB models, services, repositories
@frontend-dev → implement pages, components, server actions
@qa-engineer → write unit tests + E2E tests
@team-lead → review, check architecture compliance, approve
Sequential for new projects. Parallel only when tasks are genuinely independent (frontend + backend with agreed contract).
1. Detect project type from request keywords
2. Select tech stack (use defaults; note deviations with justification)
3. Create implementation_plan.md with:
- Tech stack chosen
- Directory structure
- Task list with dependency order
- Agent assignments per task
4. Present plan to user → wait for approval
5. Execute: @backend-dev first (establish contracts) → @frontend-dev → @qa-engineer
6. @team-lead final review: architecture compliance, test coverage, README complete
README.md # Setup, env vars, make targets
.env.example # All required vars with safe placeholder values
Makefile # install, dev, test, lint, fmt targets
.gitignore # Language-appropriate ignores
.pre-commit-config.yaml # Hooks: format, lint, unit tests
testing
QA Expert for writing E2E tests, test scenarios, test plans, and ensuring test coverage quality.
development
Expert UI/UX design intelligence for creating distinctive, high-craft, and mobile-first interfaces. Focuses on premium aesthetics, touch-first ergonomics, and Flutter performance.
development
Code Review Expert for static analysis, security auditing, architecture review, and ensuring code quality standards.
development
Babysit a GitHub pull request after creation by continuously polling review comments, CI checks/workflow runs, and mergeability state until the PR is merged/closed or user help is required. Diagnose failures, retry likely flaky failures up to 3 times, auto-fix/push branch-related issues when appropriate, and keep watching open PRs so fresh review feedback is surfaced promptly. Use when the user asks Codex to monitor a PR, watch CI, handle review comments, or keep an eye on failures and feedback on an open PR.