bmad-method 6.0.0-alpha.0 → 6.0.0-alpha.10

package/src/modules/bmm/workflows/frame-expert/create-diagram/instructions.md

@@ -0,0 +1,142 @@
+# Create Diagram - Workflow Instructions
+
+```xml
+<critical>The workflow execution engine is governed by: {project_root}/{bmad_folder}/core/tasks/workflow.xml</critical>
+<critical>You MUST have already loaded and processed: {installed_path}/workflow.yaml</critical>
+<critical>This workflow creates system architecture diagrams, ERDs, UML diagrams, or general technical diagrams in Excalidraw format.</critical>
+
+<workflow>
+
+  <step n="0" goal="Contextual Analysis">
+    <action>Review user's request and extract: diagram type, components/entities, relationships, notation preferences, save location</action>
+    <check if="ALL requirements clear"><action>Skip to Step 5</action></check>
+    <check if="SOME requirements clear"><action>Only ask about missing info in Steps 1-2</action></check>
+  </step>
+
+  <step n="1" goal="Identify Diagram Type" elicit="true">
+    <action>Ask: "What type of technical diagram do you need?"</action>
+    <action>Present options:
+      1. System Architecture
+      2. Entity-Relationship Diagram (ERD)
+      3. UML Class Diagram
+      4. UML Sequence Diagram
+      5. UML Use Case Diagram
+      6. Network Diagram
+      7. Other
+    </action>
+    <action>WAIT for selection, store in {{diagram_type}}</action>
+  </step>
+
+  <step n="2" goal="Gather Requirements" elicit="true">
+    <action>Ask component count (Small/Medium/Large/Very Large)</action>
+    <action>Ask relationship types (Simple/Hierarchical/Many-to-many/Mixed)</action>
+    <action>Ask notation standard (Standard/Simplified/Strict UML-ERD/Company specific)</action>
+    <action>Ask save location (Default/Custom/Architecture folder/Specific folder)</action>
+    <action>Store all responses in variables</action>
+  </step>
+
+  <step n="3" goal="Check for Existing Theme" elicit="true">
+    <action>Check if theme.json exists at output location</action>
+    <check if="exists"><action>Ask to use it, load if yes, else proceed to Step 4</action></check>
+    <check if="not exists"><action>Proceed to Step 4</action></check>
+  </step>
+
+  <step n="4" goal="Create Theme" elicit="true">
+    <action>Ask: "Choose a color scheme for your diagram:"</action>
+    <action>Present numbered options:
+      1. Professional
+         - Component: #e3f2fd (light blue)
+         - Database: #e8f5e9 (light green)
+         - Service: #fff3e0 (light orange)
+         - Border: #1976d2 (blue)
+
+      2. Colorful
+         - Component: #e1bee7 (light purple)
+         - Database: #c5e1a5 (light lime)
+         - Service: #ffccbc (light coral)
+         - Border: #7b1fa2 (purple)
+
+      3. Minimal
+         - Component: #f5f5f5 (light gray)
+         - Database: #eeeeee (gray)
+         - Service: #e0e0e0 (medium gray)
+         - Border: #616161 (dark gray)
+
+      4. Custom - Define your own colors
+    </action>
+    <action>WAIT for selection</action>
+    <action>Create theme.json based on selection</action>
+    <action>Show preview and confirm</action>
+  </step>
+
+  <step n="5" goal="Plan Diagram Structure">
+    <action>List all components/entities</action>
+    <action>Map all relationships</action>
+    <action>Show planned layout</action>
+    <action>Ask: "Structure looks correct? (yes/no)"</action>
+    <check if="no"><action>Adjust and repeat</action></check>
+  </step>
+
+  <step n="6" goal="Load Resources">
+    <action>Load {{templates}} and extract `diagram` section</action>
+    <action>Load {{library}}</action>
+    <action>Load theme.json and merge with template</action>
+    <action>Load {{helpers}} for guidelines</action>
+  </step>
+
+  <step n="7" goal="Build Diagram Elements">
+    <critical>Follow {{helpers}} for proper element creation</critical>
+
+    <substep>For Each Component:
+      - Generate unique IDs (component-id, text-id, group-id)
+      - Create shape with groupIds
+      - Calculate text width
+      - Create text with containerId and matching groupIds
+      - Add boundElements
+    </substep>
+
+    <substep>For Each Connection:
+      - Determine arrow type (straight/elbow)
+      - Create with startBinding and endBinding
+      - Update boundElements on both components
+    </substep>
+
+    <substep>Build Order by Type:
+      - Architecture: Services → Databases → Connections → Labels
+      - ERD: Entities → Attributes → Relationships → Cardinality
+      - UML Class: Classes → Attributes → Methods → Relationships
+      - UML Sequence: Actors → Lifelines → Messages → Returns
+      - UML Use Case: Actors → Use Cases → Relationships
+    </substep>
+
+    <substep>Alignment:
+      - Snap to 20px grid
+      - Space: 40px between components, 60px between sections
+    </substep>
+  </step>
+
+  <step n="8" goal="Optimize and Save">
+    <action>Strip unused elements and elements with isDeleted: true</action>
+    <action>Save to {{save_location}}</action>
+  </step>
+
+  <step n="9" goal="Validate JSON Syntax">
+    <critical>NEVER delete the file if validation fails - always fix syntax errors</critical>
+    <action>Run: node -e "JSON.parse(require('fs').readFileSync('{{save_location}}', 'utf8')); console.log('✓ Valid JSON')"</action>
+    <check if="validation fails (exit code 1)">
+      <action>Read the error message carefully - it shows the syntax error and position</action>
+      <action>Open the file and navigate to the error location</action>
+      <action>Fix the syntax error (add missing comma, bracket, or quote as indicated)</action>
+      <action>Save the file</action>
+      <action>Re-run validation with the same command</action>
+      <action>Repeat until validation passes</action>
+    </check>
+    <action>Once validation passes, confirm: "Diagram created at {{save_location}}. Open to view?"</action>
+  </step>
+
+  <step n="10" goal="Validate Content">
+    <invoke-task>Validate against {{validation}} using {{bmad_folder}}/core/tasks/validate-workflow.xml</invoke-task>
+  </step>
+
+</workflow>
+```

package/src/modules/bmm/workflows/frame-expert/create-diagram/workflow.yaml

@@ -0,0 +1,25 @@
+name: create-diagram
+description: "Create system architecture diagrams, ERDs, UML diagrams, or general technical diagrams in Excalidraw format"
+author: "BMad"
+
+installed_path: "{project-root}/{bmad_folder}/bmm/workflows/frame-expert/create-diagram"
+shared_path: "{project-root}/{bmad_folder}/bmm/workflows/frame-expert/_shared"
+instructions: "{installed_path}/instructions.md"
+validation: "{installed_path}/checklist.md"
+
+helpers: "{shared_path}/excalidraw-helpers.md"
+templates: "{shared_path}/excalidraw-templates.yaml"
+library: "{shared_path}/excalidraw-library.json"
+
+variables:
+  diagram_type: ""
+  component_count: ""
+  relationship_type: ""
+  notation_standard: ""
+  save_location: ""
+  theme_choice: ""
+
+default_output_file: "{project-root}/docs/diagrams/diagram-{timestamp}.excalidraw"
+
+standalone: true
+web_bundle: false

package/src/modules/bmm/workflows/frame-expert/create-flowchart/checklist.md

@@ -0,0 +1,49 @@
+# Create Flowchart - Validation Checklist
+
+## Element Structure
+
+- [ ] All shapes with labels have matching `groupIds`
+- [ ] All text elements have `containerId` pointing to parent shape
+- [ ] Text width calculated properly (no cutoff)
+- [ ] Text alignment set (`textAlign` + `verticalAlign`)
+
+## Layout and Alignment
+
+- [ ] All elements snapped to 20px grid
+- [ ] Consistent spacing between elements (60px minimum)
+- [ ] Vertical alignment maintained for flow direction
+- [ ] No overlapping elements
+
+## Connections
+
+- [ ] All arrows have `startBinding` and `endBinding`
+- [ ] `boundElements` array updated on connected shapes
+- [ ] Arrow types appropriate (straight for forward, elbow for backward/upward)
+- [ ] Gap set to 10 for all bindings
+
+## Theme and Styling
+
+- [ ] Theme colors applied consistently
+- [ ] All shapes use theme primary fill color
+- [ ] All borders use theme accent color
+- [ ] Text color is readable (#1e1e1e)
+
+## Composition
+
+- [ ] Element count under 50
+- [ ] Library components referenced where possible
+- [ ] No duplicate element definitions
+
+## Output Quality
+
+- [ ] No elements with `isDeleted: true`
+- [ ] JSON is valid
+- [ ] File saved to correct location
+
+## Functional Requirements
+
+- [ ] Start point clearly marked
+- [ ] End point clearly marked
+- [ ] All process steps labeled
+- [ ] Decision points use diamond shapes
+- [ ] Flow direction is clear and logical

package/src/modules/bmm/workflows/frame-expert/create-flowchart/instructions.md

@@ -0,0 +1,242 @@
+# Create Flowchart - Workflow Instructions
+
+```xml
+<critical>The workflow execution engine is governed by: {project_root}/{bmad_folder}/core/tasks/workflow.xml</critical>
+<critical>You MUST have already loaded and processed: {installed_path}/workflow.yaml</critical>
+<critical>This workflow creates a flowchart visualization in Excalidraw format for processes, pipelines, or logic flows.</critical>
+
+<workflow>
+
+  <step n="0" goal="Contextual Analysis (Smart Elicitation)">
+    <critical>Before asking any questions, analyze what the user has already told you</critical>
+
+    <action>Review the user's initial request and conversation history</action>
+    <action>Extract any mentioned: flowchart type, complexity, decision points, save location</action>
+
+    <check if="ALL requirements are clear from context">
+      <action>Summarize your understanding</action>
+      <action>Skip directly to Step 4 (Plan Flowchart Layout)</action>
+    </check>
+
+    <check if="SOME requirements are clear">
+      <action>Note what you already know</action>
+      <action>Only ask about missing information in Step 1</action>
+    </check>
+
+    <check if="requirements are unclear or minimal">
+      <action>Proceed with full elicitation in Step 1</action>
+    </check>
+  </step>
+
+  <step n="1" goal="Gather Requirements" elicit="true">
+    <action>Ask Question 1: "What type of process flow do you need to visualize?"</action>
+    <action>Present numbered options:
+      1. Business Process Flow - Document business workflows, approval processes, or operational procedures
+      2. Algorithm/Logic Flow - Visualize code logic, decision trees, or computational processes
+      3. User Journey Flow - Map user interactions, navigation paths, or experience flows
+      4. Data Processing Pipeline - Show data transformation, ETL processes, or processing stages
+      5. Other - Describe your specific flowchart needs
+    </action>
+    <action>WAIT for user selection (1-5)</action>
+    <action>Store selection in {{flowchart_type}}</action>
+
+    <action>Ask Question 2: "How many main steps are in this flow?"</action>
+    <action>Present numbered options:
+      1. Simple (3-5 steps) - Quick process with few decision points
+      2. Medium (6-10 steps) - Standard workflow with some branching
+      3. Complex (11-20 steps) - Detailed process with multiple decision points
+      4. Very Complex (20+ steps) - Comprehensive workflow requiring careful layout
+    </action>
+    <action>WAIT for user selection (1-4)</action>
+    <action>Store selection in {{complexity}}</action>
+
+    <action>Ask Question 3: "Does your flow include decision points (yes/no branches)?"</action>
+    <action>Present numbered options:
+      1. No decisions - Linear flow from start to end
+      2. Few decisions (1-2) - Simple branching with yes/no paths
+      3. Multiple decisions (3-5) - Several conditional branches
+      4. Complex decisions (6+) - Extensive branching logic
+    </action>
+    <action>WAIT for user selection (1-4)</action>
+    <action>Store selection in {{decision_points}}</action>
+
+    <action>Ask Question 4: "Where should the flowchart be saved?"</action>
+    <action>Present numbered options:
+      1. Default location - docs/flowcharts/[auto-generated-name].excalidraw
+      2. Custom path - Specify your own file path
+      3. Project root - Save in main project directory
+      4. Specific folder - Choose from existing folders
+    </action>
+    <action>WAIT for user selection (1-4)</action>
+    <check if="selection is 2 or 4">
+      <action>Ask for specific path</action>
+      <action>WAIT for user input</action>
+    </check>
+    <action>Store final path in {{save_location}}</action>
+  </step>
+
+  <step n="2" goal="Check for Existing Theme" elicit="true">
+    <action>Check if theme.json exists at output location</action>
+    <check if="theme.json exists">
+      <action>Ask: "Found existing theme. Use it? (yes/no)"</action>
+      <action>WAIT for user response</action>
+      <check if="user says yes">
+        <action>Load and use existing theme</action>
+        <action>Skip to Step 4</action>
+      </check>
+      <check if="user says no">
+        <action>Proceed to Step 3</action>
+      </check>
+    </check>
+    <check if="theme.json does not exist">
+      <action>Proceed to Step 3</action>
+    </check>
+  </step>
+
+  <step n="3" goal="Create Theme" elicit="true">
+    <action>Ask: "Let's create a theme for your flowchart. Choose a color scheme:"</action>
+    <action>Present numbered options:
+      1. Professional Blue
+         - Primary Fill: #e3f2fd (light blue)
+         - Accent/Border: #1976d2 (blue)
+         - Decision: #fff3e0 (light orange)
+         - Text: #1e1e1e (dark gray)
+
+      2. Success Green
+         - Primary Fill: #e8f5e9 (light green)
+         - Accent/Border: #388e3c (green)
+         - Decision: #fff9c4 (light yellow)
+         - Text: #1e1e1e (dark gray)
+
+      3. Neutral Gray
+         - Primary Fill: #f5f5f5 (light gray)
+         - Accent/Border: #616161 (gray)
+         - Decision: #e0e0e0 (medium gray)
+         - Text: #1e1e1e (dark gray)
+
+      4. Warm Orange
+         - Primary Fill: #fff3e0 (light orange)
+         - Accent/Border: #f57c00 (orange)
+         - Decision: #ffe0b2 (peach)
+         - Text: #1e1e1e (dark gray)
+
+      5. Custom Colors - Define your own color palette
+    </action>
+    <action>WAIT for user selection (1-5)</action>
+    <action>Store selection in {{theme_choice}}</action>
+
+    <check if="selection is 5 (Custom)">
+      <action>Ask: "Primary fill color (hex code)?"</action>
+      <action>WAIT for user input</action>
+      <action>Store in {{custom_colors.primary_fill}}</action>
+      <action>Ask: "Accent/border color (hex code)?"</action>
+      <action>WAIT for user input</action>
+      <action>Store in {{custom_colors.accent}}</action>
+      <action>Ask: "Decision color (hex code)?"</action>
+      <action>WAIT for user input</action>
+      <action>Store in {{custom_colors.decision}}</action>
+    </check>
+
+    <action>Create theme.json with selected colors</action>
+    <action>Show theme preview with all colors</action>
+    <action>Ask: "Theme looks good?"</action>
+    <action>Present numbered options:
+      1. Yes, use this theme - Proceed with theme
+      2. No, adjust colors - Modify color selections
+      3. Start over - Choose different preset
+    </action>
+    <action>WAIT for selection (1-3)</action>
+    <check if="selection is 2 or 3">
+      <action>Repeat Step 3</action>
+    </check>
+  </step>
+
+  <step n="4" goal="Plan Flowchart Layout">
+    <action>List all steps and decision points based on gathered requirements</action>
+    <action>Show user the planned structure</action>
+    <action>Ask: "Structure looks correct? (yes/no)"</action>
+    <action>WAIT for user response</action>
+    <check if="user says no">
+      <action>Adjust structure based on feedback</action>
+      <action>Repeat this step</action>
+    </check>
+  </step>
+
+  <step n="5" goal="Load Template and Resources">
+    <action>Load {{templates}} file</action>
+    <action>Extract `flowchart` section from YAML</action>
+    <action>Load {{library}} file</action>
+    <action>Load theme.json and merge colors with template</action>
+    <action>Load {{helpers}} for element creation guidelines</action>
+  </step>
+
+  <step n="6" goal="Build Flowchart Elements">
+    <critical>Follow guidelines from {{helpers}} for proper element creation</critical>
+
+    <action>Build ONE section at a time following these rules:</action>
+
+    <substep>For Each Shape with Label:
+      1. Generate unique IDs (shape-id, text-id, group-id)
+      2. Create shape with groupIds: [group-id]
+      3. Calculate text width: (text.length × fontSize × 0.6) + 20, round to nearest 10
+      4. Create text element with:
+         - containerId: shape-id
+         - groupIds: [group-id] (SAME as shape)
+         - textAlign: "center"
+         - verticalAlign: "middle"
+         - width: calculated width
+      5. Add boundElements to shape referencing text
+    </substep>
+
+    <substep>For Each Arrow:
+      1. Determine arrow type needed:
+         - Straight: For forward flow (left-to-right, top-to-bottom)
+         - Elbow: For upward flow, backward flow, or complex routing
+      2. Create arrow with startBinding and endBinding
+      3. Set startBinding.elementId to source shape ID
+      4. Set endBinding.elementId to target shape ID
+      5. Set gap: 10 for both bindings
+      6. If elbow arrow, add intermediate points for direction changes
+      7. Update boundElements on both connected shapes
+    </substep>
+
+    <substep>Alignment:
+      - Snap all x, y to 20px grid
+      - Align shapes vertically (same x for vertical flow)
+      - Space elements: 60px between shapes
+    </substep>
+
+    <substep>Build Order:
+      1. Start point (circle) with label
+      2. Each process step (rectangle) with label
+      3. Each decision point (diamond) with label
+      4. End point (circle) with label
+      5. Connect all with bound arrows
+    </substep>
+  </step>
+
+  <step n="7" goal="Optimize and Save">
+    <action>Strip unused elements and elements with isDeleted: true</action>
+    <action>Save to {{save_location}}</action>
+  </step>
+
+  <step n="8" goal="Validate JSON Syntax">
+    <critical>NEVER delete the file if validation fails - always fix syntax errors</critical>
+    <action>Run: node -e "JSON.parse(require('fs').readFileSync('{{save_location}}', 'utf8')); console.log('✓ Valid JSON')"</action>
+    <check if="validation fails (exit code 1)">
+      <action>Read the error message carefully - it shows the syntax error and position</action>
+      <action>Open the file and navigate to the error location</action>
+      <action>Fix the syntax error (add missing comma, bracket, or quote as indicated)</action>
+      <action>Save the file</action>
+      <action>Re-run validation with the same command</action>
+      <action>Repeat until validation passes</action>
+    </check>
+    <action>Once validation passes, confirm with user: "Flowchart created at {{save_location}}. Open to view?"</action>
+  </step>
+
+  <step n="9" goal="Validate Content">
+    <invoke-task>Validate against checklist at {{validation}} using {{bmad_folder}}/core/tasks/validate-workflow.xml</invoke-task>
+  </step>
+
+</workflow>
+```

package/src/modules/bmm/workflows/frame-expert/create-flowchart/workflow.yaml

@@ -0,0 +1,28 @@
+name: create-flowchart
+description: "Create a flowchart visualization in Excalidraw format for processes, pipelines, or logic flows"
+author: "BMad"
+
+# Workflow components
+installed_path: "{project-root}/{bmad_folder}/bmm/workflows/frame-expert/create-flowchart"
+shared_path: "{project-root}/{bmad_folder}/bmm/workflows/frame-expert/_shared"
+instructions: "{installed_path}/instructions.md"
+validation: "{installed_path}/checklist.md"
+
+# Shared resources
+helpers: "{shared_path}/excalidraw-helpers.md"
+templates: "{shared_path}/excalidraw-templates.yaml"
+library: "{shared_path}/excalidraw-library.json"
+
+# Variables
+variables:
+  flowchart_type: "" # Will be elicited
+  complexity: "" # Will be elicited
+  decision_points: "" # Will be elicited
+  save_location: "" # Will be elicited
+  theme_choice: "" # Will be elicited
+  custom_colors: {} # For custom theme
+
+default_output_file: "{project-root}/docs/flowcharts/flowchart-{timestamp}.excalidraw"
+
+standalone: true
+web_bundle: false

package/src/modules/bmm/workflows/frame-expert/create-wireframe/checklist.md

@@ -0,0 +1,38 @@
+# Create Wireframe - Validation Checklist
+
+## Layout Structure
+
+- [ ] Screen dimensions appropriate for device type
+- [ ] Grid alignment (20px) maintained
+- [ ] Consistent spacing between UI elements
+- [ ] Proper hierarchy (header, content, footer)
+
+## UI Elements
+
+- [ ] All interactive elements clearly marked
+- [ ] Buttons, inputs, and controls properly sized
+- [ ] Text labels readable and appropriately sized
+- [ ] Navigation elements clearly indicated
+
+## Fidelity
+
+- [ ] Matches requested fidelity level (low/medium/high)
+- [ ] Appropriate level of detail
+- [ ] Placeholder content used where needed
+- [ ] No unnecessary decoration for low-fidelity
+
+## Annotations
+
+- [ ] Key interactions annotated
+- [ ] Flow indicators present if multi-screen
+- [ ] Important notes included
+- [ ] Element purposes clear
+
+## Technical Quality
+
+- [ ] All elements properly grouped
+- [ ] Text elements have containerId
+- [ ] Snapped to grid
+- [ ] No elements with `isDeleted: true`
+- [ ] JSON is valid
+- [ ] File saved to correct location

package/src/modules/bmm/workflows/frame-expert/create-wireframe/instructions.md

@@ -0,0 +1,133 @@
+# Create Wireframe - Workflow Instructions
+
+```xml
+<critical>The workflow execution engine is governed by: {project_root}/{bmad_folder}/core/tasks/workflow.xml</critical>
+<critical>You MUST have already loaded and processed: {installed_path}/workflow.yaml</critical>
+<critical>This workflow creates website or app wireframes in Excalidraw format.</critical>
+
+<workflow>
+
+  <step n="0" goal="Contextual Analysis">
+    <action>Review user's request and extract: wireframe type, fidelity level, screen count, device type, save location</action>
+    <check if="ALL requirements clear"><action>Skip to Step 5</action></check>
+  </step>
+
+  <step n="1" goal="Identify Wireframe Type" elicit="true">
+    <action>Ask: "What type of wireframe do you need?"</action>
+    <action>Present options:
+      1. Website (Desktop)
+      2. Mobile App (iOS/Android)
+      3. Web App (Responsive)
+      4. Tablet App
+      5. Multi-platform
+    </action>
+    <action>WAIT for selection, store in {{wireframe_type}}</action>
+  </step>
+
+  <step n="2" goal="Gather Requirements" elicit="true">
+    <action>Ask fidelity level (Low/Medium/High)</action>
+    <action>Ask screen count (Single/Few 2-3/Multiple 4-6/Many 7+)</action>
+    <action>Ask device dimensions or use standard</action>
+    <action>Ask save location</action>
+  </step>
+
+  <step n="3" goal="Check Theme" elicit="true">
+    <action>Check for existing theme.json, ask to use if exists</action>
+  </step>
+
+  <step n="4" goal="Create Theme" elicit="true">
+    <action>Ask: "Choose a wireframe style:"</action>
+    <action>Present numbered options:
+      1. Classic Wireframe
+         - Background: #ffffff (white)
+         - Container: #f5f5f5 (light gray)
+         - Border: #9e9e9e (gray)
+         - Text: #424242 (dark gray)
+
+      2. High Contrast
+         - Background: #ffffff (white)
+         - Container: #eeeeee (light gray)
+         - Border: #212121 (black)
+         - Text: #000000 (black)
+
+      3. Blueprint Style
+         - Background: #1a237e (dark blue)
+         - Container: #3949ab (blue)
+         - Border: #7986cb (light blue)
+         - Text: #ffffff (white)
+
+      4. Custom - Define your own colors
+    </action>
+    <action>WAIT for selection</action>
+    <action>Create theme.json based on selection</action>
+    <action>Confirm with user</action>
+  </step>
+
+  <step n="5" goal="Plan Wireframe Structure">
+    <action>List all screens and their purposes</action>
+    <action>Map navigation flow between screens</action>
+    <action>Identify key UI elements for each screen</action>
+    <action>Show planned structure, confirm with user</action>
+  </step>
+
+  <step n="6" goal="Load Resources">
+    <action>Load {{templates}} and extract `wireframe` section</action>
+    <action>Load {{library}}</action>
+    <action>Load theme.json</action>
+    <action>Load {{helpers}}</action>
+  </step>
+
+  <step n="7" goal="Build Wireframe Elements">
+    <critical>Follow {{helpers}} for proper element creation</critical>
+
+    <substep>For Each Screen:
+      - Create container/frame
+      - Add header section
+      - Add content areas
+      - Add navigation elements
+      - Add interactive elements (buttons, inputs)
+      - Add labels and annotations
+    </substep>
+
+    <substep>Build Order:
+      1. Screen containers
+      2. Layout sections (header, content, footer)
+      3. Navigation elements
+      4. Content blocks
+      5. Interactive elements
+      6. Labels and annotations
+      7. Flow indicators (if multi-screen)
+    </substep>
+
+    <substep>Fidelity Guidelines:
+      - Low: Basic shapes, minimal detail, placeholder text
+      - Medium: More defined elements, some styling, representative content
+      - High: Detailed elements, realistic sizing, actual content examples
+    </substep>
+  </step>
+
+  <step n="8" goal="Optimize and Save">
+    <action>Strip unused elements and elements with isDeleted: true</action>
+    <action>Save to {{save_location}}</action>
+  </step>
+
+  <step n="9" goal="Validate JSON Syntax">
+    <critical>NEVER delete the file if validation fails - always fix syntax errors</critical>
+    <action>Run: node -e "JSON.parse(require('fs').readFileSync('{{save_location}}', 'utf8')); console.log('✓ Valid JSON')"</action>
+    <check if="validation fails (exit code 1)">
+      <action>Read the error message carefully - it shows the syntax error and position</action>
+      <action>Open the file and navigate to the error location</action>
+      <action>Fix the syntax error (add missing comma, bracket, or quote as indicated)</action>
+      <action>Save the file</action>
+      <action>Re-run validation with the same command</action>
+      <action>Repeat until validation passes</action>
+    </check>
+    <action>Once validation passes, confirm with user</action>
+  </step>
+
+  <step n="10" goal="Validate Content">
+    <invoke-task>Validate against {{validation}}</invoke-task>
+  </step>
+
+</workflow>
+```