Fullstack Web App — Fullstack Web App Development Pipeline
An agent team collaborates to develop web apps through the pipeline of requirements → design → frontend → backend → testing → deployment.
Execution Mode
Agent Team — 5 agents communicate directly via SendMessage and cross-verify.
Agent Composition
| Agent |
File |
Role |
Type |
| architect |
.claude/agents/architect.md |
Requirements, architecture, DB, API design |
general-purpose |
| frontend-dev |
.claude/agents/frontend-dev.md |
React/Next.js frontend implementation |
general-purpose |
| backend-dev |
.claude/agents/backend-dev.md |
API, DB, auth, business logic |
general-purpose |
| qa-engineer |
.claude/agents/qa-engineer.md |
Test strategy, test code, code review |
general-purpose |
| devops-engineer |
.claude/agents/devops-engineer.md |
CI/CD, infrastructure, deployment, monitoring |
general-purpose |
Workflow
Phase 1: Preparation (performed directly by the orchestrator)
- Extract from user input:
- App Description: Purpose and core features of the web app to build
- Technology Stack (optional): Preferred frameworks/libraries
- Scale (optional): MVP/small/medium/large
- Existing Code (optional): Existing project to extend
- Deployment Platform (optional): Vercel/AWS/Docker, etc.
- Create
_workspace/ directory at the project root
- Organize input and save to
_workspace/00_input.md
- If existing code is provided, analyze it and adjust relevant phases
- Determine execution mode based on request scope (see "Scale-Based Modes" below)
Phase 2: Team Assembly and Execution
Assemble the team and assign tasks. Task dependencies are as follows:
| Order |
Task |
Owner |
Dependencies |
Deliverables |
| 1 |
Architecture Design |
architect |
None |
01_architecture.md, 02_api_spec.md, 03_db_schema.md |
| 2a |
Frontend Development |
frontend |
Task 1 |
src/ frontend code |
| 2b |
Backend Development |
backend |
Task 1 |
src/ backend code |
| 2c |
Deployment Setup |
devops |
Task 1 |
05_deploy_guide.md, CI/CD config |
| 3 |
Testing & Review |
qa |
Tasks 2a, 2b |
04_test_plan.md, 06_review_report.md, test code |
Tasks 2a (frontend), 2b (backend), and 2c (DevOps) run in parallel. All depend only on Task 1 (design).
Inter-team Communication Flow:
- architect completes → delivers component structure/routing to frontend, API/DB/auth to backend, infrastructure requirements to devops, functional requirements to qa
- frontend ↔ backend: Real-time communication during API integration (endpoint changes, error formats, etc.)
- devops completes → shares environment variables and deployment URLs with all
- qa reviews all code and tests. On 🔴 required fix: requests fix from the relevant developer → rework → re-verify (max 2 rounds)
Phase 3: Integration and Final Deliverables
Organize final deliverables based on the QA review:
- Verify all code and documents
- Confirm all 🔴 required fixes from the review have been addressed
- Report final summary to the user:
- Architecture Design —
_workspace/01_architecture.md
- API Specification —
_workspace/02_api_spec.md
- DB Schema —
_workspace/03_db_schema.md
- Test Plan —
_workspace/04_test_plan.md
- Deployment Guide —
_workspace/05_deploy_guide.md
- Review Report —
_workspace/06_review_report.md
- Source Code —
src/ directory
Scale-Based Modes
Adjust the agents deployed based on the scope of the user's request:
| Request Pattern |
Execution Mode |
Deployed Agents |
| "Build me a web app", "fullstack development" |
Full Pipeline |
All 5 |
| "Just build the API" |
Backend Mode |
architect + backend + qa |
| "Just build the frontend" (API exists) |
Frontend Mode |
architect + frontend + qa |
| "Refactor this code" |
Refactoring Mode |
architect + relevant developer + qa |
| "Just set up deployment" |
DevOps Mode |
devops alone |
Leveraging Existing Code: If the user provides existing code, the architect analyzes it to identify extension points and deploys only the necessary agents.
Data Transfer Protocol
| Strategy |
Method |
Purpose |
| File-based |
_workspace/ + src/ |
Design documents + source code |
| Message-based |
SendMessage |
API integration issues, code review, fix requests |
| Task-based |
TaskCreate/TaskUpdate |
Progress tracking, dependency management |
Error Handling
| Error Type |
Strategy |
| Ambiguous requirements |
Apply the most common CRUD pattern, document assumptions |
| Unspecified tech stack |
Apply default stack by scale (MVP: Next.js + SQLite) |
| Build errors |
Analyze error logs → relevant developer fixes → QA re-verifies |
| Agent failure |
Retry once → proceed without that deliverable if failed, note in review |
| 🔴 found in review |
Request fix from relevant developer → rework → re-verify (max 2 rounds) |
Test Scenarios
Normal Flow
Prompt: "Build me a to-do management web app. I need signup/login, to-do CRUD, and category classification features."
Expected Result:
- Architecture: Next.js + Prisma + SQLite, ERD (users, todos, categories), 10+ API specs
- Frontend: Login/signup pages, dashboard, to-do CRUD UI, responsive
- Backend: Auth API, CRUD API, input validation, error handling
- Tests: Auth + CRUD test scenarios, 80% coverage target
- Deployment: Vercel deployment guide, GitHub Actions CI/CD
Existing Code Flow
Prompt: "Add payment functionality to this Next.js project" + existing code
Expected Result:
- architect analyzes existing code, designs payment-related API/DB
- backend adds payment API, frontend adds payment UI
- qa tests payment flow
Error Flow
Prompt: "Build me a simple web app"
Expected Result:
- Ambiguous requirements → architect proposes a basic CRUD app (memos/notes)
- MVP scale default stack (Next.js + SQLite) applied
- Review report notes "assumptions applied due to vague requirements"
Agent Extension Skills
Extension skills that enhance each agent's domain expertise:
| Skill |
Target Agent |
Role |
component-patterns |
frontend-dev |
React/Next.js component patterns, state management strategies, folder structure |
api-security-checklist |
backend-dev |
OWASP Top 10, auth patterns, security headers, Rate Limiting |
1---2name: fullstack-webapp3description: A full development pipeline where an agent team collaborates to develop fullstack web apps through requirements analysis, design, frontend, backend, testing, and deployment. Use this skill for requests like 'build me a web app', 'web service development', 'SaaS development', 'CRUD app', 'build a dashboard', 'admin page', 'signup/login feature', 'REST API development', 'fullstack project', 'Next.js app', and other general web application development. Also supports feature additions and refactoring for existing codebases. However, mobile apps (React Native/Flutter), desktop apps (Electron), game development, and ML/AI model training are outside this skill's scope.4---56# Fullstack Web App — Fullstack Web App Development Pipeline78An agent team collaborates to develop web apps through the pipeline of requirements → design → frontend → backend → testing → deployment.910## Execution Mode1112**Agent Team** — 5 agents communicate directly via SendMessage and cross-verify.1314## Agent Composition1516| Agent | File | Role | Type |17|-------|------|------|------|18| architect | `.claude/agents/architect.md` | Requirements, architecture, DB, API design | general-purpose |19| frontend-dev | `.claude/agents/frontend-dev.md` | React/Next.js frontend implementation | general-purpose |20| backend-dev | `.claude/agents/backend-dev.md` | API, DB, auth, business logic | general-purpose |21| qa-engineer | `.claude/agents/qa-engineer.md` | Test strategy, test code, code review | general-purpose |22| devops-engineer | `.claude/agents/devops-engineer.md` | CI/CD, infrastructure, deployment, monitoring | general-purpose |2324## Workflow2526### Phase 1: Preparation (performed directly by the orchestrator)27281. Extract from user input:29 - **App Description**: Purpose and core features of the web app to build30 - **Technology Stack** (optional): Preferred frameworks/libraries31 - **Scale** (optional): MVP/small/medium/large32 - **Existing Code** (optional): Existing project to extend33 - **Deployment Platform** (optional): Vercel/AWS/Docker, etc.342. Create `_workspace/` directory at the project root353. Organize input and save to `_workspace/00_input.md`364. If existing code is provided, analyze it and adjust relevant phases375. Determine **execution mode** based on request scope (see "Scale-Based Modes" below)3839### Phase 2: Team Assembly and Execution4041Assemble the team and assign tasks. Task dependencies are as follows:4243| Order | Task | Owner | Dependencies | Deliverables |44|-------|------|-------|-------------|--------------|45| 1 | Architecture Design | architect | None | `01_architecture.md`, `02_api_spec.md`, `03_db_schema.md` |46| 2a | Frontend Development | frontend | Task 1 | `src/` frontend code |47| 2b | Backend Development | backend | Task 1 | `src/` backend code |48| 2c | Deployment Setup | devops | Task 1 | `05_deploy_guide.md`, CI/CD config |49| 3 | Testing & Review | qa | Tasks 2a, 2b | `04_test_plan.md`, `06_review_report.md`, test code |5051Tasks 2a (frontend), 2b (backend), and 2c (DevOps) run **in parallel**. All depend only on Task 1 (design).5253**Inter-team Communication Flow:**54- architect completes → delivers component structure/routing to frontend, API/DB/auth to backend, infrastructure requirements to devops, functional requirements to qa55- frontend ↔ backend: Real-time communication during API integration (endpoint changes, error formats, etc.)56- devops completes → shares environment variables and deployment URLs with all57- qa reviews all code and tests. On 🔴 required fix: requests fix from the relevant developer → rework → re-verify (max 2 rounds)5859### Phase 3: Integration and Final Deliverables6061Organize final deliverables based on the QA review:62631. Verify all code and documents642. Confirm all 🔴 required fixes from the review have been addressed653. Report final summary to the user:66 - Architecture Design — `_workspace/01_architecture.md`67 - API Specification — `_workspace/02_api_spec.md`68 - DB Schema — `_workspace/03_db_schema.md`69 - Test Plan — `_workspace/04_test_plan.md`70 - Deployment Guide — `_workspace/05_deploy_guide.md`71 - Review Report — `_workspace/06_review_report.md`72 - Source Code — `src/` directory7374## Scale-Based Modes7576Adjust the agents deployed based on the scope of the user's request:7778| Request Pattern | Execution Mode | Deployed Agents |79|----------------|---------------|----------------|80| "Build me a web app", "fullstack development" | **Full Pipeline** | All 5 |81| "Just build the API" | **Backend Mode** | architect + backend + qa |82| "Just build the frontend" (API exists) | **Frontend Mode** | architect + frontend + qa |83| "Refactor this code" | **Refactoring Mode** | architect + relevant developer + qa |84| "Just set up deployment" | **DevOps Mode** | devops alone |8586**Leveraging Existing Code**: If the user provides existing code, the architect analyzes it to identify extension points and deploys only the necessary agents.8788## Data Transfer Protocol8990| Strategy | Method | Purpose |91|----------|--------|---------|92| File-based | `_workspace/` + `src/` | Design documents + source code |93| Message-based | SendMessage | API integration issues, code review, fix requests |94| Task-based | TaskCreate/TaskUpdate | Progress tracking, dependency management |9596## Error Handling9798| Error Type | Strategy |99|-----------|----------|100| Ambiguous requirements | Apply the most common CRUD pattern, document assumptions |101| Unspecified tech stack | Apply default stack by scale (MVP: Next.js + SQLite) |102| Build errors | Analyze error logs → relevant developer fixes → QA re-verifies |103| Agent failure | Retry once → proceed without that deliverable if failed, note in review |104| 🔴 found in review | Request fix from relevant developer → rework → re-verify (max 2 rounds) |105106## Test Scenarios107108### Normal Flow109**Prompt**: "Build me a to-do management web app. I need signup/login, to-do CRUD, and category classification features."110**Expected Result**:111- Architecture: Next.js + Prisma + SQLite, ERD (users, todos, categories), 10+ API specs112- Frontend: Login/signup pages, dashboard, to-do CRUD UI, responsive113- Backend: Auth API, CRUD API, input validation, error handling114- Tests: Auth + CRUD test scenarios, 80% coverage target115- Deployment: Vercel deployment guide, GitHub Actions CI/CD116117### Existing Code Flow118**Prompt**: "Add payment functionality to this Next.js project" + existing code119**Expected Result**:120- architect analyzes existing code, designs payment-related API/DB121- backend adds payment API, frontend adds payment UI122- qa tests payment flow123124### Error Flow125**Prompt**: "Build me a simple web app"126**Expected Result**:127- Ambiguous requirements → architect proposes a basic CRUD app (memos/notes)128- MVP scale default stack (Next.js + SQLite) applied129- Review report notes "assumptions applied due to vague requirements"130131## Agent Extension Skills132133Extension skills that enhance each agent's domain expertise:134135| Skill | Target Agent | Role |136|-------|-------------|------|137| `component-patterns` | frontend-dev | React/Next.js component patterns, state management strategies, folder structure |138| `api-security-checklist` | backend-dev | OWASP Top 10, auth patterns, security headers, Rate Limiting |
revfactory