whiteport-design-studio 0.1.0

package/src/workflows/2-trigger-mapping/instructions.md

@@ -0,0 +1,159 @@
+# Trigger Mapping - Overview Instructions
+
+<critical>Communicate in {communication_language} with {user_name}</critical>
+<critical>You are Saga the Analyst - facilitator of strategic clarity</critical>
+
+<workflow>
+
+<step n="1" goal="Welcome and determine approach">
+<output>Hi {user_name}! I'm Saga, and I'll facilitate your **Trigger Mapping** session.
+
+Trigger Mapping connects your business goals to user psychology. It answers:
+
+- **Why** will users engage with your product?
+- **What** motivates them (positive drivers)?
+- **What** do they want to avoid (negative drivers)?
+- **Which** features matter most?
+
+WDS offers **three approaches** depending on your situation:</output>
+
+<ask>**Which path fits your situation?**
+
+1. **Starting from scratch** - Build your Trigger Map through guided workshops (60-90 min)
+   - No existing documentation
+   - We'll discover everything together
+   - Full strategic foundation
+
+2. **Quick validation** - Create a focused Value Trigger Chain (15-20 min)
+   - Single user journey
+   - No measurable goals
+   - Fast strategic check
+   - Lightweight version
+
+3. **Existing documentation** - Synthesize your research into a Trigger Map (30-45 min)
+   - You have vision docs, user research, plans, or interviews
+   - I'll extract and organize the strategic elements
+   - Create actionable artifact from extensive documentation
+
+Which approach would you like?</ask>
+
+<check if="choice == 1">
+  <output>Great! We'll build your complete Trigger Map through 4 core workshops, plus 1 optional:
+
+1. **Business Goals** - Vision → Strategic objectives
+2. **Target Groups** - Who are your key users?
+3. **Driving Forces** - What motivates and concerns them?
+4. **Prioritization** - What matters most?
+5. **Feature Impact** (Optional) - Which features serve priorities best?
+
+Each workshop builds on the previous. You can run them all together (60-90 min) or spread across sessions.</output>
+  
+  <ask>Would you like to:
+  
+  a. **Full session** - All 4 core workshops now (Feature Impact optional at end)
+  b. **Workshop by workshop** - Start with Business Goals, continue later
+  c. **Jump to specific workshop** - If you've done some already</ask>
+  
+  <check if="subchoice == a">
+    <action>Proceed through all workshops sequentially</action>
+  </check>
+  
+  <check if="subchoice == b">
+    <action>Run Workshop 1, then offer to save and continue later</action>
+  </check>
+  
+  <check if="subchoice == c">
+    <ask>Which workshop?
+    1. Business Goals
+    2. Target Groups
+    3. Driving Forces
+    4. Prioritization
+    5. Feature Impact</ask>
+    <action>Jump to selected workshop</action>
+  </check>
+</check>
+
+<check if="choice == 2">
+  <output>Perfect! We'll create a **Value Trigger Chain** - a focused, lightweight version.
+
+This takes 15-20 minutes and creates one clear path:
+- ONE strategic objective
+- ONE primary user
+- ONE key driver (usually negative, as it's often most powerful)
+- Clear connection from goal to psychology
+
+This is ideal for quick validation or focused features.</output>
+  
+  <action>Load and execute VTC workflow: ../../shared/vtc-workshop/instructions.md</action>
+  <action>Skip to handover after VTC complete</action>
+</check>
+
+<check if="choice == 3">
+  <output>Excellent! Let's synthesize your existing documentation into an actionable Trigger Map.
+
+This approach:
+- Extracts strategic elements from your docs
+- Organizes into clear Trigger Map structure
+- Identifies gaps and validates assumptions
+- Creates single-slide reference from hundreds of pages
+
+Much more useful for daily design work than reading through extensive documentation!</output>
+  
+  <ask>**What documentation do you have?** You can share:
+
+- Vision or strategy documents
+- User research or target group analysis
+- Interview transcripts or research reports
+- Project plans or roadmaps
+- Any combination of the above
+
+Please share what you have (paste content, upload files, or describe what's available).</ask>
+  
+  <action>Load and execute documentation synthesis workflow: workshops/0-documentation-synthesis/instructions.md</action>
+</check>
+</step>
+
+<step n="2" goal="Run Workshop 1: Business Goals">
+<action>Load and execute: workshops/1-business-goals/instructions.md</action>
+<action>Store outputs: vision, objectives, prioritization</action>
+</step>
+
+<step n="3" goal="Run Workshop 2: Target Groups">
+<action>Load and execute: workshops/2-target-groups/instructions.md</action>
+<action>Store outputs: target_groups, personas with details</action>
+</step>
+
+<step n="4" goal="Run Workshop 3: Driving Forces">
+<action>Load and execute: workshops/3-driving-forces/instructions.md</action>
+<action>Store outputs: driving_forces_positive, driving_forces_negative for each persona</action>
+</step>
+
+<step n="5" goal="Run Workshop 4: Prioritization">
+<action>Load and execute: workshops/4-prioritization/instructions.md</action>
+<action>Store outputs: prioritized_groups, prioritized_drivers, focus_statement</action>
+</step>
+
+<step n="5.5" goal="Optional: Feature Impact Workshop">
+<ask>Would you like to run the **Feature Impact workshop** now?
+
+This is optional but valuable - it analyzes which features best serve your prioritized personas and goals, creating a scored priority list for design and development.</ask>
+
+<check if="yes">
+  <action>Load and execute: workshops/5-feature-impact/instructions.md</action>
+  <action>Store feature_impact_analysis</action>
+</check>
+
+<check if="no">
+  <output>No problem! You can run Feature Impact later if needed. Proceeding to handover...</output>
+</check>
+</step>
+
+<step n="6" goal="Handover to UX Design Phase">
+<output>**All Workshops Complete!** 🎉
+
+Now let me prepare the handover to Phase 4: UX Design...</output>
+
+<action>Load and execute: handover/instructions.md</action>
+</step>
+
+</workflow>

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

@@ -0,0 +1,28 @@
+# Generate Mermaid Trigger Map Diagram
+
+<critical>You are Saga the Analyst - creating visual strategic clarity</critical>
+
+<workflow>
+
+<intro>
+**Generate Professional Mermaid Diagram**
+
+This workflow creates a visual trigger map with four-layer horizontal structure:
+
+**Structure (Left to Right):**
+1. **Business Goals** (Left) - Vision + SMART objectives
+2. **Product/Solution** (Center) - What you're building
+3. **Target Groups** (Middle-Right) - Prioritized personas
+4. **Usage Goals** (Right) - Positive (✅ green) and Negative (❌ red) drivers separated
+
+**Visual Features:**
+- Light gray professional styling
+- Gold-highlighted primary goal
+- Emoji-decorated nodes
+- Clear left-to-right flow showing strategic connections
+
+<action>Load and execute: steps/step-01-initialize-structure.md</action>
+</intro>
+
+</workflow>
+

package/src/workflows/2-trigger-mapping/mermaid-diagram/steps-c/step-01-initialize-structure.md

@@ -0,0 +1,84 @@
+# Step 01: Initialize Diagram Structure
+
+**Goal:** Set up the basic Mermaid diagram structure with configuration
+
+---
+
+## Instructions
+
+### 1. Start with Mermaid Configuration
+
+**Always begin with:**
+
+```mermaid
+%%{init: {'theme':'base', 'themeVariables': { 'fontFamily':'Inter, system-ui, sans-serif', 'fontSize':'14px'}}}%%
+flowchart LR
+```
+
+**Rules:**
+- Use `base` theme
+- Set font to `Inter, system-ui, sans-serif`
+- Set fontSize to `14px`
+- Use `flowchart LR` (left-to-right direction)
+
+---
+
+### 2. Add Section Comments
+
+**Structure the diagram with comments:**
+
+```
+    %% Business Goals (Left)
+    
+    %% Central Platform
+    
+    %% Target Groups (Right)
+    
+    %% Driving Forces (Far Right)
+    
+    %% Connections
+    
+    %% Styling
+```
+
+**Rules:**
+- Use `%%` for comments
+- Keep sections clearly labeled
+- Maintain consistent spacing
+
+---
+
+### 3. Determine Node IDs
+
+**Create node ID list based on data:**
+
+- **Business Goals:** `BG0`, `BG1`, `BG2` (sequential)
+- **Platform:** `PLATFORM` (always singular)
+- **Target Groups:** `TG0`, `TG1`, `TG2` (sequential, matching persona count)
+- **Driving Forces:** `DF0`, `DF1`, `DF2` (sequential, matching target groups)
+
+**Example for 3 personas:**
+```
+BG0, BG1, BG2
+PLATFORM
+TG0, TG1, TG2
+DF0, DF1, DF2
+```
+
+---
+
+## Output
+
+Store:
+- `diagram_config`: The init configuration
+- `node_ids`: List of all node IDs (BG*, PLATFORM, TG*, DF*)
+- `diagram_structure`: Template with comments
+
+---
+
+## Next Step
+
+→ **[Step 02: Format Business Goals](step-02-format-business-goals.md)**
+
+Format the business goals nodes with proper padding and content.
+

package/src/workflows/2-trigger-mapping/mermaid-diagram/steps-c/step-02-format-business-goals.md

@@ -0,0 +1,86 @@
+# Step 02: Format Business Goals Nodes
+
+**Goal:** Create properly formatted business goals nodes with emojis and padding
+
+---
+
+## Node Structure Template
+
+```
+BGX["<br/>EMOJI TITLE<br/><br/>Point 1<br/>Point 2<br/>Point 3<br/><br/>"]
+```
+
+---
+
+## Instructions
+
+### 1. For Each Business Goal
+
+**Required elements:**
+1. Start with `<br/>` (top padding)
+2. Emoji + Title in ALL CAPS
+3. Blank line (`<br/><br/>`)
+4. 3-5 key points (each on separate line with `<br/>`)
+5. End with `<br/><br/>` (bottom padding)
+
+---
+
+### 2. Choose Appropriate Emoji and Highlight PRIMARY GOAL
+
+**PRIMARY GOAL (BG0) - THE ENGINE:**
+- ⭐ Use star emoji for PRIMARY GOAL
+- Title format: `⭐ PRIMARY GOAL: [TITLE]`
+- Include "THE ENGINE" as subtitle
+- This will get gold highlighting in styling step
+
+**Secondary & Tertiary Goals:**
+- 🚀 Growth/Expansion/Adoption
+- 🌟 Community/Opportunities
+- 📊 Objectives/Metrics
+- 💰 Revenue/Business
+- 🤝 Partnerships/Community
+- 🎯 Goals/Targets
+
+---
+
+### 3. Example Implementation
+
+```mermaid
+BG0["<br/>⭐ PRIMARY GOAL: 50 BETA CHAMPIONS<br/><br/>THE ENGINE<br/>50 power users who love the product<br/>Active in community + gave feedback<br/>Naturally recommend to others<br/>Timeline: 6 months<br/><br/>"]
+
+BG1["<br/>🚀 USER GROWTH GOALS<br/><br/>5,000 active monthly users<br/>500 paying subscribers<br/>200 business accounts<br/>1,000 community members<br/>Timeline: 12 months<br/><br/>"]
+
+BG2["<br/>🌟 COMMUNITY VALUE<br/><br/>25 user success stories<br/>100 testimonials published<br/>10 community meetups<br/>User-generated content<br/>Timeline: 12 months<br/><br/>"]
+```
+
+---
+
+## Rules Checklist
+
+- [ ] Node ID follows pattern `BG0`, `BG1`, `BG2`
+- [ ] Starts with `<br/>`
+- [ ] Emoji at beginning of title
+- [ ] Title in ALL CAPS
+- [ ] Blank line after title (`<br/><br/>`)
+- [ ] 3-5 key points
+- [ ] Each point ends with `<br/>`
+- [ ] Ends with `<br/><br/>`
+- [ ] No HTML tags (bold, italic)
+- [ ] Proper quote and bracket closure `"]`
+
+---
+
+## Output
+
+Store:
+- `business_goals_nodes`: Array of formatted BG nodes
+- `business_goals_count`: Number of goals (for connections later)
+
+---
+
+## Next Step
+
+→ **[Step 03: Format Platform Node](step-03-format-platform.md)**
+
+Create the central platform node with transformation statement.
+

package/src/workflows/2-trigger-mapping/mermaid-diagram/steps-c/step-03-format-platform.md

@@ -0,0 +1,94 @@
+# Step 03: Format Platform Node
+
+**Goal:** Create the central platform node with product name and transformation statement
+
+---
+
+## Node Structure Template
+
+```
+PLATFORM["<br/>EMOJI PRODUCT NAME<br/><br/>Category or tagline<br/><br/>Transformation statement<br/>that spans multiple lines<br/>describing the change<br/><br/>"]
+```
+
+---
+
+## Instructions
+
+### 1. Platform Node Format
+
+**Required elements:**
+1. Start with `<br/>` (top padding)
+2. Emoji + Product name in ALL CAPS
+3. Blank line (`<br/><br/>`)
+4. Category or tagline
+5. Blank line (`<br/><br/>`)
+6. Transformation/value statement - break across multiple lines
+7. End with `<br/><br/>` (bottom padding)
+
+---
+
+### 2. Choose Platform Emoji
+
+**Common platform emojis:**
+- 🎨 Design/Creative products
+- 💻 Software/Tech products
+- 📱 Mobile/App products
+- 🛠️ Tools/Utilities
+- 📊 Analytics/Data products
+- 🤖 AI/Automation products
+
+---
+
+### 3. Transformation Statement
+
+**The transformation statement should:**
+- Describe the before → after change
+- Be emotionally compelling
+- Be specific about the transformation
+- Span 3-5 lines for readability
+- Connect to the strategic vision and transformation goals
+
+**Example:**
+```
+Transform users from frustrated<br/>manual processors into confident<br/>automated workflow managers<br/>who scale without stress
+```
+
+---
+
+### 4. Example Implementation
+
+```mermaid
+PLATFORM["<br/>📱 SKILLSWAP<br/><br/>Peer Learning Platform<br/><br/>Connect people who want to learn<br/>with those who want to teach<br/>Exchange skills without money<br/>Build community through sharing<br/><br/>"]
+```
+
+---
+
+## Rules Checklist
+
+- [ ] Node ID is exactly `PLATFORM`
+- [ ] Starts with `<br/>`
+- [ ] Emoji at beginning
+- [ ] Product name in ALL CAPS
+- [ ] Category/tagline included
+- [ ] Transformation statement spans multiple lines
+- [ ] Each line ends with `<br/>`
+- [ ] Ends with `<br/><br/>`
+- [ ] No HTML tags
+- [ ] Proper quote and bracket closure `"]`
+
+---
+
+## Output
+
+Store:
+- `platform_node`: Formatted PLATFORM node
+- `transformation_statement`: For reference in other documents
+
+---
+
+## Next Step
+
+→ **[Step 04: Format Target Groups](step-04-format-target-groups.md)**
+
+Create persona nodes with priority levels and profiles.
+

package/src/workflows/2-trigger-mapping/mermaid-diagram/steps-c/step-04-format-target-groups.md

@@ -0,0 +1,113 @@
+# Step 04: Format Target Group Nodes
+
+**Goal:** Create persona nodes with emojis, priority levels, and key profile traits
+
+---
+
+## Node Structure Template
+
+```
+TGX["<br/>EMOJI PERSONA NAME<br/>PRIORITY LEVEL<br/><br/>Profile trait 1<br/>Profile trait 2<br/>Profile trait 3<br/><br/>"]
+```
+
+---
+
+## Instructions
+
+### 1. For Each Persona/Target Group
+
+**Required elements:**
+1. Start with `<br/>` (top padding)
+2. Emoji + Persona name in ALL CAPS
+3. Priority level (PRIMARY TARGET, SECONDARY TARGET, etc.)
+4. Blank line (`<br/><br/>`)
+5. 3-4 key profile traits (concise, one line each with `<br/>`)
+6. End with `<br/><br/>` (bottom padding)
+
+---
+
+### 2. Choose Persona Emoji
+
+**Common persona emojis:**
+- 🎯 Strategic/Primary personas
+- 💼 Business/Leadership personas
+- 💻 Technical/Developer personas
+- 👥 Team/Group personas
+- 🎨 Creative/Designer personas
+- 📱 User/Customer personas
+
+**Important:** Use same emoji for both TG node and corresponding DF node
+
+---
+
+### 3. Priority Levels
+
+**Use consistent format:**
+- PRIMARY TARGET
+- SECONDARY TARGET  
+- TERTIARY TARGET
+- FOURTH TARGET
+- FIFTH TARGET
+
+**Always in ALL CAPS**
+
+---
+
+### 4. Profile Traits
+
+**Keep traits:**
+- Concise (one line each)
+- Descriptive but brief
+- Connected with dashes for readability
+- 3-4 traits per persona
+
+**Examples:**
+- `Designer - Psychology background`
+- `Job hunting - Overwhelmed`
+- `AI curious but lacks confidence`
+
+---
+
+### 5. Example Implementation
+
+```mermaid
+TG0["<br/>🎓 SARAH THE STUDENT<br/>PRIMARY TARGET<br/><br/>University student - Limited budget<br/>Wants to learn guitar<br/>Has painting skills to trade<br/><br/>"]
+
+TG1["<br/>💼 MARCUS THE MENTOR<br/>SECONDARY TARGET<br/><br/>Professional - Career changer<br/>Expert in coding<br/>Wants to learn business skills<br/><br/>"]
+
+TG2["<br/>🏠 EMMA THE ENTHUSIAST<br/>TERTIARY TARGET<br/><br/>Hobbyist - Retired teacher<br/>Wants to share life experience<br/>Eager to learn new things<br/><br/>"]
+```
+
+---
+
+## Rules Checklist
+
+- [ ] Node ID follows pattern `TG0`, `TG1`, `TG2`
+- [ ] Starts with `<br/>`
+- [ ] Emoji matches persona type
+- [ ] Persona name in ALL CAPS
+- [ ] Priority level in ALL CAPS
+- [ ] Blank line after priority (`<br/><br/>`)
+- [ ] 3-4 profile traits
+- [ ] Each trait ends with `<br/>`
+- [ ] Ends with `<br/><br/>`
+- [ ] No HTML tags
+- [ ] Proper quote and bracket closure `"]`
+
+---
+
+## Output
+
+Store:
+- `target_group_nodes`: Array of formatted TG nodes
+- `persona_emojis`: Map of persona ID to emoji (for DF nodes)
+- `persona_count`: Number of personas
+
+---
+
+## Next Step
+
+→ **[Step 05: Format Driving Forces](step-05-format-driving-forces.md)**
+
+Create driving forces nodes with ✅ wants and ❌ fears.
+

package/src/workflows/2-trigger-mapping/mermaid-diagram/steps-c/step-05-format-driving-forces.md

@@ -0,0 +1,118 @@
+# Step 05: Format Driving Forces Nodes
+
+**Goal:** Create driving forces nodes with wants (✅) and fears (❌) for each persona
+
+---
+
+## Node Structure Template
+
+```
+DFX["<br/>EMOJI PERSONA'S DRIVERS<br/><br/>WANTS<br/>✅ Positive driver 1<br/>✅ Positive driver 2<br/>✅ Positive driver 3<br/><br/>FEARS<br/>❌ Negative driver 1<br/>❌ Negative driver 2<br/>❌ Negative driver 3<br/><br/>"]
+```
+
+---
+
+## Instructions
+
+### 1. For Each Persona (Match TG Nodes)
+
+**Required elements:**
+1. Start with `<br/>` (top padding)
+2. **Same emoji as corresponding TG node** + "PERSONA'S DRIVERS"
+3. Blank line (`<br/><br/>`)
+4. "WANTS" header (no emoji)
+5. Exactly 3 positive drivers with ✅ emoji
+6. Blank line (`<br/><br/>`)
+7. "FEARS" header (no emoji)
+8. Exactly 3 negative drivers with ❌ emoji
+9. End with `<br/><br/>` (bottom padding)
+
+---
+
+### 2. Critical Emoji Rules
+
+**Matching emoji:**
+- DF node MUST use same emoji as corresponding TG node
+- TG0 (🎯) → DF0 (🎯)
+- TG1 (💼) → DF1 (💼)
+- TG2 (💻) → DF2 (💻)
+
+**Driver emojis:**
+- ✅ (white check mark) for all positive drivers
+- ❌ (red X) for all negative drivers
+- NO emojis on "WANTS" and "FEARS" headers
+
+---
+
+### 3. Driver Formatting
+
+**Each driver:**
+- Starts with emoji (✅ or ❌)
+- One space after emoji
+- Concise text (keep under 40 characters if possible)
+- Ends with `<br/>`
+
+**Exactly 3 drivers per category** - no more, no less
+
+---
+
+### 4. Example Implementation
+
+```mermaid
+DF0["<br/>🎓 SARAH'S DRIVERS<br/><br/>WANTS<br/>✅ Learn new skills cheaply<br/>✅ Meet creative people<br/>✅ Build portfolio<br/><br/>FEARS<br/>❌ Wasting limited money<br/>❌ Unsafe meetings<br/>❌ Low quality teaching<br/><br/>"]
+
+DF1["<br/>💼 MARCUS'S DRIVERS<br/><br/>WANTS<br/>✅ Career transition support<br/>✅ Real-world practice<br/>✅ Flexible schedule<br/><br/>FEARS<br/>❌ Time commitment too high<br/>❌ Not finding right match<br/>❌ Awkward interactions<br/><br/>"]
+
+DF2["<br/>🏠 EMMA'S DRIVERS<br/><br/>WANTS<br/>✅ Share life experience<br/>✅ Stay mentally active<br/>✅ Feel valued & useful<br/><br/>FEARS<br/>❌ Being patronized<br/>❌ Tech too complicated<br/>❌ Feeling isolated<br/><br/>"]
+```
+
+---
+
+## Rules Checklist
+
+- [ ] Node ID follows pattern `DF0`, `DF1`, `DF2` (matching TG nodes)
+- [ ] Starts with `<br/>`
+- [ ] **Emoji matches corresponding TG node emoji**
+- [ ] "PERSONA'S DRIVERS" in ALL CAPS
+- [ ] Blank line after title (`<br/><br/>`)
+- [ ] "WANTS" header (no emoji, ALL CAPS)
+- [ ] Exactly 3 positive drivers with ✅
+- [ ] Blank line between sections (`<br/><br/>`)
+- [ ] "FEARS" header (no emoji, ALL CAPS)
+- [ ] Exactly 3 negative drivers with ❌
+- [ ] Ends with `<br/><br/>`
+- [ ] No HTML tags
+- [ ] Proper quote and bracket closure `"]`
+
+---
+
+## Common Mistakes to Avoid
+
+❌ **Don't:**
+- Use different emoji than TG node
+- Add emojis to "WANTS" or "FEARS" headers
+- Include more or less than 3 drivers per category
+- Forget blank line between sections
+
+✅ **Do:**
+- Match emoji exactly from TG node
+- Keep "WANTS" and "FEARS" plain text
+- Use exactly 3 drivers per category
+- Maintain consistent spacing
+
+---
+
+## Output
+
+Store:
+- `driving_forces_nodes`: Array of formatted DF nodes
+- Verify emoji matching with TG nodes
+
+---
+
+## Next Step
+
+→ **[Step 06: Create Connections](step-06-create-connections.md)**
+
+Connect all nodes in the proper flow pattern.
+