From e4ddb8e09415894dc171ef823c17c7ca12be4ee1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A5rten=20Angner?= Date: Thu, 11 Dec 2025 13:26:45 +0100 Subject: [PATCH] feat(wds): Add Module 02 Installation & Setup, renumber subsequent modules MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Create comprehensive Module 02: Installation & Setup - Overview with 4 lessons (Installing, Structure, First Project, Meet Agents) - Tutorial 02 with step-by-step installation guide - Troubleshooting section and verification checklist - Rename module-02-project-brief → module-03-project-brief - Update all module numbers in course overview (now 17 modules total) - Update Mimir orchestrator with new module numbering - Update learning paths with corrected module references Module 02 fills critical gap between 'Why WDS' and actual methodology, providing hands-on installation experience before diving into workflows. --- src/modules/wds/MIMIR-WDS-ORCHESTRATOR.md | 9 +- src/modules/wds/course/00-course-overview.md | 35 +-- .../module-02-overview.md | 130 +++++++++++ .../tutorial-02.md | 217 ++++++++++++++++++ .../tutorial-03.md} | 0 5 files changed, 370 insertions(+), 21 deletions(-) create mode 100644 src/modules/wds/course/module-02-installation-setup/module-02-overview.md create mode 100644 src/modules/wds/course/module-02-installation-setup/tutorial-02.md rename src/modules/wds/course/{module-02-project-brief/tutorial-02.md => module-03-project-brief/tutorial-03.md} (100%) diff --git a/src/modules/wds/MIMIR-WDS-ORCHESTRATOR.md b/src/modules/wds/MIMIR-WDS-ORCHESTRATOR.md index 8879c384..68e47a3c 100644 --- a/src/modules/wds/MIMIR-WDS-ORCHESTRATOR.md +++ b/src/modules/wds/MIMIR-WDS-ORCHESTRATOR.md @@ -78,10 +78,11 @@ Mimir can guide you through the comprehensive WDS course: **Training Includes:** - **Module 00:** Getting Started - Prerequisites, learning paths, and support - **Module 01:** Why WDS Matters - The problem, solution, and path forward -- **Module 02:** Project Brief - Creating strategic foundations -- **Module 04:** Map Triggers & Outcomes - Understanding user needs -- **Module 08:** Initialize Scenario - Building user scenarios -- **Module 12:** Why-Based Specs - Writing meaningful specifications +- **Module 02:** Installation & Setup - Get WDS running and create your first project +- **Module 03:** Project Brief - Creating strategic foundations +- **Module 05:** Map Triggers & Outcomes - Understanding user needs +- **Module 09:** Initialize Scenario - Building user scenarios +- **Module 13:** Why-Based Specs - Writing meaningful specifications **Location:** `src/modules/wds/course/` diff --git a/src/modules/wds/course/00-course-overview.md b/src/modules/wds/course/00-course-overview.md index f0994921..32955b25 100644 --- a/src/modules/wds/course/00-course-overview.md +++ b/src/modules/wds/course/00-course-overview.md @@ -73,47 +73,48 @@ Each module contains: ### Foundation - [Module 01: Why WDS Matters](module-01-why-wds-matters/module-01-overview.md) +- [Module 02: Installation & Setup](module-02-installation-setup/module-02-overview.md) • [Tutorial →](module-02-installation-setup/tutorial-02.md) ### Phase 1: Project Brief -- [Module 02: Create Project Brief](module-02-project-brief/) • [Tutorial →](module-02-project-brief/tutorial-02.md) +- [Module 03: Create Project Brief](module-03-project-brief/) • [Tutorial →](module-03-project-brief/tutorial-03.md) ### Phase 2: Trigger Mapping -- [Module 03: Identify Target Groups](module-03-identify-target-groups/) -- [Module 04: Map Triggers & Outcomes](module-04-map-triggers-outcomes/) • [Tutorial →](module-04-map-triggers-outcomes/tutorial-04.md) -- [Module 05: Prioritize Features](module-05-prioritize-features/) +- [Module 04: Identify Target Groups](module-04-identify-target-groups/) +- [Module 05: Map Triggers & Outcomes](module-05-map-triggers-outcomes/) • [Tutorial →](module-05-map-triggers-outcomes/tutorial-05.md) +- [Module 06: Prioritize Features](module-06-prioritize-features/) ### Phase 3: Platform Requirements -- [Module 06: Platform Requirements](module-06-platform-requirements/) -- [Module 07: Functional Requirements](module-07-functional-requirements/) +- [Module 07: Platform Requirements](module-07-platform-requirements/) +- [Module 08: Functional Requirements](module-08-functional-requirements/) ### Phase 4: Conceptual Design (UX Design) -- [Module 08: Initialize Scenario](module-08-initialize-scenario/) • [Tutorial →](module-08-initialize-scenario/tutorial-08.md) -- [Module 09: Sketch Interfaces](module-09-sketch-interfaces/) -- [Module 10: Analyze with AI](module-10-analyze-with-ai/) -- [Module 11: Decompose Components](module-11-decompose-components/) -- [Module 12: Why-Based Specifications](module-12-why-based-specs/) • [Tutorial →](module-12-why-based-specs/tutorial-12.md) -- [Module 13: Validate Specifications](module-13-validate-specifications/) +- [Module 09: Initialize Scenario](module-09-initialize-scenario/) • [Tutorial →](module-09-initialize-scenario/tutorial-09.md) +- [Module 10: Sketch Interfaces](module-10-sketch-interfaces/) +- [Module 11: Analyze with AI](module-11-analyze-with-ai/) +- [Module 12: Decompose Components](module-12-decompose-components/) +- [Module 13: Why-Based Specifications](module-13-why-based-specs/) • [Tutorial →](module-13-why-based-specs/tutorial-13.md) +- [Module 14: Validate Specifications](module-14-validate-specifications/) ### Phase 5: Design System -- [Module 14: Extract Design Tokens](module-14-extract-design-tokens/) -- [Module 15: Component Library](module-15-component-library/) +- [Module 15: Extract Design Tokens](module-15-extract-design-tokens/) +- [Module 16: Component Library](module-16-component-library/) ### Phase 6: Development Integration -- [Module 16: UI Roadmap](module-16-ui-roadmap/) +- [Module 17: UI Roadmap](module-17-ui-roadmap/) --- ## Learning Paths -**Complete Course:** All 16 modules (~10 hours) +**Complete Course:** All 17 modules (~12 hours) -**Quick Start:** Modules 1, 4, 8, 12 (~3 hours) +**Quick Start:** Modules 1, 2, 5, 9, 13 (~4 hours) **Phase-Specific:** Jump to any phase as needed diff --git a/src/modules/wds/course/module-02-installation-setup/module-02-overview.md b/src/modules/wds/course/module-02-installation-setup/module-02-overview.md new file mode 100644 index 00000000..8966efdb --- /dev/null +++ b/src/modules/wds/course/module-02-installation-setup/module-02-overview.md @@ -0,0 +1,130 @@ +# Module 02: Installation & Setup + +**Get WDS running and create your first project structure** + +--- + +## What You'll Learn + +In this module, you'll: + +1. **Install WDS** - Clone the repository and verify it's working +2. **Understand the Structure** - Learn how WDS organizes your work +3. **Create Your Project** - Set up your first WDS project folder +4. **Meet the Agents** - Get introduced to Freyja, Saga, and Idunn + +**Time investment:** 30 minutes +**Result:** WDS installed and your first project ready to go + +--- + +## Why This Matters + +Before you can design with WDS, you need a solid foundation: + +- **Proper installation** ensures everything works smoothly +- **Understanding the structure** helps you navigate with confidence +- **Project setup** creates the right folders and files +- **Agent familiarity** prepares you for guided workflows + +**This module removes all friction so you can focus on designing.** + +--- + +## Module Contents + +### Lesson 1: Installing WDS +**Reading time:** 5 minutes + +- System prerequisites +- Clone and install +- Verify installation +- Troubleshooting common issues + +### Lesson 2: Understanding WDS Structure +**Reading time:** 10 minutes + +- The `docs/` folder philosophy +- 8-phase folder structure +- How WDS organizes your thinking +- Where AI agents look for information + +### Lesson 3: Creating Your First Project +**Reading time:** 5 minutes + +- Project folder setup +- Initial configuration +- Workspace organization +- Best practices + +### Lesson 4: Meet Your WDS Agents +**Reading time:** 10 minutes + +- Mimir: Your guide and orchestrator +- Freyja: The UX designer +- Saga: The strategic analyst +- Idunn: The PM and coordinator +- When to use each agent + +--- + +## Tutorial: Quick Installation + +**For hands-on learners who want to dive right in:** + +[→ Tutorial 02: Install WDS in 5 Minutes](tutorial-02.md) + +Step-by-step guide with copy-paste commands and verification checkpoints. + +--- + +## After This Module + +Once you've completed Module 02: + +- ✅ WDS is installed and verified +- ✅ You understand the folder structure +- ✅ Your first project is set up +- ✅ You know which agents to call + +**Next:** [Module 03: Create Project Brief](../module-03-project-brief/module-03-overview.md) + +--- + +## Prerequisites + +Before starting this module: + +- ✅ Basic command line familiarity (copy-paste level) +- ✅ Code editor installed (VS Code, Cursor, or similar) +- ✅ Git installed on your system +- ✅ Node.js 18+ installed + +**New to command line?** No problem! We provide exact commands to copy and paste. + +--- + +## Learning Options + +**🎧 Audio Learning:** +Generate an audio podcast using NotebookLM ([see guide](../00-getting-started/00-getting-started-NOTEBOOKLM-PROMPT.md)) + +**📖 Reading:** +Follow the lessons in order for comprehensive understanding + +**⚡ Quick Start:** +Jump straight to the tutorial for immediate hands-on experience + +--- + +## Ready to Install? + +**[Start with Lesson 1: Installing WDS →](lesson-01-installing-wds.md)** + +Or jump to: **[Tutorial 02 →](tutorial-02.md)** + +--- + +*Part of the WDS Course: From Designer to Linchpin* +*[← Back to Course Overview](../00-course-overview.md)* + diff --git a/src/modules/wds/course/module-02-installation-setup/tutorial-02.md b/src/modules/wds/course/module-02-installation-setup/tutorial-02.md new file mode 100644 index 00000000..4135e80f --- /dev/null +++ b/src/modules/wds/course/module-02-installation-setup/tutorial-02.md @@ -0,0 +1,217 @@ +# Tutorial 02: Install WDS in 5 Minutes + +**Quick, hands-on guide to get WDS running** + +--- + +## What You'll Do + +1. Check prerequisites +2. Clone WDS repository +3. Verify installation +4. Create your first project +5. Meet Mimir + +**Total time:** 5-10 minutes + +--- + +## Step 1: Check Prerequisites ✅ + +**Open your terminal and verify:** + +```bash +# Check Node.js version (need 18+) +node --version + +# Check Git +git --version +``` + +**Expected output:** +- Node: `v18.x.x` or higher +- Git: `git version 2.x.x` or similar + +**Missing something?** +- Install Node.js: https://nodejs.org/ +- Install Git: https://git-scm.com/ + +--- + +## Step 2: Clone WDS Repository 📦 + +**Choose your workspace location:** + +```bash +# Navigate to where you want WDS +cd ~/projects # Mac/Linux +cd C:\dev # Windows + +# Clone WDS +git clone https://github.com/whiteport-collective/whiteport-design-studio.git + +# Enter the directory +cd whiteport-design-studio +``` + +**✅ Checkpoint:** You should see WDS files in your directory + +--- + +## Step 3: Verify Installation 🔍 + +**Check the structure:** + +```bash +# List WDS contents +ls -la # Mac/Linux +dir # Windows +``` + +**You should see:** +- `src/modules/wds/` - The WDS methodology +- `src/modules/wds/agents/` - Agent definitions +- `src/modules/wds/workflows/` - Workflow guides +- `src/modules/wds/course/` - This training + +**✅ Checkpoint:** All folders present + +--- + +## Step 4: Add WDS to Your IDE Workspace 🎨 + +**Option A: Cursor / VS Code** + +1. Open your IDE +2. File → Add Folder to Workspace +3. Select the `whiteport-design-studio` folder +4. WDS is now in your workspace! + +**Option B: Already have a project?** + +Add WDS alongside your existing project: + +``` +YourWorkspace/ +├── your-project/ +└── whiteport-design-studio/ ← Add this +``` + +**✅ Checkpoint:** WDS appears in your IDE sidebar + +--- + +## Step 5: Create Your First Project 📁 + +**In your project folder, create the docs structure:** + +```bash +# Navigate to your project (not WDS) +cd ../your-project + +# Create docs folder with WDS structure +mkdir -p docs/{1-project-brief,2-trigger-mapping,3-prd-platform,4-ux-design,5-design-system,6-design-deliveries,7-testing,8-ongoing-development} + +# Verify structure +ls docs/ +``` + +**✅ Checkpoint:** You should see 8 numbered folders + +--- + +## Step 6: Meet Mimir 🧠 + +**Start a new conversation with your AI assistant:** + +``` +@wds-mimir Hello! I just installed WDS and I'm ready to start. +``` + +**Mimir will:** +1. Welcome you +2. Assess your skill level +3. Check your installation +4. Guide your next steps + +**Alternative:** You can drag the Mimir file to your chat: +`whiteport-design-studio/src/modules/wds/MIMIR-WDS-ORCHESTRATOR.md` + +--- + +## Troubleshooting 🔧 + +### Issue: "Command not found: git" +**Solution:** Install Git from https://git-scm.com/ + +### Issue: "Node version too old" +**Solution:** Update Node.js from https://nodejs.org/ + +### Issue: "Permission denied" +**Solution:** +- Mac/Linux: Try `sudo` if needed +- Windows: Run terminal as administrator + +### Issue: "Can't find WDS in workspace" +**Solution:** Make sure you added the folder to your IDE workspace (Step 4) + +--- + +## Verification Checklist ✅ + +Before moving on, confirm: + +- ☑️ WDS repository cloned +- ☑️ WDS added to IDE workspace +- ☑️ Your project has `docs/` folder structure +- ☑️ 8 phase folders created (1- through 8-) +- ☑️ Mimir responds when called + +**All checked?** You're ready for Module 03! 🎉 + +--- + +## What You Just Accomplished 🎊 + +In just 5-10 minutes, you: + +1. ✅ Installed WDS +2. ✅ Set up proper project structure +3. ✅ Connected with Mimir +4. ✅ Ready to start designing + +**This is a big deal!** Many designers struggle with setup. You just cleared that hurdle with ease. + +--- + +## Next Steps + +**Ready to keep going?** + +[→ Module 03: Create Project Brief](../module-03-project-brief/module-03-overview.md) + +**Want to explore?** + +- Try calling different agents: `@wds-mimir`, `@freyja-ux`, `@saga-analyst`, `@idunn-pm` +- Read about the 8-phase structure: [Understanding WDS Structure](lesson-02-understanding-structure.md) +- Learn the philosophy: [Module 01: Why WDS Matters](../module-01-why-wds-matters/module-01-overview.md) + +--- + +## Pro Tips 💡 + +**Tip 1:** Keep WDS in your workspace permanently. Reference it across all your projects. + +**Tip 2:** The `docs/` folder is your source of truth. Everything goes here. + +**Tip 3:** Start every new project with the 8 phase folders. Even if you don't use all of them immediately. + +**Tip 4:** Call Mimir whenever you're unsure. That's literally what he's there for. + +--- + +**Congratulations! WDS is ready to use.** 🌊 + +*Part of Module 02: Installation & Setup* +*[← Back to Module Overview](module-02-overview.md)* + diff --git a/src/modules/wds/course/module-02-project-brief/tutorial-02.md b/src/modules/wds/course/module-03-project-brief/tutorial-03.md similarity index 100% rename from src/modules/wds/course/module-02-project-brief/tutorial-02.md rename to src/modules/wds/course/module-03-project-brief/tutorial-03.md