whiteport-design-studio 0.1.0

package/src/workflows/2-trigger-mapping/mermaid-diagram/steps-c/step-06-create-connections.md

@@ -0,0 +1,136 @@
+# Step 06: Create Connections
+
+**Goal:** Connect all nodes in the proper flow: Goals → Platform → Groups → Forces
+
+---
+
+## Connection Pattern
+
+```
+Business Goals → Platform → Target Groups → Driving Forces
+```
+
+**Visual:**
+```
+BG0 ──┐
+BG1 ──┼──→ PLATFORM ──┬──→ TG0 ──→ DF0
+BG2 ──┘               ├──→ TG1 ──→ DF1
+                      └──→ TG2 ──→ DF2
+```
+
+---
+
+## Instructions
+
+### 1. Business Goals to Platform
+
+**Connect all BG nodes to PLATFORM:**
+
+```
+%% Business Goals to Platform
+BG0 --> PLATFORM
+BG1 --> PLATFORM
+BG2 --> PLATFORM
+```
+
+**Rules:**
+- Every BG node connects to PLATFORM
+- Use simple arrow `-->`
+- Add comment header
+
+---
+
+### 2. Platform to Target Groups
+
+**Connect PLATFORM to all TG nodes:**
+
+```
+%% Platform to Target Groups
+PLATFORM --> TG0
+PLATFORM --> TG1
+PLATFORM --> TG2
+```
+
+**Rules:**
+- PLATFORM connects to every TG node
+- Use simple arrow `-->`
+- Add comment header
+
+---
+
+### 3. Target Groups to Driving Forces
+
+**Connect each TG to its corresponding DF:**
+
+```
+%% Target Groups to Driving Forces
+TG0 --> DF0
+TG1 --> DF1
+TG2 --> DF2
+```
+
+**Rules:**
+- TG0 → DF0, TG1 → DF1, etc. (matching IDs)
+- Use simple arrow `-->`
+- Add comment header
+
+---
+
+### 4. Complete Example
+
+```mermaid
+%% Connections
+BG0 --> PLATFORM
+BG1 --> PLATFORM
+BG2 --> PLATFORM
+PLATFORM --> TG0
+PLATFORM --> TG1
+PLATFORM --> TG2
+TG0 --> DF0
+TG1 --> DF1
+TG2 --> DF2
+```
+
+---
+
+## Rules Checklist
+
+- [ ] All BG nodes connect to PLATFORM
+- [ ] PLATFORM connects to all TG nodes
+- [ ] Each TG connects to matching DF (TG0→DF0, etc.)
+- [ ] Use simple arrows `-->` (no fancy styling)
+- [ ] Include section comments
+- [ ] No broken connections
+- [ ] Connections listed in logical order
+
+---
+
+## Connection Verification
+
+**Count check:**
+- BG connections = number of business goals
+- Platform-to-TG connections = number of personas
+- TG-to-DF connections = number of personas
+
+**Example for 3 personas:**
+- 3 BG → PLATFORM
+- 3 PLATFORM → TG
+- 3 TG → DF
+- **Total: 9 connections**
+
+---
+
+## Output
+
+Store:
+- `connections`: All connection statements
+- `connection_count`: For verification
+
+---
+
+## Next Step
+
+→ **[Step 07: Apply Styling](step-07-apply-styling.md)**
+
+Apply professional light gray styling with dark text.
+

package/src/workflows/2-trigger-mapping/mermaid-diagram/steps-c/step-07-apply-styling.md

@@ -0,0 +1,171 @@
+# Step 07: Apply Styling
+
+**Goal:** Apply professional light gray styling with dark text to all nodes
+
+---
+
+## Styling System
+
+**Four style classes:**
+1. `businessGoal` - Business goals (lightest gray)
+2. `platform` - Platform (medium gray, thick border)
+3. `targetGroup` - Target groups (near white)
+4. `drivingForces` - Driving forces (light gray)
+
+---
+
+## Instructions
+
+### 1. Define Style Classes
+
+**Add these exact class definitions:**
+
+```css
+classDef primaryGoal fill:#fef3c7,color:#78350f,stroke:#fbbf24,stroke-width:3px
+classDef businessGoal fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
+classDef platform fill:#e5e7eb,color:#111827,stroke:#9ca3af,stroke-width:3px
+classDef targetGroup fill:#f9fafb,color:#1f2937,stroke:#d1d5db,stroke-width:2px
+classDef drivingForces fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
+```
+
+**Rules:**
+- Use these EXACT colors - do not modify
+- PRIMARY GOAL (BG0) gets gold highlighting (#fef3c7) - THE ENGINE stands out
+- Business goals & driving forces use same light gray (#f3f4f6)
+- Platform uses medium gray (#e5e7eb) with 3px border
+- Target groups use near white (#f9fafb)
+- All text is dark gray (#1f2937, #111827, or #78350f for primary)
+- All borders are light gray (#d1d5db, #9ca3af, or #fbbf24 for primary)
+
+---
+
+### 2. Color Specifications
+
+**Background fills:**
+- `#fef3c7` - Light gold/yellow (PRIMARY GOAL only - BG0)
+- `#f3f4f6` - Light gray (other business goals, driving forces)
+- `#e5e7eb` - Medium gray (platform only)
+- `#f9fafb` - Near white (target groups)
+
+**Text colors:**
+- `#78350f` - Dark brown/gold (PRIMARY GOAL only)
+- `#1f2937` - Dark gray (most nodes)
+- `#111827` - Darker gray (platform only)
+
+**Border colors:**
+- `#fbbf24` - Gold border (PRIMARY GOAL only)
+- `#d1d5db` - Light gray border (most nodes)
+- `#9ca3af` - Medium gray border (platform only)
+
+**Border widths:**
+- `2px` - Standard (business goals, target groups, driving forces)
+- `3px` - Thick (platform AND primary goal - makes them stand out)
+
+---
+
+### 3. Apply Classes to Nodes
+
+**Format:**
+```
+class NodeID1,NodeID2,NodeID3 className
+```
+
+**Implementation:**
+```
+class BG0 primaryGoal
+class BG1,BG2 businessGoal
+class PLATFORM platform
+class TG0,TG1,TG2 targetGroup
+class DF0,DF1,DF2 drivingForces
+```
+
+**Note:** BG0 gets special `primaryGoal` class for gold highlighting - THE ENGINE!
+
+**Rules:**
+- List all node IDs of same type on one line
+- Separate IDs with commas (no spaces)
+- One class assignment per line
+- Match node count to actual diagram
+
+---
+
+### 4. Complete Example
+
+```mermaid
+%% Light Gray Styling with Dark Text
+classDef businessGoal fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
+classDef platform fill:#e5e7eb,color:#111827,stroke:#9ca3af,stroke-width:3px
+classDef targetGroup fill:#f9fafb,color:#1f2937,stroke:#d1d5db,stroke-width:2px
+classDef drivingForces fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
+
+class BG0,BG1,BG2 businessGoal
+class PLATFORM platform
+class TG0,TG1,TG2 targetGroup
+class DF0,DF1,DF2 drivingForces
+```
+
+---
+
+### 5. Variable Node Counts
+
+**Adjust class application based on actual count:**
+
+**2 personas:**
+```
+class BG0,BG1 businessGoal
+class PLATFORM platform
+class TG0,TG1 targetGroup
+class DF0,DF1 drivingForces
+```
+
+**4 personas:**
+```
+class BG0,BG1,BG2,BG3 businessGoal
+class PLATFORM platform
+class TG0,TG1,TG2,TG3 targetGroup
+class DF0,DF1,DF2,DF3 drivingForces
+```
+
+---
+
+## Rules Checklist
+
+- [ ] All four classDef statements included
+- [ ] Colors EXACTLY match specification (no variations)
+- [ ] Platform has 3px border (thicker than others)
+- [ ] All BG nodes assigned to businessGoal class
+- [ ] PLATFORM assigned to platform class
+- [ ] All TG nodes assigned to targetGroup class
+- [ ] All DF nodes assigned to drivingForces class
+- [ ] Node counts match actual diagram
+- [ ] Comment header included
+
+---
+
+## Visual Result
+
+**When properly styled, the diagram should have:**
+- Subtle, professional gray tones
+- Easy-to-read dark text
+- Platform visually emphasized (thicker border)
+- Consistent, clean appearance
+- No harsh colors or gradients
+- Print-friendly design
+
+---
+
+## Output
+
+Store:
+- `styling_definitions`: The classDef statements
+- `styling_applications`: The class assignments
+- `complete_diagram`: Full diagram with styling
+
+---
+
+## Next Step
+
+→ **[Step 08: Quality Check](step-08-quality-check.md)**
+
+Verify diagram meets all quality standards.
+

package/src/workflows/2-trigger-mapping/mermaid-diagram/steps-c/step-08-quality-check.md

@@ -0,0 +1,183 @@
+# Step 08: Quality Check
+
+**Goal:** Verify diagram meets all quality standards before finalization
+
+---
+
+## Quality Checklist
+
+Run through this comprehensive checklist to ensure diagram quality:
+
+---
+
+### Configuration & Structure
+
+- [ ] **Mermaid config** includes custom font (`Inter, system-ui, sans-serif`)
+- [ ] **fontSize** set to `14px`
+- [ ] **Flowchart direction** is `LR` (left-to-right)
+- [ ] **Section comments** present (`%% Business Goals`, etc.)
+
+---
+
+### Node Formatting
+
+- [ ] **All nodes** start with `<br/>` (top padding)
+- [ ] **All nodes** end with `<br/><br/>` (bottom padding)
+- [ ] **All titles** are in ALL CAPS
+- [ ] **All line breaks** use `<br/>` (not spaces or other methods)
+- [ ] **No HTML tags** (bold, italic, etc.) in any node
+- [ ] **All nodes** properly closed with `"]`
+
+---
+
+### Emoji Usage
+
+- [ ] **Each persona** has matching emoji in both TG and DF nodes
+- [ ] **Business goals** have appropriate emojis (🌟, 📊, 🚀)
+- [ ] **Platform** has appropriate emoji (🎨, 💻, etc.)
+- [ ] **Persona emojis** match persona type (🎯, 💼, 💻, etc.)
+- [ ] **"WANTS" and "FEARS"** headers have NO emojis
+- [ ] **Positive drivers** all have ✅ emoji
+- [ ] **Negative drivers** all have ❌ emoji
+
+---
+
+### Driving Forces Nodes
+
+- [ ] **Exactly 3 positive drivers** per persona (with ✅)
+- [ ] **Exactly 3 negative drivers** per persona (with ❌)
+- [ ] **Section headers** are "WANTS" and "FEARS" (no emojis, ALL CAPS)
+- [ ] **Blank line** between WANTS and FEARS sections (`<br/><br/>`)
+- [ ] **DF emoji** matches corresponding TG emoji
+
+---
+
+### Connections
+
+- [ ] **All BG nodes** connect to PLATFORM
+- [ ] **PLATFORM** connects to all TG nodes
+- [ ] **Each TG** connects to matching DF (TG0→DF0, etc.)
+- [ ] **Simple arrows** used (`-->`) - no fancy styling
+- [ ] **Connection comments** present
+- [ ] **No broken connections** or syntax errors
+
+---
+
+### Styling
+
+- [ ] **Light gray styling** with dark text applied
+- [ ] **All four classDef** statements present
+- [ ] **Colors EXACTLY match** specification:
+  - businessGoal: `fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px`
+  - platform: `fill:#e5e7eb,color:#111827,stroke:#9ca3af,stroke-width:3px`
+  - targetGroup: `fill:#f9fafb,color:#1f2937,stroke:#d1d5db,stroke-width:2px`
+  - drivingForces: `fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px`
+- [ ] **Platform** has thicker border (3px vs 2px)
+- [ ] **All BG nodes** assigned to businessGoal class
+- [ ] **PLATFORM** assigned to platform class
+- [ ] **All TG nodes** assigned to targetGroup class
+- [ ] **All DF nodes** assigned to drivingForces class
+- [ ] **Node counts** in class assignments match actual diagram
+
+---
+
+### Content Quality
+
+- [ ] **Business goals** have 3-5 key points each
+- [ ] **Platform** includes transformation statement
+- [ ] **Target groups** have 3-4 profile traits each
+- [ ] **Drivers** are concise (under 40 characters)
+- [ ] **All text** is clear and readable
+- [ ] **Priority levels** properly indicated (PRIMARY, SECONDARY, etc.)
+
+---
+
+### Syntax
+
+- [ ] **No syntax errors** in Mermaid code
+- [ ] **All brackets** properly closed
+- [ ] **All quotes** properly closed
+- [ ] **Node IDs** follow pattern (BG0, TG0, DF0, etc.)
+- [ ] **Diagram renders** without errors
+
+---
+
+## Common Issues & Fixes
+
+### Issue: Diagram doesn't render
+**Check:**
+- Missing closing bracket `]` or quote `"`
+- HTML tags in content (remove them)
+- Incorrect Mermaid syntax
+
+### Issue: Emoji doesn't match
+**Fix:**
+- Find TG node emoji
+- Copy exact emoji to corresponding DF node
+
+### Issue: Wrong colors
+**Fix:**
+- Use EXACT color codes from specification
+- Don't create custom colors
+
+### Issue: Missing padding
+**Fix:**
+- Add `<br/>` at start of every node
+- Add `<br/><br/>` at end of every node
+
+---
+
+## Visual Inspection
+
+**The diagram should look:**
+- ✅ Clean and professional
+- ✅ Easy to scan left-to-right
+- ✅ Consistent spacing and alignment
+- ✅ Subtle colors (not garish)
+- ✅ Dark text readable on light backgrounds
+- ✅ Platform visually emphasized
+
+**The diagram should NOT:**
+- ❌ Have harsh colors or gradients
+- ❌ Be hard to read
+- ❌ Have misaligned elements
+- ❌ Have inconsistent formatting
+- ❌ Have syntax errors
+
+---
+
+## Final Verification
+
+**Test the diagram:**
+1. Copy complete code
+2. Paste into Mermaid live editor (<https://mermaid.live>)
+3. Verify it renders correctly
+4. Check all elements are visible
+5. Confirm styling appears as intended
+
+---
+
+## Output
+
+If all checks pass:
+- ✅ **Quality verified**
+- ✅ **Diagram ready for publication**
+- Return `complete_diagram`
+
+If issues found:
+- 🔧 **Fix identified issues**
+- Re-run quality check
+- Repeat until all checks pass
+
+---
+
+## Next Step
+
+→ **Complete!** Diagram is ready to include in trigger map poster.
+
+The professional Mermaid diagram can now be inserted into:
+- `00-Trigger-Map-Poster.md`
+- Presentations
+- Documentation
+- Reports
+

package/src/workflows/2-trigger-mapping/mermaid-diagram/validation-report-mermaid-diagram.md

@@ -0,0 +1,185 @@
+---
+validationDate: 2026-01-22
+workflowName: mermaid-diagram
+workflowPath: c:\dev\WDS\bmad-method-wds-expansion\src\workflows\2-trigger-mapping\mermaid-diagram
+validationStatus: COMPLETE
+overallStatus: PASS_WITH_CRITICAL_RECOMMENDATION
+criticalIssues: 1
+warnings: 1
+---
+
+# Validation Report: Mermaid Diagram Workflow (Trigger Mapping)
+
+**Validation Started:** 2026-01-22
+**Validator:** Wendy - BMAD Workflow Validation System
+**Standards Version:** BMAD v6 Workflow Standards
+
+---
+
+## File Structure & Size
+
+### Folder Structure
+
+```
+mermaid-diagram/
+├── instructions.md (28 lines)
+└── steps/
+    ├── step-01-initialize-structure.md (84 lines)
+    ├── step-02-format-business-goals.md (86 lines)
+    ├── step-03-format-platform.md (94 lines)
+    ├── step-04-format-target-groups.md (113 lines)
+    ├── step-05-format-driving-forces.md (118 lines)
+    ├── step-06-create-connections.md (136 lines)
+    ├── step-07-apply-styling.md (171 lines)
+    └── step-08-quality-check.md (183 lines)
+```
+
+**Structure Analysis:**
+- ❌ **MISSING**: workflow.md (main entry point)
+- ✅ instructions.md exists (automation entry point)
+- ✅ steps/ folder exists with 8 step files
+- ✅ All step files within size limits (84-183 lines)
+- ⚠️ **NON-STANDARD**: Folder named `steps/` instead of `steps-c/` (BMAD v6 tri-modal convention)
+
+### Files Present
+
+**Required Files:**
+- ❌ **MISSING**: workflow.md - Main workflow entry point not present
+- ✅ Step files 01-08 - All diagram generation steps present
+- ✅ Sequential numbering - No gaps in step sequence
+
+**Supporting Files:**
+- ✅ instructions.md - Automation instructions
+
+### File Size Check
+
+| File | Lines | Status |
+|------|-------|--------|
+| instructions.md | 28 | ✅ Good |
+| step-01-initialize-structure.md | 84 | ✅ Good |
+| step-02-format-business-goals.md | 86 | ✅ Good |
+| step-03-format-platform.md | 94 | ✅ Good |
+| step-04-format-target-groups.md | 113 | ✅ Good |
+| step-05-format-driving-forces.md | 118 | ✅ Good |
+| step-06-create-connections.md | 136 | ✅ Good |
+| step-07-apply-styling.md | 171 | ✅ Good |
+| step-08-quality-check.md | 183 | ✅ Good |
+
+**All step files are well within the 250-line recommended limit.**
+
+### Issues Found
+
+1. ❌ **CRITICAL: Missing workflow.md**
+   - No main entry point file
+   - Impact: Users cannot invoke workflow without knowing to use instructions.md or step files directly
+   - Recommendation: Create workflow.md with BMAD v6 standard initialization sequence
+
+2. ⚠️ **Folder Naming Convention**
+   - Current: `steps/`
+   - BMAD v6 Standard: `steps-c/` (create mode)
+   - Impact: Minor - this workflow is create-mode only
+   - Recommendation: Rename to `steps-c/` for tri-modal consistency
+
+### Status
+
+❌ **FAIL** - Missing workflow.md entry point violates BMAD v6 standards.
+
+---
+
+## Frontmatter Validation
+
+**Finding:** None of the step files contain frontmatter.
+
+**Status:** ✅ **PASS** - Frontmatter optional for linear automated workflows.
+
+---
+
+## Menu Handling Validation
+
+**Finding:** Step files auto-proceed without user menus.
+
+**Status:** ✅ **PASS** - Correct for automated diagram generation workflow.
+
+---
+
+## Step Type Validation
+
+**Status:** ✅ PASS - Consistent step structure for mermaid diagram generation.
+
+---
+
+## Output Format Validation
+
+**Mermaid Diagram Generation:**
+- ✅ Step 1: Initialize mermaid structure
+- ✅ Steps 2-5: Format trigger map sections (goals, platform, target groups, driving forces)
+- ✅ Step 6: Create connections between nodes
+- ✅ Step 7: Apply mermaid styling
+- ✅ Step 8: Quality check and validation
+
+**Status:** ✅ PASS - Comprehensive mermaid diagram generation from trigger map.
+
+---
+
+## Workflow Design Check
+
+**Workflow Sequence:**
+1. ✅ Initialize mermaid structure
+2. ✅ Format business goals nodes
+3. ✅ Format platform nodes
+4. ✅ Format target groups nodes
+5. ✅ Format driving forces nodes
+6. ✅ Create connections
+7. ✅ Apply styling
+8. ✅ Quality check
+
+**Status:** ✅ PASS - Logical progression from structure → content → connections → styling → validation.
+
+---
+
+## Summary
+
+**Validation Date:** 2026-01-22
+**Workflow:** Mermaid Diagram Workflow (Trigger Mapping)
+**Overall Status:** ❌ **FAIL - CRITICAL ISSUE**
+
+### Validation Results
+
+| Check | Status | Critical Issues | Warnings | Notes |
+|-------|--------|----------------|----------|-------|
+| File Structure & Size | ❌ FAIL | 1 | 1 | Missing workflow.md entry point |
+| Frontmatter Validation | ✅ PASS | 0 | 0 | Acceptable for automated workflow |
+| Menu Handling | ✅ PASS | 0 | 0 | Correct auto-proceed pattern |
+| Step Type Validation | ✅ PASS | 0 | 0 | Consistent diagram generation structure |
+| Output Format | ✅ PASS | 0 | 0 | Comprehensive mermaid generation |
+| Workflow Design | ✅ PASS | 0 | 0 | Logical progression |
+
+### Key Findings
+
+**✅ Strengths:**
+- Excellent file size discipline (all steps 84-183 lines)
+- Logical progression: structure → content → connections → styling → validation
+- Comprehensive mermaid diagram generation from trigger map
+- Clear step-by-step transformation
+
+**❌ Critical Issue:**
+1. **Missing workflow.md** - No standard entry point for workflow invocation
+
+**⚠️ Warning:**
+1. Folder should be renamed `steps/` → `steps-c/` for BMAD v6 tri-modal consistency
+
+**🎯 Conclusion:**
+This workflow has **excellent step architecture and diagram generation logic** but **violates BMAD v6 standards** with missing entry point.
+
+**Recommended Action:**
+1. **IMMEDIATE**: Create workflow.md with BMAD v6 initialization sequence
+2. **SOON**: Rename `steps/` to `steps-c/` for tri-modal consistency
+
+---
+
+**Audit Completed:** 2026-01-22
+**Next Audit Scheduled:** After critical issue resolution
+
+---
+
+_Generated by Wendy - BMAD Workflow Validation System_