⚙️ Phase 2 Playbook — Foundation & Scaffolding agent
> Duration: 3-5 days | Agents: 6 | Gate Keepers: DevOps Automator + Evidence Collector
by msitarzewski·MIT license·★ 154,023 Stars on the repo·GitHub ↗
Files of ⚙️ Phase 2 Playbook — Foundation & Scaffolding
msitarzewski/
phase-2-foundation.md
Show the full text279 lines
⚙️ Phase 2 Playbook — Foundation & Scaffolding
Duration: 3-5 days | Agents: 6 | Gate Keepers: DevOps Automator + Evidence Collector
Objective
Build the technical and operational foundation that all subsequent work depends on. Get the skeleton standing before adding muscle. After this phase, every developer has a working environment, a deployable pipeline, and a design system to build with.
Pre-Conditions
- Phase 1 Quality Gate passed (Architecture Package approved)
- Phase 1 Handoff Package received
- All architecture documents finalized
Agent Activation Sequence
Workstream A: Infrastructure (Day 1-3, Parallel)
🚀 DevOps Automator — CI/CD Pipeline + Infrastructure
Activate DevOps Automator for infrastructure setup on [PROJECT].
Input: Backend Architect system architecture + deployment requirements
Deliverables required:
1. CI/CD Pipeline (GitHub Actions / GitLab CI)
- Security scanning stage
- Automated testing stage
- Build and containerization stage
- Deployment stage (blue-green or canary)
- Automated rollback capability
2. Infrastructure as Code
- Environment provisioning (dev, staging, production)
- Container orchestration setup
- Network and security configuration
3. Environment Configuration
- Secrets management
- Environment variable management
- Multi-environment parity
Files to create:
- .github/workflows/ci-cd.yml (or equivalent)
- infrastructure/ (Terraform/CDK templates)
- docker-compose.yml
- Dockerfile(s)
Format: Working CI/CD pipeline with IaC templates
Timeline: 3 days
🏗️ Infrastructure Maintainer — Cloud Infrastructure + Monitoring
Activate Infrastructure Maintainer for monitoring setup on [PROJECT].
Input: DevOps Automator infrastructure + Backend Architect architecture
Deliverables required:
1. Cloud Resource Provisioning
- Compute, storage, networking resources
- Auto-scaling configuration
- Load balancer setup
2. Monitoring Stack
- Application metrics (Prometheus/DataDog)
- Infrastructure metrics
- Custom dashboards (Grafana)
3. Logging and Alerting
- Centralized log aggregation
- Alert rules for critical thresholds
- On-call notification setup
4. Security Hardening
- Firewall rules
- SSL/TLS configuration
- Access control policies
Format: Infrastructure Readiness Report with dashboard access
Timeline: 3 days
⚙️ Studio Operations — Process Setup
Activate Studio Operations for process setup on [PROJECT].
Input: Sprint Prioritizer plan + Project Shepherd coordination needs
Deliverables required:
1. Git Workflow
- Branch strategy (GitFlow / trunk-based)
- PR review process
- Merge policies
2. Communication Channels
- Team channels setup
- Notification routing
- Status update cadence
3. Documentation Templates
- PR template
- Issue template
- Decision log template
4. Collaboration Tools
- Project board setup
- Sprint tracking configuration
Format: Operations Playbook
Timeline: 2 days
Workstream B: Application Foundation (Day 1-4, Parallel)
🎨 Frontend Developer — Project Scaffolding + Component Library
Activate Frontend Developer for project scaffolding on [PROJECT].
Input: UX Architect CSS Design System + Brand Guardian identity
Deliverables required:
1. Project Scaffolding
- Framework setup (React/Vue/Angular per architecture)
- TypeScript configuration
- Build tooling (Vite/Webpack/Next.js)
- Testing framework (Jest/Vitest + Testing Library)
2. Design System Implementation
- CSS design tokens from UX Architect
- Base component library (Button, Input, Card, Layout)
- Theme system (light/dark/system toggle)
- Responsive utilities
3. Application Shell
- Routing setup
- Layout components (Header, Footer, Sidebar)
- Error boundary implementation
- Loading states
Files to create:
- src/ (application source)
- src/components/ (component library)
- src/styles/ (design tokens)
- src/layouts/ (layout components)
Format: Working application skeleton with component library
Timeline: 3 days
🏗️ Backend Architect — Database + API Foundation
Activate Backend Architect for API foundation on [PROJECT].
Input: System Architecture Specification + Database Schema Design
Deliverables required:
1. Database Setup
- Schema deployment (migrations)
- Index creation
- Seed data for development
- Connection pooling configuration
2. API Scaffold
- Framework setup (Express/FastAPI/etc.)
- Route structure matching architecture
- Middleware stack (auth, validation, error handling, CORS)
- Health check endpoints
3. Authentication System
- Auth provider integration
- JWT/session management
- Role-based access control scaffold
4. Service Communication
- API versioning setup
- Request/response serialization
- Error response standardization
Files to create:
- api/ or server/ (backend source)
- migrations/ (database migrations)
- docs/api-spec.yaml (OpenAPI specification)
Format: Working API scaffold with database and auth
Timeline: 4 days
🏛️ UX Architect — CSS System Implementation
Activate UX Architect for CSS system implementation on [PROJECT].
Input: Brand Guardian identity + own Phase 1 CSS Design System spec
Deliverables required:
1. Design Tokens Implementation
- CSS custom properties (colors, typography, spacing)
- Brand color palette with semantic naming
- Typography scale with responsive adjustments
2. Layout System
- Container system (responsive breakpoints)
- Grid patterns (2-col, 3-col, sidebar)
- Flexbox utilities
3. Theme System
- Light theme variables
- Dark theme variables
- System preference detection
- Theme toggle component
- Smooth transition between themes
Files to create/update:
- css/design-system.css (or equivalent in framework)
- css/layout.css
- css/components.css
- js/theme-manager.js
Format: Implemented CSS design system with theme toggle
Timeline: 2 days
Verification Checkpoint (Day 4-5)
Evidence Collector Verification
Activate Evidence Collector for Phase 2 foundation verification.
Verify the following with screenshot evidence:
1. CI/CD pipeline executes successfully (show pipeline logs)
2. Application skeleton loads in browser (desktop screenshot)
3. Application skeleton loads on mobile (mobile screenshot)
4. Theme toggle works (light + dark screenshots)
5. API health check responds (curl output)
6. Database is accessible (migration status)
7. Monitoring dashboards are active (dashboard screenshot)
8. Component library renders (component demo page)
Format: Evidence Package with screenshots
Verdict: PASS / FAIL with specific issues
Quality Gate Checklist
| # | Criterion | Evidence Source | Status |
|---|---|---|---|
| 1 | CI/CD pipeline builds, tests, and deploys | Pipeline execution logs | ☐ |
| 2 | Database schema deployed with all tables/indexes | Migration success output | ☐ |
| 3 | API scaffold responding on health check | curl response evidence | ☐ |
| 4 | Frontend skeleton renders in browser | Evidence Collector screenshots | ☐ |
| 5 | Monitoring dashboards showing metrics | Dashboard screenshots | ☐ |
| 6 | Design system tokens implemented | Component library demo | ☐ |
| 7 | Theme toggle functional (light/dark/system) | Before/after screenshots | ☐ |
| 8 | Git workflow and processes documented | Studio Operations playbook | ☐ |
Gate Decision
Dual sign-off required: DevOps Automator (infrastructure) + Evidence Collector (visual)
- PASS: Working skeleton with full DevOps pipeline → Phase 3 activation
- FAIL: Specific infrastructure or application issues → Fix and re-verify
Handoff to Phase 3
## Phase 2 → Phase 3 Handoff Package
### For all Developer Agents:
- Working CI/CD pipeline (auto-deploys on merge)
- Design system tokens and component library
- API scaffold with auth and health checks
- Database with schema and seed data
- Git workflow and PR process
### For Evidence Collector (ongoing QA):
- Application URLs (dev, staging)
- Screenshot capture methodology
- Component library reference
- Brand guidelines for visual verification
### For Agents Orchestrator (Dev↔QA loop management):
- Sprint Prioritizer backlog (from Phase 1)
- Task list with acceptance criteria (from Phase 1)
- Agent assignment matrix (from NEXUS strategy)
- Quality thresholds for each task type
### Environment Access:
- Dev environment: [URL]
- Staging environment: [URL]
- Monitoring dashboard: [URL]
- CI/CD pipeline: [URL]
- API documentation: [URL]
Phase 2 is complete when the skeleton application is running, the CI/CD pipeline is operational, and the Evidence Collector has verified all foundation elements with screenshots.
| 1 | # ⚙️ Phase 2 Playbook — Foundation & Scaffolding |
| 2 | |
| 3 | > **Duration**: 3-5 days | **Agents**: 6 | **Gate Keepers**: DevOps Automator + Evidence Collector |
| 4 | |
| 5 | |
| 6 | |
| 7 | ## Objective |
| 8 | |
| 9 | Build the technical and operational foundation that all subsequent work depends on. Get the skeleton standing before adding muscle. After this phase, every developer has a working environment, a deployable pipeline, and a design system to build with. |
| 10 | |
| 11 | ## Pre-Conditions |
| 12 | |
| 13 | [ ] Phase 1 Quality Gate passed (Architecture Package approved) |
| 14 | [ ] Phase 1 Handoff Package received |
| 15 | [ ] All architecture documents finalized |
| 16 | |
| 17 | ## Agent Activation Sequence |
| 18 | |
| 19 | ### Workstream A: Infrastructure (Day 1-3, Parallel) |
| 20 | |
| 21 | #### 🚀 DevOps Automator — CI/CD Pipeline + Infrastructure |
| 22 | |
| 23 | Activate DevOps Automator for infrastructure setup on [PROJECT]. |
| 24 | |
| 25 | Input: Backend Architect system architecture + deployment requirements |
| 26 | Deliverables required: |
| 27 | 1. CI/CD Pipeline (GitHub Actions / GitLab CI) |
| 28 | - Security scanning stage |
| 29 | - Automated testing stage |
| 30 | - Build and containerization stage |
| 31 | - Deployment stage (blue-green or canary) |
| 32 | - Automated rollback capability |
| 33 | 2. Infrastructure as Code |
| 34 | - Environment provisioning (dev, staging, production) |
| 35 | - Container orchestration setup |
| 36 | - Network and security configuration |
| 37 | 3. Environment Configuration |
| 38 | - Secrets management |
| 39 | - Environment variable management |
| 40 | - Multi-environment parity |
| 41 | |
| 42 | Files to create: |
| 43 | - .github/workflows/ci-cd.yml (or equivalent) |
| 44 | - infrastructure/ (Terraform/CDK templates) |
| 45 | - docker-compose.yml |
| 46 | - Dockerfile(s) |
| 47 | |
| 48 | Format: Working CI/CD pipeline with IaC templates |
| 49 | Timeline: 3 days |
| 50 | |
| 51 | |
| 52 | #### 🏗️ Infrastructure Maintainer — Cloud Infrastructure + Monitoring |
| 53 | |
| 54 | Activate Infrastructure Maintainer for monitoring setup on [PROJECT]. |
| 55 | |
| 56 | Input: DevOps Automator infrastructure + Backend Architect architecture |
| 57 | Deliverables required: |
| 58 | 1. Cloud Resource Provisioning |
| 59 | - Compute, storage, networking resources |
| 60 | - Auto-scaling configuration |
| 61 | - Load balancer setup |
| 62 | 2. Monitoring Stack |
| 63 | - Application metrics (Prometheus/DataDog) |
| 64 | - Infrastructure metrics |
| 65 | - Custom dashboards (Grafana) |
| 66 | 3. Logging and Alerting |
| 67 | - Centralized log aggregation |
| 68 | - Alert rules for critical thresholds |
| 69 | - On-call notification setup |
| 70 | 4. Security Hardening |
| 71 | - Firewall rules |
| 72 | - SSL/TLS configuration |
| 73 | - Access control policies |
| 74 | |
| 75 | Format: Infrastructure Readiness Report with dashboard access |
| 76 | Timeline: 3 days |
| 77 | |
| 78 | |
| 79 | #### ⚙️ Studio Operations — Process Setup |
| 80 | |
| 81 | Activate Studio Operations for process setup on [PROJECT]. |
| 82 | |
| 83 | Input: Sprint Prioritizer plan + Project Shepherd coordination needs |
| 84 | Deliverables required: |
| 85 | 1. Git Workflow |
| 86 | - Branch strategy (GitFlow / trunk-based) |
| 87 | - PR review process |
| 88 | - Merge policies |
| 89 | 2. Communication Channels |
| 90 | - Team channels setup |
| 91 | - Notification routing |
| 92 | - Status update cadence |
| 93 | 3. Documentation Templates |
| 94 | - PR template |
| 95 | - Issue template |
| 96 | - Decision log template |
| 97 | 4. Collaboration Tools |
| 98 | - Project board setup |
| 99 | - Sprint tracking configuration |
| 100 | |
| 101 | Format: Operations Playbook |
| 102 | Timeline: 2 days |
| 103 | |
| 104 | |
| 105 | ### Workstream B: Application Foundation (Day 1-4, Parallel) |
| 106 | |
| 107 | #### 🎨 Frontend Developer — Project Scaffolding + Component Library |
| 108 | |
| 109 | Activate Frontend Developer for project scaffolding on [PROJECT]. |
| 110 | |
| 111 | Input: UX Architect CSS Design System + Brand Guardian identity |
| 112 | Deliverables required: |
| 113 | 1. Project Scaffolding |
| 114 | - Framework setup (React/Vue/Angular per architecture) |
| 115 | - TypeScript configuration |
| 116 | - Build tooling (Vite/Webpack/Next.js) |
| 117 | - Testing framework (Jest/Vitest + Testing Library) |
| 118 | 2. Design System Implementation |
| 119 | - CSS design tokens from UX Architect |
| 120 | - Base component library (Button, Input, Card, Layout) |
| 121 | - Theme system (light/dark/system toggle) |
| 122 | - Responsive utilities |
| 123 | 3. Application Shell |
| 124 | - Routing setup |
| 125 | - Layout components (Header, Footer, Sidebar) |
| 126 | - Error boundary implementation |
| 127 | - Loading states |
| 128 | |
| 129 | Files to create: |
| 130 | - src/ (application source) |
| 131 | - src/components/ (component library) |
| 132 | - src/styles/ (design tokens) |
| 133 | - src/layouts/ (layout components) |
| 134 | |
| 135 | Format: Working application skeleton with component library |
| 136 | Timeline: 3 days |
| 137 | |
| 138 | |
| 139 | #### 🏗️ Backend Architect — Database + API Foundation |
| 140 | |
| 141 | Activate Backend Architect for API foundation on [PROJECT]. |
| 142 | |
| 143 | Input: System Architecture Specification + Database Schema Design |
| 144 | Deliverables required: |
| 145 | 1. Database Setup |
| 146 | - Schema deployment (migrations) |
| 147 | - Index creation |
| 148 | - Seed data for development |
| 149 | - Connection pooling configuration |
| 150 | 2. API Scaffold |
| 151 | - Framework setup (Express/FastAPI/etc.) |
| 152 | - Route structure matching architecture |
| 153 | - Middleware stack (auth, validation, error handling, CORS) |
| 154 | - Health check endpoints |
| 155 | 3. Authentication System |
| 156 | - Auth provider integration |
| 157 | - JWT/session management |
| 158 | - Role-based access control scaffold |
| 159 | 4. Service Communication |
| 160 | - API versioning setup |
| 161 | - Request/response serialization |
| 162 | - Error response standardization |
| 163 | |
| 164 | Files to create: |
| 165 | - api/ or server/ (backend source) |
| 166 | - migrations/ (database migrations) |
| 167 | - docs/api-spec.yaml (OpenAPI specification) |
| 168 | |
| 169 | Format: Working API scaffold with database and auth |
| 170 | Timeline: 4 days |
| 171 | |
| 172 | |
| 173 | #### 🏛️ UX Architect — CSS System Implementation |
| 174 | |
| 175 | Activate UX Architect for CSS system implementation on [PROJECT]. |
| 176 | |
| 177 | Input: Brand Guardian identity + own Phase 1 CSS Design System spec |
| 178 | Deliverables required: |
| 179 | 1. Design Tokens Implementation |
| 180 | - CSS custom properties (colors, typography, spacing) |
| 181 | - Brand color palette with semantic naming |
| 182 | - Typography scale with responsive adjustments |
| 183 | 2. Layout System |
| 184 | - Container system (responsive breakpoints) |
| 185 | - Grid patterns (2-col, 3-col, sidebar) |
| 186 | - Flexbox utilities |
| 187 | 3. Theme System |
| 188 | - Light theme variables |
| 189 | - Dark theme variables |
| 190 | - System preference detection |
| 191 | - Theme toggle component |
| 192 | - Smooth transition between themes |
| 193 | |
| 194 | Files to create/update: |
| 195 | - css/design-system.css (or equivalent in framework) |
| 196 | - css/layout.css |
| 197 | - css/components.css |
| 198 | - js/theme-manager.js |
| 199 | |
| 200 | Format: Implemented CSS design system with theme toggle |
| 201 | Timeline: 2 days |
| 202 | |
| 203 | |
| 204 | ## Verification Checkpoint (Day 4-5) |
| 205 | |
| 206 | ### Evidence Collector Verification |
| 207 | |
| 208 | Activate Evidence Collector for Phase 2 foundation verification. |
| 209 | |
| 210 | Verify the following with screenshot evidence: |
| 211 | 1. CI/CD pipeline executes successfully (show pipeline logs) |
| 212 | 2. Application skeleton loads in browser (desktop screenshot) |
| 213 | 3. Application skeleton loads on mobile (mobile screenshot) |
| 214 | 4. Theme toggle works (light + dark screenshots) |
| 215 | 5. API health check responds (curl output) |
| 216 | 6. Database is accessible (migration status) |
| 217 | 7. Monitoring dashboards are active (dashboard screenshot) |
| 218 | 8. Component library renders (component demo page) |
| 219 | |
| 220 | Format: Evidence Package with screenshots |
| 221 | Verdict: PASS / FAIL with specific issues |
| 222 | |
| 223 | |
| 224 | ## Quality Gate Checklist |
| 225 | |
| 226 | | # | Criterion | Evidence Source | Status | |
| 227 | |---|-----------|----------------|--------| |
| 228 | | 1 | CI/CD pipeline builds, tests, and deploys | Pipeline execution logs | ☐ | |
| 229 | | 2 | Database schema deployed with all tables/indexes | Migration success output | ☐ | |
| 230 | | 3 | API scaffold responding on health check | curl response evidence | ☐ | |
| 231 | | 4 | Frontend skeleton renders in browser | Evidence Collector screenshots | ☐ | |
| 232 | | 5 | Monitoring dashboards showing metrics | Dashboard screenshots | ☐ | |
| 233 | | 6 | Design system tokens implemented | Component library demo | ☐ | |
| 234 | | 7 | Theme toggle functional (light/dark/system) | Before/after screenshots | ☐ | |
| 235 | | 8 | Git workflow and processes documented | Studio Operations playbook | ☐ | |
| 236 | |
| 237 | ## Gate Decision |
| 238 | |
| 239 | **Dual sign-off required**: DevOps Automator (infrastructure) + Evidence Collector (visual) |
| 240 | |
| 241 | **PASS**: Working skeleton with full DevOps pipeline → Phase 3 activation |
| 242 | **FAIL**: Specific infrastructure or application issues → Fix and re-verify |
| 243 | |
| 244 | ## Handoff to Phase 3 |
| 245 | |
| 246 | |
| 247 | ## Phase 2 → Phase 3 Handoff Package |
| 248 | |
| 249 | ### For all Developer Agents: |
| 250 | - Working CI/CD pipeline (auto-deploys on merge) |
| 251 | - Design system tokens and component library |
| 252 | - API scaffold with auth and health checks |
| 253 | - Database with schema and seed data |
| 254 | - Git workflow and PR process |
| 255 | |
| 256 | ### For Evidence Collector (ongoing QA): |
| 257 | - Application URLs (dev, staging) |
| 258 | - Screenshot capture methodology |
| 259 | - Component library reference |
| 260 | - Brand guidelines for visual verification |
| 261 | |
| 262 | ### For Agents Orchestrator (Dev↔QA loop management): |
| 263 | - Sprint Prioritizer backlog (from Phase 1) |
| 264 | - Task list with acceptance criteria (from Phase 1) |
| 265 | - Agent assignment matrix (from NEXUS strategy) |
| 266 | - Quality thresholds for each task type |
| 267 | |
| 268 | ### Environment Access: |
| 269 | - Dev environment: [URL] |
| 270 | - Staging environment: [URL] |
| 271 | - Monitoring dashboard: [URL] |
| 272 | - CI/CD pipeline: [URL] |
| 273 | - API documentation: [URL] |
| 274 | |
| 275 | |
| 276 | |
| 277 | |
| 278 | *Phase 2 is complete when the skeleton application is running, the CI/CD pipeline is operational, and the Evidence Collector has verified all foundation elements with screenshots.* |
| 279 |