⚙️ 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/main1 file
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 
9Build 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```
23Activate DevOps Automator for infrastructure setup on [PROJECT].
24 
25Input: Backend Architect system architecture + deployment requirements
26Deliverables required:
271. 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
332. Infrastructure as Code
34 - Environment provisioning (dev, staging, production)
35 - Container orchestration setup
36 - Network and security configuration
373. Environment Configuration
38 - Secrets management
39 - Environment variable management
40 - Multi-environment parity
41 
42Files to create:
43- .github/workflows/ci-cd.yml (or equivalent)
44- infrastructure/ (Terraform/CDK templates)
45- docker-compose.yml
46- Dockerfile(s)
47 
48Format: Working CI/CD pipeline with IaC templates
49Timeline: 3 days
50```
51 
52#### 🏗️ Infrastructure Maintainer — Cloud Infrastructure + Monitoring
53```
54Activate Infrastructure Maintainer for monitoring setup on [PROJECT].
55 
56Input: DevOps Automator infrastructure + Backend Architect architecture
57Deliverables required:
581. Cloud Resource Provisioning
59 - Compute, storage, networking resources
60 - Auto-scaling configuration
61 - Load balancer setup
622. Monitoring Stack
63 - Application metrics (Prometheus/DataDog)
64 - Infrastructure metrics
65 - Custom dashboards (Grafana)
663. Logging and Alerting
67 - Centralized log aggregation
68 - Alert rules for critical thresholds
69 - On-call notification setup
704. Security Hardening
71 - Firewall rules
72 - SSL/TLS configuration
73 - Access control policies
74 
75Format: Infrastructure Readiness Report with dashboard access
76Timeline: 3 days
77```
78 
79#### ⚙️ Studio Operations — Process Setup
80```
81Activate Studio Operations for process setup on [PROJECT].
82 
83Input: Sprint Prioritizer plan + Project Shepherd coordination needs
84Deliverables required:
851. Git Workflow
86 - Branch strategy (GitFlow / trunk-based)
87 - PR review process
88 - Merge policies
892. Communication Channels
90 - Team channels setup
91 - Notification routing
92 - Status update cadence
933. Documentation Templates
94 - PR template
95 - Issue template
96 - Decision log template
974. Collaboration Tools
98 - Project board setup
99 - Sprint tracking configuration
100 
101Format: Operations Playbook
102Timeline: 2 days
103```
104 
105### Workstream B: Application Foundation (Day 1-4, Parallel)
106 
107#### 🎨 Frontend Developer — Project Scaffolding + Component Library
108```
109Activate Frontend Developer for project scaffolding on [PROJECT].
110 
111Input: UX Architect CSS Design System + Brand Guardian identity
112Deliverables required:
1131. 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)
1182. 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
1233. Application Shell
124 - Routing setup
125 - Layout components (Header, Footer, Sidebar)
126 - Error boundary implementation
127 - Loading states
128 
129Files to create:
130- src/ (application source)
131- src/components/ (component library)
132- src/styles/ (design tokens)
133- src/layouts/ (layout components)
134 
135Format: Working application skeleton with component library
136Timeline: 3 days
137```
138 
139#### 🏗️ Backend Architect — Database + API Foundation
140```
141Activate Backend Architect for API foundation on [PROJECT].
142 
143Input: System Architecture Specification + Database Schema Design
144Deliverables required:
1451. Database Setup
146 - Schema deployment (migrations)
147 - Index creation
148 - Seed data for development
149 - Connection pooling configuration
1502. 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
1553. Authentication System
156 - Auth provider integration
157 - JWT/session management
158 - Role-based access control scaffold
1594. Service Communication
160 - API versioning setup
161 - Request/response serialization
162 - Error response standardization
163 
164Files to create:
165- api/ or server/ (backend source)
166- migrations/ (database migrations)
167- docs/api-spec.yaml (OpenAPI specification)
168 
169Format: Working API scaffold with database and auth
170Timeline: 4 days
171```
172 
173#### 🏛️ UX Architect — CSS System Implementation
174```
175Activate UX Architect for CSS system implementation on [PROJECT].
176 
177Input: Brand Guardian identity + own Phase 1 CSS Design System spec
178Deliverables required:
1791. Design Tokens Implementation
180 - CSS custom properties (colors, typography, spacing)
181 - Brand color palette with semantic naming
182 - Typography scale with responsive adjustments
1832. Layout System
184 - Container system (responsive breakpoints)
185 - Grid patterns (2-col, 3-col, sidebar)
186 - Flexbox utilities
1873. Theme System
188 - Light theme variables
189 - Dark theme variables
190 - System preference detection
191 - Theme toggle component
192 - Smooth transition between themes
193 
194Files 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 
200Format: Implemented CSS design system with theme toggle
201Timeline: 2 days
202```
203 
204## Verification Checkpoint (Day 4-5)
205 
206### Evidence Collector Verification
207```
208Activate Evidence Collector for Phase 2 foundation verification.
209 
210Verify the following with screenshot evidence:
2111. CI/CD pipeline executes successfully (show pipeline logs)
2122. Application skeleton loads in browser (desktop screenshot)
2133. Application skeleton loads on mobile (mobile screenshot)
2144. Theme toggle works (light + dark screenshots)
2155. API health check responds (curl output)
2166. Database is accessible (migration status)
2177. Monitoring dashboards are active (dashboard screenshot)
2188. Component library renders (component demo page)
219 
220Format: Evidence Package with screenshots
221Verdict: 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```markdown
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 

Discussion

Alternatives

🌐 NEXUS — Network of EXperts, Unified in Strategy> NEXUS transforms The Agency's independent AI specialists into a synchronized intelligence network. This is not a prompt collection — it…Business & ops · MITAnsoff matrixGenerate an Ansoff Matrix analysis mapping growth strategies across market penetration, market development, product development, and diversification. Use when considering growth options, planning market expansion, or evaluating strategic growth paths. · MITCareer changer translatorTranslate skills from one industry to another, identify transferable skillsBusiness & ops · MITOpenClaw Marketing SkillsA collection of 37 battle-tested marketing skills for OpenClaw agents. Use when you want to install or reference any marketing skill including: CRO (page-cro, signup-flow-cro, onboarding-cro, form-cro, popup-cro, paywall-upgrade-cro), copywriting, copy-editing, cold-email, email-sequence, social-content, seo-audit, ai-seo, programmatic-seo, site-architecture, schema-markup, content-strategy, paid-ads, ad-creative, ab-test-setup, analytics-tracking, referral-program, free-tool-strategy, churn-prevention, revops, sales-enablement, launch-strategy, pricing-strategy, competitor-alternatives, marketing-ideas, marketing-psychology, lead-magnets, product-marketing-context, and data connectors (google-ads-connect, search-console-connect, meta-ads-connect, x-twitter-connect). Start with product-marketing-context to set up your product context document, then use any other skill naturally. Powered by MyClaw.ai.Business & ops · MIT