AI Builder - System Architecture
This skill creates/updates the system architecture documentation defining the system structure, major components, data flow, and deployment boundaries without specifying specific frameworks or technologies.
When to Use This Skill
- User asks to "design architecture" or "create system design"
- User requests to start Stage 6 or the next stage after UX design
- User wants to define system components and their relationships
- User wants to understand data flow and system boundaries
- User needs to plan deployment architecture
Prerequisites
This skill requires 05-ux to be completed. The architecture will implement the UX design and functional requirements with a clear system structure.
Your Roles in This Skill
- Tech Manager (Architect): Lead architecture design with system overview and component definitions. Review PRD and UX design to understand requirements. Create architecture diagrams showing component relationships. Define data structures and data flow patterns. Establish architectural principles and patterns.
- Backend Architect: Design backend system components, API structure, and data models. Define service boundaries and responsibilities. Plan database architecture and data flow. Consider scalability and performance requirements.
- Frontend Architect: Design frontend architecture and component structure. Define state management approach. Plan client-side data flow and API integration patterns.
- AI Engineer: Design AI/ML model architecture and integration patterns. Define prompt engineering strategies and LLM integration. Plan vector database and embeddings architecture. Design model monitoring and evaluation pipelines. Consider AI costs, latency, and fallback strategies. Plan content generation and moderation systems.
- Content Moderator: Design content moderation architecture for AI-generated content. Define moderation workflows and automated filtering systems. Plan human-in-the-loop review processes. Design content safety and compliance systems. Consider scalability of moderation infrastructure.
- DevOps Engineer: Review architecture for deployment feasibility. Provide input on deployment boundaries and cloud architecture. Consider monitoring, logging, and operational aspects.
Role Communication
As an expert in your assigned roles, you must announce your actions before performing them using the following format:
As a {Role} [and {Role}, ...], I will {action description}
This communication pattern ensures transparency and allows for human-in-the-loop oversight at key decision points.
Instructions
Follow these steps in order:
Step 0: Verify Prerequisites and Gather Context
- Check if
05-ux/ folder exists (mandatory):
- If NOT found: Inform user they need to create UX design first, then STOP
- If found: Read all files to understand:
- User flows and interactions
- Mockup structure (if UI-based app)
- Screen navigation patterns
1.5 Verify previous stage completion (05-ux):
- Read
05-ux/README.md and list required docs
- If README is missing or required docs are missing:
- Ask the user to start/continue stage 05, or skip it
- If skip: create
05-ux/SKIP.md with a short reason
- If continue: STOP and return after stage 05 is complete
Check if 04-prd/ folder exists (mandatory):
- If NOT found: Inform user they need PRD first, then STOP
- If found: Read to understand:
- Functional requirements
- Non-functional requirements (performance, security, scalability)
- Feature list and priorities
Check if 00-init-ideas/ folder exists (recommended):
- If found: Read to understand all files
Check if 03-mvp/ folder exists (recommended):
- If found: Read to understand:
- MVP scope (what to prioritize in architecture)
- Success metrics (inform performance targets)
Check if this stage should be skipped:
- Check if
06-architecture/SKIP.md exists
- If SKIP.md exists:
- Read SKIP.md to understand why this stage was skipped
- Inform the user: "Stage 6 (architecture) is marked as SKIP because [reason from SKIP.md]"
- Ask the user: "Would you like to proceed to the next stage (tech-specs)?"
- If user says yes:
- Exit this skill and inform them to run the next stage skill
- If user says no:
- Ask if they want to proceed with architecture anyway
- If yes, delete SKIP.md and continue with this skill
- If no, exit the skill
Check if 06-architecture/ folder exists:
- If exists: Read all existing files to understand current architecture state
- If NOT exists: Will create new structure
If README.md exists: Check whether it requires diagrams. If it does,
follow dev-swarm/docs/mermaid-diagram-guide.md and use the
dev-swarm-mermaid skill to render outputs.
Proceed to Step 1 with gathered context
Step 1: Refine Design Requirements in README and Get Approval
CRITICAL: Create/update README.md first without pre-approval. Then ask the user to review/update/approve it, re-read it after approval, and only then create other docs.
Analyze information from previous stages:
- Read
05-ux/ to understand user flows and UI structure
- Read
04-prd/ to understand functional and non-functional requirements
- Read
03-mvp/ (if exists) to understand what to prioritize
- Consider cost-budget constraints for this stage
Create or update 06-architecture/README.md with refined requirements:
- Use the template in
references/README.md
- Follow the checkbox rules: checked items apply after README approval; create file items only after approval; propose default checks; allow user changes
- Populate only the template sections; do not add new headings such as Documents or Deliverables
- Follow
dev-swarm/docs/stage-readme-guidelines.md before drafting
- Refer to
references/deliverables.md to select deliverables by project type
- Present any choices as checkbox lists with a default selection
- List deliverables explicitly in README (typical: system-overview.md, architecture-diagram.md, data-flow.md, deployment-boundaries.md)
- Stage overview and objectives (based on previous stage context)
- Owners: Tech Manager (lead), Backend Architect, Frontend Architect, AI Engineer, Content Moderator, DevOps Engineer
- Diagrams (if required by project init):
- Reference
dev-swarm/docs/mermaid-diagram-guide.md
- Include
diagram/ deliverables when needed
- What architecture will include:
- System components and their responsibilities
- Architecture diagrams (high-level + detail)
- Data flow for critical user journeys
- Deployment boundaries and scaling strategy
- Methodology:
- How components will be defined (from PRD requirements)
- Diagram approach (Mermaid for all diagrams)
- Deliverables planned:
- List of files that will be created (system-overview.md, architecture-diagram.md, etc.)
- Status: In Progress (update to "Completed" after implementation)
Notify user after README is created:
- Say: "I have created README.md file, please check and update or approve the content."
- Summarize the architecture approach and what will be designed
- Summarize what documentation files will be created
- Explain how it aligns with previous stages
Wait for user approval:
- If user says yes: Re-read README.md (user may have updated it), then proceed to Step 2
- If user says no:
- Ask what needs to be changed
- Update README based on feedback
- Ask for approval again, then re-read README.md before proceeding
Step 2: Create/Update Architecture Structure
Only after user approves the README and you re-read it:
Create files as specified in the approved README.md:
IMPORTANT: The file structure below is a SAMPLE only. The actual files you create must follow what was approved in the README.md in Step 1.
Typical structure (example):
06-architecture/
├── README.md (created in Step 1, then reviewed/approved)
├── system-overview.md (if specified in README)
├── architecture-diagram.md (if specified in README)
├── data-flow.md (if specified in README)
└── deployment-boundaries.md (if specified in README)
Create only the files listed in the README's "Deliverables planned" section.
Step 3: Create/Update Architecture Documentation
IMPORTANT: Only create architecture documentation after README is approved in Step 1 and re-read.
NOTE: Use references/deliverables.md for file-by-file content guidance. Adapt based on the approved README and project needs.
Step 4: Ensure Alignment
Make sure architecture aligns with:
- Non-functional requirements from 04-prd/non-functional-requirements.md
- Functional requirements from 04-prd/functional-requirements.md
- User flows from 05-ux/user-flows.md
- MVP scope from 03-mvp/ (architecture should support MVP first, then scale)
Verify that:
- All functional requirements can be implemented in this architecture
- Performance targets are achievable
- Security requirements are addressed
- Scalability needs are met
- Deployment is feasible
Step 5: Final User Review
Inform user that architecture is complete
Update README.md:
- Change Status from "In Progress" to "Completed"
- Add a Summary section with key insights (2-3 paragraphs)
- Add a Created Files section listing all created files
Present completed work to user:
- Walk through the architecture diagrams
- Explain major components and their responsibilities
- Show data flow for critical user journeys
- Explain deployment boundaries and security
Highlight key insights:
- Number of major components
- Key architectural patterns used
- Scalability approach
- Security boundaries
- Cloud vs. local deployment split
Ask questions:
- Does the architecture make sense?
- Are there any components missing?
- Any concerns about scalability or security?
- Ready to proceed to next stage (tech specs)?
Make adjustments based on user feedback if needed
Step 6: Commit to Git (if user confirms)
- If user confirms architecture is complete:
- Ask if they want to commit to git
- If user wants to commit:
- Stage all changes in
06-architecture/
- Commit with message: "Design system architecture and deployment (Stage 6)"
1---2name: dev-swarm-architecture-23description: Design system architecture including components, data flow, and deployment boundaries. Use when user asks to design architecture, create architecture diagrams, or start Stage 6 after UX design.4---5
6# AI Builder - System Architecture
7
8This skill creates/updates the system architecture documentation defining the system structure, major components, data flow, and deployment boundaries without specifying specific frameworks or technologies.
9
10## When to Use This Skill
11
12- User asks to "design architecture" or "create system design"
13- User requests to start Stage 6 or the next stage after UX design
14- User wants to define system components and their relationships
15- User wants to understand data flow and system boundaries
16- User needs to plan deployment architecture
17
18## Prerequisites
19
20This skill requires **05-ux** to be completed. The architecture will implement the UX design and functional requirements with a clear system structure.
21
22## Your Roles in This Skill
23
24- **Tech Manager (Architect)**: Lead architecture design with system overview and component definitions. Review PRD and UX design to understand requirements. Create architecture diagrams showing component relationships. Define data structures and data flow patterns. Establish architectural principles and patterns.
25- **Backend Architect**: Design backend system components, API structure, and data models. Define service boundaries and responsibilities. Plan database architecture and data flow. Consider scalability and performance requirements.
26- **Frontend Architect**: Design frontend architecture and component structure. Define state management approach. Plan client-side data flow and API integration patterns.
27- **AI Engineer**: Design AI/ML model architecture and integration patterns. Define prompt engineering strategies and LLM integration. Plan vector database and embeddings architecture. Design model monitoring and evaluation pipelines. Consider AI costs, latency, and fallback strategies. Plan content generation and moderation systems.
28- **Content Moderator**: Design content moderation architecture for AI-generated content. Define moderation workflows and automated filtering systems. Plan human-in-the-loop review processes. Design content safety and compliance systems. Consider scalability of moderation infrastructure.
29- **DevOps Engineer**: Review architecture for deployment feasibility. Provide input on deployment boundaries and cloud architecture. Consider monitoring, logging, and operational aspects.
30
31## Role Communication
32
33As an expert in your assigned roles, you must announce your actions before performing them using the following format:
34
35As a {Role} [and {Role}, ...], I will {action description}
36
37This communication pattern ensures transparency and allows for human-in-the-loop oversight at key decision points.
38## Instructions
39
40Follow these steps in order:
41
42### Step 0: Verify Prerequisites and Gather Context
43
441. **Check if `05-ux/` folder exists (mandatory):**
45 - If NOT found: Inform user they need to create UX design first, then STOP
46 - If found: Read all files to understand:
47 - User flows and interactions
48 - Mockup structure (if UI-based app)
49 - Screen navigation patterns
50
511.5 **Verify previous stage completion (05-ux):**
52 - Read `05-ux/README.md` and list required docs
53 - If README is missing or required docs are missing:
54 - Ask the user to start/continue stage 05, or skip it
55 - If skip: create `05-ux/SKIP.md` with a short reason
56 - If continue: STOP and return after stage 05 is complete
57
582. **Check if `04-prd/` folder exists (mandatory):**
59 - If NOT found: Inform user they need PRD first, then STOP
60 - If found: Read to understand:
61 - Functional requirements
62 - Non-functional requirements (performance, security, scalability)
63 - Feature list and priorities
64
653. **Check if `00-init-ideas/` folder exists (recommended):**
66 - If found: Read to understand all files
67
684. **Check if `03-mvp/` folder exists (recommended):**
69 - If found: Read to understand:
70 - MVP scope (what to prioritize in architecture)
71 - Success metrics (inform performance targets)
72
735. **Check if this stage should be skipped:**
74 - Check if `06-architecture/SKIP.md` exists
75 - **If SKIP.md exists:**
76 - Read SKIP.md to understand why this stage was skipped
77 - Inform the user: "Stage 6 (architecture) is marked as SKIP because [reason from SKIP.md]"
78 - Ask the user: "Would you like to proceed to the next stage (tech-specs)?"
79 - **If user says yes:**
80 - Exit this skill and inform them to run the next stage skill
81 - **If user says no:**
82 - Ask if they want to proceed with architecture anyway
83 - If yes, delete SKIP.md and continue with this skill
84 - If no, exit the skill
85
866. **Check if `06-architecture/` folder exists:**
87 - If exists: Read all existing files to understand current architecture state
88 - If NOT exists: Will create new structure
89
907. **If README.md exists:** Check whether it requires diagrams. If it does,
91 follow `dev-swarm/docs/mermaid-diagram-guide.md` and use the
92 `dev-swarm-mermaid` skill to render outputs.
93
948. Proceed to Step 1 with gathered context
95
96### Step 1: Refine Design Requirements in README and Get Approval
97
98**CRITICAL: Create/update README.md first without pre-approval. Then ask the user to review/update/approve it, re-read it after approval, and only then create other docs.**
99
1001. **Analyze information from previous stages:**
101 - Read `05-ux/` to understand user flows and UI structure
102 - Read `04-prd/` to understand functional and non-functional requirements
103 - Read `03-mvp/` (if exists) to understand what to prioritize
104 - Consider cost-budget constraints for this stage
105
1062. **Create or update 06-architecture/README.md with refined requirements:**
107 - Use the template in `references/README.md`
108 - Follow the checkbox rules: checked items apply after README approval; create file items only after approval; propose default checks; allow user changes
109 - Populate only the template sections; do not add new headings such as Documents or Deliverables
110 - Follow `dev-swarm/docs/stage-readme-guidelines.md` before drafting
111 - Refer to `references/deliverables.md` to select deliverables by project type
112 - Present any choices as checkbox lists with a default selection
113 - List deliverables explicitly in README (typical: system-overview.md, architecture-diagram.md, data-flow.md, deployment-boundaries.md)
114 - **Stage overview and objectives** (based on previous stage context)
115 - **Owners:** Tech Manager (lead), Backend Architect, Frontend Architect, AI Engineer, Content Moderator, DevOps Engineer
116 - **Diagrams (if required by project init):**
117 - Reference `dev-swarm/docs/mermaid-diagram-guide.md`
118 - Include `diagram/` deliverables when needed
119 - **What architecture will include:**
120 - System components and their responsibilities
121 - Architecture diagrams (high-level + detail)
122 - Data flow for critical user journeys
123 - Deployment boundaries and scaling strategy
124 - **Methodology:**
125 - How components will be defined (from PRD requirements)
126 - Diagram approach (Mermaid for all diagrams)
127 - **Deliverables planned:**
128 - List of files that will be created (system-overview.md, architecture-diagram.md, etc.)
129 - **Status:** In Progress (update to "Completed" after implementation)
130
1313. **Notify user after README is created:**
132 - Say: "I have created README.md file, please check and update or approve the content."
133 - Summarize the architecture approach and what will be designed
134 - Summarize what documentation files will be created
135 - Explain how it aligns with previous stages
136
1374. **Wait for user approval:**
138 - **If user says yes:** Re-read README.md (user may have updated it), then proceed to Step 2
139 - **If user says no:**
140 - Ask what needs to be changed
141 - Update README based on feedback
142 - Ask for approval again, then re-read README.md before proceeding
143
144### Step 2: Create/Update Architecture Structure
145
146**Only after user approves the README and you re-read it:**
147
1481. **Create files as specified in the approved README.md:**
149
150 **IMPORTANT:** The file structure below is a SAMPLE only. The actual files you create must follow what was approved in the README.md in Step 1.
151
152 **Typical structure (example):**
153 ```
154 06-architecture/
155 ├── README.md (created in Step 1, then reviewed/approved)
156 ├── system-overview.md (if specified in README)
157 ├── architecture-diagram.md (if specified in README)
158 ├── data-flow.md (if specified in README)
159 └── deployment-boundaries.md (if specified in README)
160 ```
161
162 **Create only the files listed in the README's "Deliverables planned" section.**
163
164### Step 3: Create/Update Architecture Documentation
165
166**IMPORTANT: Only create architecture documentation after README is approved in Step 1 and re-read.**
167
168**NOTE:** Use `references/deliverables.md` for file-by-file content guidance. Adapt based on the approved README and project needs.
169
170### Step 4: Ensure Alignment
171
172Make sure architecture aligns with:
173- Non-functional requirements from 04-prd/non-functional-requirements.md
174- Functional requirements from 04-prd/functional-requirements.md
175- User flows from 05-ux/user-flows.md
176- MVP scope from 03-mvp/ (architecture should support MVP first, then scale)
177
178Verify that:
179- All functional requirements can be implemented in this architecture
180- Performance targets are achievable
181- Security requirements are addressed
182- Scalability needs are met
183- Deployment is feasible
184
185### Step 5: Final User Review
186
1871. **Inform user that architecture is complete**
1882. **Update README.md:**
189 - Change **Status** from "In Progress" to "Completed"
190 - Add a **Summary** section with key insights (2-3 paragraphs)
191 - Add a **Created Files** section listing all created files
192
1933. **Present completed work to user:**
194 - Walk through the architecture diagrams
195 - Explain major components and their responsibilities
196 - Show data flow for critical user journeys
197 - Explain deployment boundaries and security
198
1994. **Highlight key insights:**
200 - Number of major components
201 - Key architectural patterns used
202 - Scalability approach
203 - Security boundaries
204 - Cloud vs. local deployment split
205
2065. **Ask questions:**
207 - Does the architecture make sense?
208 - Are there any components missing?
209 - Any concerns about scalability or security?
210 - Ready to proceed to next stage (tech specs)?
211
2126. Make adjustments based on user feedback if needed
213
214### Step 6: Commit to Git (if user confirms)
215
2161. **If user confirms architecture is complete:**
217 - Ask if they want to commit to git
2182. **If user wants to commit:**
219 - Stage all changes in `06-architecture/`
220 - Commit with message: "Design system architecture and deployment (Stage 6)"