whiteport-design-studio 0.1.0

package/src/workflows/workflow-init/excalidraw-setup-prompt.md

@@ -0,0 +1,365 @@
+# Excalidraw Setup Prompt
+
+**Agent micro-instruction for configuring Excalidraw during project initialization**
+
+---
+
+## When to Use
+
+**Trigger:** During project initialization, after asking about sketching tool preference
+
+**Context:** User has indicated they want to use Excalidraw for sketching
+
+---
+
+## Prompt Sequence
+
+### **Step 1: Confirm Excalidraw**
+
+<ask>
+```
+You've chosen Excalidraw for sketching. Great choice!
+
+Excalidraw is a free, open-source whiteboard tool that:
+✓ Creates hand-drawn style wireframes
+✓ Works in VS Code or web browser
+✓ AI can generate and analyze sketches
+✓ Version control friendly (JSON files)
+
+Would you like me to configure Excalidraw for this project? (y/n)
+
+```
+</ask>
+
+**If no:** Skip Excalidraw configuration, set `sketching.tool: "other"` in config
+
+**If yes:** Continue to Step 2
+
+---
+
+### **Step 2: Auto-Export Preference**
+
+<ask>
+```
+
+Excalidraw files (.excalidraw) don't display in GitHub by default.
+They need to be exported to PNG/SVG for documentation.
+
+Would you like automatic export enabled?
+
+Options:
+
+1. Manual export (you export when needed)
+2. Auto-export (GitHub Actions exports automatically on save)
+
+Your choice (1/2):
+
+````
+</ask>
+
+**Record:**
+```yaml
+excalidraw:
+  auto_export: true   # if option 2
+  auto_export: false  # if option 1
+````
+
+**Note:** If auto-export chosen, inform user that GitHub Actions setup will be needed
+
+---
+
+### **Step 3: Component Library**
+
+<ask>
+```
+WDS includes an Excalidraw component library with:
+- Device frames (mobile, tablet, desktop)
+- Common UI components (buttons, inputs, cards)
+- Layout templates
+
+Would you like to use the WDS component library? (y/n)
+
+````
+</ask>
+
+**Record:**
+```yaml
+excalidraw:
+  use_library: true   # if yes
+  use_library: false  # if no
+````
+
+---
+
+### **Step 4: Grid Settings**
+
+<ask>
+```
+Excalidraw can snap elements to a grid for alignment.
+
+WDS recommends 20px grid (matches spacing system).
+
+Grid settings:
+
+1. 20px grid with snap (recommended)
+2. 10px grid with snap (finer control)
+3. No grid (free-form)
+
+Your choice (1/2/3):
+
+````
+</ask>
+
+**Record:**
+```yaml
+excalidraw:
+  grid_size: 20          # if option 1
+  grid_size: 10          # if option 2
+  grid_size: 0           # if option 3
+  snap_to_grid: true     # if option 1 or 2
+  snap_to_grid: false    # if option 3
+````
+
+---
+
+### **Step 5: Theme Preference**
+
+<ask>
+```
+Choose default Excalidraw theme:
+
+1. Light (better for screenshots and documentation)
+2. Dark (easier on eyes for long sessions)
+
+Your choice (1/2):
+
+````
+</ask>
+
+**Record:**
+```yaml
+excalidraw:
+  theme: "light"   # if option 1
+  theme: "dark"    # if option 2
+````
+
+---
+
+### **Step 6: Installation Instructions**
+
+<output>
+```
+✅ Excalidraw configured for this project!
+
+Configuration saved to: project-config.yaml
+
+NEXT STEPS:
+
+1. Install Excalidraw (choose one):
+
+   Option A: VS Code Extension (Recommended)
+   - Open Extensions (Ctrl+Shift+X)
+   - Search "Excalidraw"
+   - Install "Excalidraw Editor"
+
+   Option B: Web App
+   - Go to <https://excalidraw.com>
+   - No installation needed
+
+2. Load WDS Component Library (if enabled):
+   - Open Excalidraw
+   - Click library icon
+   - Load: workflows/4-ux-design/excalidraw-integration/wds-library.excalidrawlib
+
+3. Configure Settings:
+   - Grid: {{GRID_SIZE}}px
+   - Snap to grid: {{SNAP_TO_GRID}}
+   - Theme: {{THEME}}
+
+DOCUMENTATION:
+
+- Setup Guide: workflows/4-ux-design/excalidraw-integration/excalidraw-setup.md
+- Sketching Guide: workflows/4-ux-design/excalidraw-integration/sketching-guide.md
+- AI Collaboration: workflows/4-ux-design/excalidraw-integration/ai-collaboration.md
+
+Ready to start sketching! 🎨
+
+````
+</output>
+
+---
+
+## Configuration Output
+
+**Update project-config.yaml:**
+
+```yaml
+sketching:
+  tool: excalidraw
+
+  excalidraw:
+    enabled: true
+    auto_export: {{USER_CHOICE}}
+    use_library: {{USER_CHOICE}}
+    grid_size: {{USER_CHOICE}}
+    snap_to_grid: {{USER_CHOICE}}
+    theme: {{USER_CHOICE}}
+    sketches_folder: "sketches"
+````
+
+---
+
+## If User Declines Excalidraw
+
+<output>
+```
+No problem! You can use any sketching tool you prefer.
+
+Common alternatives:
+
+- Paper and pen (photograph/scan)
+- Figma (professional design tool)
+- iPad + Apple Pencil
+- Other digital whiteboard tools
+
+WDS works with any sketching method. Just:
+
+1. Create your sketches
+2. Export to PNG/JPG
+3. Upload to AI for analysis
+4. Save in scenario sketches folder
+
+Configuration saved with: sketching.tool: "other"
+
+```
+</output>
+
+---
+
+## Integration with Phase 4
+
+**During Phase 4B (Sketch Interface):**
+
+**If Excalidraw enabled:**
+```
+
+Agent: "I see you've configured Excalidraw for this project.
+
+Would you like to:
+
+1. Sketch manually in Excalidraw
+2. Have me generate layout variations in Excalidraw
+3. Use a different tool for this scenario
+
+Your choice:"
+
+```
+
+**If Excalidraw not enabled:**
+```
+
+Agent: "Time to sketch the interface.
+
+You can:
+
+1. Sketch on paper (photograph/scan)
+2. Use your preferred digital tool
+3. Enable Excalidraw now (if you'd like)
+
+Your choice:"
+
+```
+
+---
+
+## Error Handling
+
+### **If user unsure:**
+
+<output>
+```
+
+Not sure if Excalidraw is right for you?
+
+PROS:
+✓ Free and open-source
+✓ Works in VS Code or browser
+✓ AI can generate sketches
+✓ Version control friendly
+✓ Easy to learn
+
+CONS:
+✗ Requires tool setup
+✗ Not as precise as Figma
+✗ Limited styling options
+
+RECOMMENDATION:
+Try it! You can always switch tools later.
+Configuration can be changed in project-config.yaml.
+
+Would you like to enable Excalidraw? (y/n)
+
+```
+</output>
+
+### **If installation fails:**
+
+<output>
+```
+
+Having trouble installing Excalidraw?
+
+FALLBACK OPTIONS:
+
+1. Use web version (no installation):
+   <https://excalidraw.com>
+2. Use different tool temporarily:
+   - Paper and pen
+   - Figma
+   - Other whiteboard tool
+3. Skip sketching for now:
+   - Describe interface verbally
+   - AI can generate sketches later
+
+Your choice:
+
+```
+</output>
+
+---
+
+## Post-Configuration
+
+**Create folder structure:**
+```
+
+C-Scenarios/
+└── [scenario-name]/
+└── sketches/ ← Created automatically
+
+```
+
+**If use_library: true:**
+- Verify wds-library.excalidrawlib exists
+- Provide path for loading
+
+**If auto_export: true:**
+- Check if GitHub Actions can be configured
+- Provide setup instructions
+- Warn if not possible (e.g., not using GitHub)
+
+---
+
+## Success Criteria
+
+**Configuration complete when:**
+- ✓ User choice recorded in project-config.yaml
+- ✓ Installation instructions provided
+- ✓ Documentation links shared
+- ✓ Folder structure created
+- ✓ User knows next steps
+
+---
+
+**This prompt ensures smooth Excalidraw setup tailored to user preferences!** ⚙️✨
+```

package/src/workflows/workflow-init/instructions.md

@@ -0,0 +1,22 @@
+# WDS Workflow Init - Project Setup Instructions
+
+<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: wds-workflow-init/workflow.yaml</critical>
+<critical>Communicate in {communication_language} with {user_name}</critical>
+
+<workflow>
+
+<step n="1" goal="Welcome and project name">
+<output>Welcome to Whiteport Design Studio, {user_name}! 🎨
+
+I'll help you set up your design project with the right structure and phases.</output>
+
+<ask>What's your project called?</ask>
+
+<action>Store project_name</action>
+<template-output>project_name</template-output>
+
+<action>Load and execute: `workflow-init/steps/step-02-project-structure.md`</action>
+</step>
+
+</workflow>

package/src/workflows/workflow-init/methodology-instructions/custom-methodology-template.md

@@ -0,0 +1,299 @@
+# Custom Methodology Template
+
+# Create your own workflow structure
+
+## Overview
+
+If WDS v6 or WPS2C v4 don't fit your needs, create a custom methodology!
+
+This file serves as a template for defining your own:
+
+- Phase structure
+- Folder naming conventions
+- Agent responsibilities
+- Deliverables
+
+---
+
+## How to Use
+
+1. **Copy this template** to your project: `docs/.custom-methodology.md`
+2. **Fill in your structure** (see sections below)
+3. **Update project outline**:
+
+```yaml
+methodology:
+  type: 'custom'
+  instructions_file: 'docs/.custom-methodology.md'
+```
+
+4. **Agents will read your custom instructions** on activation
+
+---
+
+## Define Your Phase Structure
+
+List all phases in your methodology:
+
+```
+{{PHASE_1_NAME}}/     → {{PHASE_1_DESCRIPTION}}
+{{PHASE_2_NAME}}/     → {{PHASE_2_DESCRIPTION}}
+{{PHASE_3_NAME}}/     → {{PHASE_3_DESCRIPTION}}
+```
+
+**Example**:
+
+```
+00-Discovery/         → Research and exploration
+01-Strategy/          → Strategic planning
+02-Design/            → Visual and UX design
+03-Development/       → Implementation
+04-Launch/            → Deployment and testing
+```
+
+---
+
+## Phase Details Template
+
+For each phase, define:
+
+### {{PHASE_NAME}}
+
+**Agent**: Which WDS agent handles this? (Saga/Freya/Idunn or specify custom)  
+**Folder**: `docs/{{FOLDER_NAME}}/`  
+**Required**: Yes/No  
+**Deliverables**:
+
+- {{DELIVERABLE_1}}
+- {{DELIVERABLE_2}}
+- {{DELIVERABLE_3}}
+
+**Skip if**: {{CONDITIONS_TO_SKIP}}
+
+---
+
+## Example: Lean Startup Methodology
+
+Here's an example custom methodology:
+
+### Phase 1: Build
+
+**Agent**: Freya WDS Designer Agent  
+**Folder**: `docs/01-Build/`  
+**Required**: Yes  
+**Deliverables**:
+
+- MVP specification
+- Core feature prototypes
+- Quick-and-dirty designs
+
+### Phase 2: Measure
+
+**Agent**: Saga WDS Analyst Agent  
+**Folder**: `docs/02-Measure/`  
+**Required**: Yes  
+**Deliverables**:
+
+- Analytics setup
+- Success metrics definition
+- User feedback collection plan
+
+### Phase 3: Learn
+
+**Agent**: Saga WDS Analyst Agent  
+**Folder**: `docs/03-Learn/`  
+**Required**: Yes  
+**Deliverables**:
+
+- Data analysis
+- Pivot or persevere decision
+- Next iteration plan
+
+---
+
+## Folder Naming Convention
+
+Explain your naming system:
+
+**Pattern**: `{{PREFIX}}-{{NAME}}/`
+
+**Example**: `01-Build/`, `02-Measure/`, `03-Learn/`
+
+**Why this pattern?**
+{{EXPLAIN_YOUR_REASONING}}
+
+---
+
+## Project Outline Configuration
+
+Map your custom phases to the standard WDS phase structure:
+
+```yaml
+methodology:
+  type: 'custom'
+  instructions_file: 'docs/.custom-methodology.md'
+
+phases:
+  phase_1_project_brief:
+    folder: '{{YOUR_PHASE_1_FOLDER}}'
+    name: '{{YOUR_PHASE_1_NAME}}'
+    agent: '{{AGENT_NAME}}'
+
+  phase_2_trigger_mapping:
+    active: false # Skip if not in your methodology
+    skip_reason: 'Not part of custom methodology'
+
+  phase_4_ux_design:
+    folder: '{{YOUR_DESIGN_FOLDER}}'
+    name: '{{YOUR_DESIGN_PHASE_NAME}}'
+    agent: 'freya-designer'
+```
+
+---
+
+## Agent Behavior Instructions
+
+Tell agents how to behave with your custom methodology:
+
+### Saga WDS Analyst Agent
+
+- **Responsibilities**: {{LIST_SAGA_RESPONSIBILITIES}}
+- **Phases owned**: {{PHASE_NAMES}}
+- **Special instructions**: {{CUSTOM_BEHAVIOR}}
+
+### Freya WDS Designer Agent
+
+- **Responsibilities**: {{LIST_FREYA_RESPONSIBILITIES}}
+- **Phases owned**: {{PHASE_NAMES}}
+- **Special instructions**: {{CUSTOM_BEHAVIOR}}
+
+### Idunn WDS PM Agent
+
+- **Responsibilities**: {{LIST_IDUNN_RESPONSIBILITIES}}
+- **Phases owned**: {{PHASE_NAMES}}
+- **Special instructions**: {{CUSTOM_BEHAVIOR}}
+
+---
+
+## Deliverable Templates
+
+Link to or define templates for your deliverables:
+
+### {{DELIVERABLE_NAME}}
+
+**Template location**: `docs/templates/{{TEMPLATE_FILE}}`  
+**Required sections**:
+
+- {{SECTION_1}}
+- {{SECTION_2}}
+- {{SECTION_3}}
+
+**Format**: Markdown / YAML / HTML / Other
+
+---
+
+## Workflow Paths
+
+Define common project paths in your methodology:
+
+### Path 1: {{PATH_NAME}}
+
+**Use for**: {{PROJECT_TYPE}}  
+**Active phases**: {{LIST_PHASES}}  
+**Typical duration**: {{TIMEFRAME}}
+
+### Path 2: {{PATH_NAME}}
+
+**Use for**: {{PROJECT_TYPE}}  
+**Active phases**: {{LIST_PHASES}}  
+**Typical duration**: {{TIMEFRAME}}
+
+---
+
+## Integration with WDS Agents
+
+Specify how WDS agents should adapt:
+
+**Project Analysis**:
+
+- Agents should check for: `{{LIST_KEY_FILES_OR_FOLDERS}}`
+- Status indicators: {{HOW_TO_DETERMINE_STATUS}}
+- Completion criteria: {{WHAT_MAKES_A_PHASE_COMPLETE}}
+
+**Scenario Tracking** (if applicable):
+
+- Scenario folder location: `{{PATH}}`
+- Scenario naming convention: `{{PATTERN}}`
+- Status tracking: {{HOW_TO_TRACK}}
+
+**Handoffs**:
+
+- When to suggest Saga: {{CONDITIONS}}
+- When to suggest Freya: {{CONDITIONS}}
+- When to suggest Idunn: {{CONDITIONS}}
+
+---
+
+## Example Custom Methodologies
+
+### 1. Design Sprint (Google Ventures)
+
+```
+Monday/       → Understand
+Tuesday/      → Diverge
+Wednesday/    → Decide
+Thursday/     → Prototype
+Friday/       → Test
+```
+
+### 2. Shape Up (Basecamp)
+
+```
+00-Pitch/           → Problem definition and appetite
+01-Betting/         → Project selection
+02-Shaping/         → Scope definition
+03-Building/        → Implementation (6 weeks)
+04-Cooldown/        → 2-week buffer
+```
+
+### 3. JTBD (Jobs to Be Done)
+
+```
+01-Research/        → Job discovery
+02-Job-Stories/     → Job story creation
+03-Design/          → Solution design
+04-Validation/      → Job completion testing
+```
+
+---
+
+## Custom Methodology Checklist
+
+Before finalizing your custom methodology, ensure:
+
+- [ ] All phases are clearly defined
+- [ ] Folder naming is consistent and logical
+- [ ] Agent responsibilities are mapped
+- [ ] Deliverables are specified for each phase
+- [ ] Project outline configuration is complete
+- [ ] Workflow paths are documented (if multiple)
+- [ ] Integration instructions for WDS agents are clear
+
+---
+
+## Need Help?
+
+If you're creating a custom methodology:
+
+1. Start with WDS v6 or WPS2C v4 as a base
+2. Adapt only what's necessary
+3. Document thoroughly for your team
+4. Test with one project before rolling out
+
+**Questions?** Ask any WDS agent for guidance on creating custom methodologies.
+
+---
+
+**Template Version**: 1.0  
+**Last Updated**: 2024-12-10  
+**Part of**: WDS v6 (Whiteport Design Studio)