fullstack-webapp: Скилл разработки веб-приложений

--- name: fullstack-webapp description: "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." --- # 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) 1. 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. 2. Create `_workspace/` directory at the project root 3. Organize input and save to `_workspace/00_input.md` 4. If existing code is provided, analyze it and adjust relevant phases 5. 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: 1. Verify all code and documents 2. Confirm all 🔴 required fixes from the review have been addressed 3. 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 |