From c7b9793d5a1d79f6d4b4ca9bdcfa09ce3c927061 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A5rten=20Angner?= Date: Thu, 11 Dec 2025 14:08:52 +0100 Subject: [PATCH] refactor(wds): Restructure Module 02 with separate lesson folders Major restructure for better organization and navigation: New Structure: - module-02-overview.md (minimal, just links to lessons) - lesson-01-github-account/tutorial.md - lesson-02-create-repository/tutorial.md - lesson-03-install-ide/tutorial.md - lesson-04-git-setup/tutorial.md - lesson-05-clone-and-wds/tutorial.md - lesson-06-initiate-mimir/tutorial.md Each Lesson Contains: - Focused tutorial on one specific task - Clear time estimate - Step-by-step instructions - Troubleshooting section - Navigation to next lesson Overview Benefits: - Minimal and scannable - Easy to navigate between lessons - See progress through module - Jump to specific lesson easily Lesson Benefits: - Self-contained tutorials - Focused on single topic - Can be referenced individually - Progressive complexity - Clear completion criteria Old tutorial-02.md kept for reference until verified working. --- .../lesson-01-github-account/tutorial.md | 94 +++++++ .../lesson-02-create-repository/tutorial.md | 223 ++++++++++++++++ .../lesson-03-install-ide/tutorial.md | 189 ++++++++++++++ .../lesson-04-git-setup/tutorial.md | 159 ++++++++++++ .../lesson-05-clone-and-wds/tutorial.md | 212 ++++++++++++++++ .../lesson-06-initiate-mimir/tutorial.md | 238 ++++++++++++++++++ .../module-02-overview.md | 167 ++++-------- 7 files changed, 1164 insertions(+), 118 deletions(-) create mode 100644 src/modules/wds/course/module-02-installation-setup/lesson-01-github-account/tutorial.md create mode 100644 src/modules/wds/course/module-02-installation-setup/lesson-02-create-repository/tutorial.md create mode 100644 src/modules/wds/course/module-02-installation-setup/lesson-03-install-ide/tutorial.md create mode 100644 src/modules/wds/course/module-02-installation-setup/lesson-04-git-setup/tutorial.md create mode 100644 src/modules/wds/course/module-02-installation-setup/lesson-05-clone-and-wds/tutorial.md create mode 100644 src/modules/wds/course/module-02-installation-setup/lesson-06-initiate-mimir/tutorial.md diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-01-github-account/tutorial.md b/src/modules/wds/course/module-02-installation-setup/lesson-01-github-account/tutorial.md new file mode 100644 index 00000000..18a32233 --- /dev/null +++ b/src/modules/wds/course/module-02-installation-setup/lesson-01-github-account/tutorial.md @@ -0,0 +1,94 @@ +# Lesson 01: Create Your GitHub Account + +**Get your professional GitHub account set up** + +--- + +## What You'll Do + +- Create GitHub account +- Choose professional username +- Verify your email +- Log in successfully + +**Time:** 5-10 minutes + +--- + +## What is GitHub? + +Think of GitHub as: +- **Professional cloud storage** for your project files +- **Time machine** - every change saved, can go back to any version +- **Collaboration tool** - work with others seamlessly + +**For designers:** GitHub is where your WDS specifications will live, backed up and version-controlled. + +--- + +## Step 1: Sign Up + +1. Go to **https://github.com** +2. Click the green **"Sign up"** button (top right) +3. Enter your email address +4. Create a password (make it strong!) +5. Choose a username + +--- + +## Choosing Your Username + +**Username Tips:** + +✅ **Professional** - You might share this with clients +✅ **Simple** - Easy to remember and spell +✅ **Memorable** - Represents you or your work + +**Good Examples:** +- `john-designer` +- `sarahux` +- `mike-creates` +- `[yourname]-design` + +**Avoid:** +- `xXcooldesigner420Xx` (not professional) +- `temporary12345` (not memorable) +- Very long complicated names + +--- + +## Step 2: Verify Account + +6. Verify you're human (solve the puzzle) +7. Check your email inbox +8. Click the verification link from GitHub +9. You'll be redirected back to GitHub + +**✅ Checkpoint:** You can log in to GitHub! + +--- + +## Troubleshooting + +**Issue:** Didn't receive verification email +**Solution:** Check spam folder, or click "Resend verification email" + +**Issue:** Username already taken +**Solution:** Try variations with hyphens or numbers (`john-ux-designer`, `sarah-designs-2`) + +**Issue:** Password requirements +**Solution:** Use at least 8 characters, mix of letters and numbers + +--- + +## What's Next? + +Now that you have a GitHub account, you're ready to create your first repository! + +**[Continue to Lesson 02: Create Repository →](../lesson-02-create-repository/tutorial.md)** + +--- + +*Part of Module 02: Installation & Setup* +*[← Back to Module Overview](../module-02-overview.md)* + diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-02-create-repository/tutorial.md b/src/modules/wds/course/module-02-installation-setup/lesson-02-create-repository/tutorial.md new file mode 100644 index 00000000..1814779c --- /dev/null +++ b/src/modules/wds/course/module-02-installation-setup/lesson-02-create-repository/tutorial.md @@ -0,0 +1,223 @@ +# Lesson 02: Create Your Project Repository + +**Set up your project repository or join an existing one** + +--- + +## What You'll Do + +- Understand three common scenarios +- Create a new repository (Scenario A) +- OR join an existing project (Scenario B) +- Decide: Single repo or separate specs repo +- Name your repository correctly + +**Time:** 10-15 minutes + +--- + +## Three Scenarios + +**Before creating a repository, determine which applies to you:** + +### Scenario A: Starting a New Project +- You're starting fresh +- No existing repository +- You control the setup +- **→ Continue reading below** + +### Scenario B: Joining an Existing Project +- Team project already exists +- Client has existing repository +- Contributing to ongoing work +- **→ Skip to "Joining Existing Repository" section below** + +### Scenario C: Just Learning WDS +- You're just learning WDS methodology +- Not starting a project yet +- Following along with tutorial +- **→ Skip to [Lesson 03: Install IDE](../lesson-03-install-ide/tutorial.md)** + +**Most beginners: Use Scenario A** + +--- + +## Scenario A: Create New Repository + +### Step 1: Navigate to Repositories + +1. Log in to GitHub +2. Click your **profile icon** (top right) +3. Click **"Your repositories"** +4. Click the green **"New"** button + +--- + +### Step 2: Choose Your Repository Structure + +**IMPORTANT: Your naming choice determines your structure!** + +#### Option A: Single Repository + +**Name it simply:** +- `dog-walker-app` +- `recipe-platform` +- `fitness-tracker` + +**Structure:** +``` +dog-walker-app/ +├── docs/ ← Your WDS specifications +└── src/ ← Code +``` + +**Use when:** +- ✅ You're close to the development team +- ✅ You want simple, direct communication +- ✅ You're building the whole project yourself +- ✅ Working closely with other designers +- ✅ Small team with full ownership +- ✅ Rapid iteration and feedback + +--- + +#### Option B: Separate Specifications Repository + +**Name with `-specs` suffix:** +- `dog-walker-app-specs` +- `recipe-platform-specs` +- `fitness-tracker-specs` + +**Structure:** +``` +dog-walker-app-specs/ ← This repo (specifications only) +dog-walker-app/ ← Separate code repo (create later) +``` + +**Use when:** +- ✅ Corporate or enterprise environment +- ✅ Specifications serve multiple products/platforms +- ✅ Development team has many developers +- ✅ Extensive or complex codebase +- ✅ Clear handoff boundaries needed +- ✅ Design and dev have separate workflows + +--- + +### Step 3: Repository Settings + +**Repository Name:** +- Use lowercase with hyphens +- Descriptive and specific +- Examples: `dog-walker-app` OR `dog-walker-app-specs` + +**Description:** +- Short one-liner about your project +- Example: "UX specifications for Dog Week family coordination app" + +**Public vs Private:** +- **Public:** Anyone can see (good for portfolio projects) +- **Private:** Only you and invited collaborators (good for client work) + +**Initialize with README:** +- ☑️ **Check this box!** It creates a starter file + +**DO NOT** add .gitignore or license yet (we'll do this later) + +--- + +### Step 4: Create Repository + +Click the green **"Create repository"** button + +**✅ Checkpoint:** You see your new repository with a README file + +**Remember your choice:** +- Single repo (`my-project`)? Specs and code together +- Separate repo (`my-project-specs`)? You'll create a second repo for code later + +**[Continue to Lesson 03: Install IDE →](../lesson-03-install-ide/tutorial.md)** + +--- + +## Scenario B: Joining Existing Repository + +**If you're joining a team project or client repository:** + +### Step 1: Request Repository Access + +**Email template for repository owner or team lead:** + +``` +Hi [Name], + +I'd like to contribute to [project-name] using WDS methodology. +Could you add me as a collaborator to the repository? + +My GitHub username: [your-username] + +Thank you! +``` + +**They will:** +1. Go to repository settings +2. Click "Collaborators" +3. Add your GitHub username +4. You'll receive an email invitation + +--- + +### Step 2: Accept the Invitation + +1. Check your email for GitHub invitation +2. Click **"Accept invitation"** +3. Or go to the repository URL directly +4. You'll see an invitation banner → Click **"Accept"** + +--- + +### Step 3: Understand the Existing Structure + +**Before cloning, check what structure they're using:** + +**Look at the repository name:** +- `project-name` → Likely single repo (specs + code together) +- `project-name-specs` → Separate specs repo (code elsewhere) + +**Browse the repository:** +- Has `docs/` folder? → Probably already using WDS! +- Has `src/` or `app/` folder? → Code lives here too (single repo) +- Only documentation? → Separate specs repo + +**When in doubt:** Ask the team lead! + +**✅ Checkpoint:** Invitation accepted, you understand the structure + +**[Continue to Lesson 03: Install IDE →](../lesson-03-install-ide/tutorial.md)** + +--- + +## Troubleshooting + +**Issue:** Repository name already taken +**Solution:** Add your username or team name: `yourname-project-name` + +**Issue:** Don't know which structure to use +**Solution:** Ask your team lead, or use single repo (simpler) + +**Issue:** Invitation expired +**Solution:** Ask repository owner to resend invitation + +--- + +## What's Next? + +Now that your repository is set up, it's time to install your IDE! + +**[Continue to Lesson 03: Install IDE →](../lesson-03-install-ide/tutorial.md)** + +--- + +*Part of Module 02: Installation & Setup* +*[← Back to Module Overview](../module-02-overview.md)* + diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-03-install-ide/tutorial.md b/src/modules/wds/course/module-02-installation-setup/lesson-03-install-ide/tutorial.md new file mode 100644 index 00000000..04950fa6 --- /dev/null +++ b/src/modules/wds/course/module-02-installation-setup/lesson-03-install-ide/tutorial.md @@ -0,0 +1,189 @@ +# Lesson 03: Install Your IDE + +**Get your workspace set up with Cursor or VS Code** + +--- + +## What You'll Do + +- Choose between Cursor and VS Code +- Download and install your IDE +- Complete first-launch setup +- Sign in with GitHub + +**Time:** 10 minutes + +--- + +## What is an IDE? + +**IDE = Integrated Development Environment** + +Think of it as your workspace for creating specifications. Like Microsoft Word, but designed for: +- Writing markdown specifications +- Managing project files +- Working with AI assistants +- Version control integration + +--- + +## Choose Your IDE + +### Cursor (Recommended for WDS) + +**Why Cursor:** +- ✅ Built specifically for AI-augmented work +- ✅ Modern, clean interface +- ✅ Perfect for WDS methodology +- ✅ Excellent AI chat integration + +**Download:** https://cursor.sh + +--- + +### VS Code (Solid Alternative) + +**Why VS Code:** +- ✅ Industry standard +- ✅ Huge extension marketplace +- ✅ Works great with WDS +- ✅ What many developers use + +**Download:** https://code.visualstudio.com + +--- + +**For complete beginners:** Choose **Cursor**. It's designed for the way you'll work with WDS. + +--- + +## Install Cursor + +### Step 1: Download + +1. Go to **https://cursor.sh** +2. Click the download button for your platform +3. Wait for download to complete + +### Step 2: Install + +**Windows:** +1. Double-click the `.exe` file +2. Follow installer prompts +3. Use default settings (just click "Next") +4. Click "Finish" + +**Mac:** +1. Open the `.dmg` file +2. Drag Cursor to Applications folder +3. Open Applications folder +4. Double-click Cursor to launch + +**Linux:** +1. Follow the installation instructions for your distribution +2. Usually involves extracting and running an installer + +--- + +### Step 3: First Launch + +1. Open Cursor for the first time +2. Choose your theme: + - **Light** - Bright background + - **Dark** - Dark background (easier on eyes) + - You can change this later! + +--- + +### Step 4: Sign In with GitHub + +**This is important!** Signing in makes cloning repositories much easier. + +1. Cursor will prompt: **"Sign in with GitHub?"** +2. Click **"Yes"** or **"Sign in"** +3. Your browser will open +4. Click **"Authorize Cursor"** +5. Return to Cursor (should be signed in) + +**✅ Checkpoint:** Cursor is open, you're signed into GitHub + +--- + +### Step 5: Install Recommended Extensions (Optional) + +Cursor may ask: **"Install recommended extensions?"** + +**Click "Yes"** - These extensions are helpful for: +- Markdown previews +- File icons +- Git integration + +--- + +## Install VS Code (Alternative) + +If you chose VS Code instead: + +### Step 1: Download + +1. Go to **https://code.visualstudio.com** +2. Download for your platform +3. Wait for download + +### Step 2: Install + +Follow the same installation steps as Cursor above. + +### Step 3: First Launch & Setup + +1. Choose theme (Light/Dark) +2. Sign in with GitHub when prompted +3. Install recommended extensions + +--- + +## Verify Installation + +### Open the Terminal + +This is important for upcoming steps! + +**Windows / Linux:** +- Press **Ctrl + `** (backtick key, usually above Tab) + +**Mac:** +- Press **Cmd + `** (backtick key) + +**You should see a terminal panel appear at the bottom!** + +**✅ Checkpoint:** Terminal opens successfully + +--- + +## Troubleshooting + +**Issue:** Can't find download +**Solution:** Check your Downloads folder + +**Issue:** Mac says "Cannot open - unidentified developer" +**Solution:** Right-click Cursor → Click "Open" → Click "Open" again + +**Issue:** Terminal won't open +**Solution:** View menu → Terminal → New Terminal + +**Issue:** GitHub sign-in fails +**Solution:** You can skip for now, we'll handle it in Lesson 05 + +--- + +## What's Next? + +Your IDE is ready! Now let's understand Git and how your IDE handles it automatically. + +**[Continue to Lesson 04: Git Setup →](../lesson-04-git-setup/tutorial.md)** + +--- + +*Part of Module 02: Installation & Setup* +*[← Back to Module Overview](../module-02-overview.md)* + diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-04-git-setup/tutorial.md b/src/modules/wds/course/module-02-installation-setup/lesson-04-git-setup/tutorial.md new file mode 100644 index 00000000..388eee61 --- /dev/null +++ b/src/modules/wds/course/module-02-installation-setup/lesson-04-git-setup/tutorial.md @@ -0,0 +1,159 @@ +# Lesson 04: Git Setup + +**Let your IDE handle Git automatically** + +--- + +## What You'll Do + +- Understand what Git does +- Recap your repository structure decision +- Let Cursor install Git automatically +- OR use GitHub Desktop (visual alternative) + +**Time:** 5 minutes + +--- + +## What is Git? + +**Git** is the behind-the-scenes tool that syncs your computer with GitHub. + +**Think of it as:** +- The sync engine between your computer and GitHub +- Like Dropbox, but smarter (tracks every change) +- Built into most modern IDEs + +**Good news:** You don't need to install it manually! + +--- + +## Recap: Your Repository Structure + +**You already decided this in Lesson 02 when naming your repo!** + +### Single Repo (named `my-project`) +``` +my-project/ +├── docs/ ← Your WDS specifications +└── src/ ← Code lives here too +``` + +### Separate Repo (named `my-project-specs`) +``` +my-project-specs/ ← This repo (specifications only) + ← Code repo created separately +``` + +--- + +## Option 1: Let Cursor Handle It (Recommended) + +**The easiest way:** Do nothing! + +When you try to clone a repository in Lesson 05, Cursor will: + +1. Check if Git is installed +2. If not, **automatically prompt you**: "Install Git?" +3. You click **"Install"** +4. Done! + +**That's it.** No command line needed. + +**✅ This is the recommended path for beginners** + +--- + +## Option 2: GitHub Desktop (Visual Alternative) + +**For designers who prefer visual tools:** + +### Why GitHub Desktop? + +- ✅ No terminal commands needed +- ✅ Visual interface for everything +- ✅ See changes side-by-side +- ✅ Many professional designers use it +- ✅ Works perfectly with Cursor + +### Install GitHub Desktop + +1. Download from **https://desktop.github.com** +2. Install it (follow standard installer) +3. Open GitHub Desktop +4. Sign in with your GitHub account +5. Done! + +### How it Works + +- Use GitHub Desktop to **clone** repositories +- Use GitHub Desktop to **commit** and **push** changes +- Use Cursor to **edit** specifications +- They work together perfectly! + +**This is a perfectly valid professional workflow.** + +--- + +## Option 3: Already Comfortable with Terminal? + +**Optional check for those who want to know:** + +In Cursor terminal (press **Ctrl+`** or **Cmd+`**): + +```bash +git --version +``` + +**If you see a version number:** +``` +git version 2.x.x +``` +✅ Git is installed! + +**If you see "command not found":** +No problem! Continue to Lesson 05, Cursor will prompt you. + +--- + +## Which Option Should You Choose? + +**Choose Option 1 (Let Cursor Handle It) if:** +- You're a complete beginner +- You want the simplest path +- You're comfortable with terminal appearing in Lesson 05 + +**Choose Option 2 (GitHub Desktop) if:** +- You prefer visual interfaces +- You want to see changes graphically +- You're nervous about terminal commands +- You want a tool you'll keep using + +**Both are great!** Many professionals use GitHub Desktop daily. + +--- + +## Troubleshooting + +**Issue:** Not sure which option to choose +**Solution:** Use Option 1 (Let Cursor handle it) - simplest for beginners + +**Issue:** GitHub Desktop won't sign in +**Solution:** Make sure you completed Lesson 01 (GitHub account created) + +**Issue:** Worried about making mistakes +**Solution:** Git saves everything - you can always undo! + +--- + +## What's Next? + +Git will be ready when you need it! Now it's time to clone your repository and add WDS to your workspace. + +**[Continue to Lesson 05: Clone & Add WDS →](../lesson-05-clone-and-wds/tutorial.md)** + +--- + +*Part of Module 02: Installation & Setup* +*[← Back to Module Overview](../module-02-overview.md)* + diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-05-clone-and-wds/tutorial.md b/src/modules/wds/course/module-02-installation-setup/lesson-05-clone-and-wds/tutorial.md new file mode 100644 index 00000000..5a5bd007 --- /dev/null +++ b/src/modules/wds/course/module-02-installation-setup/lesson-05-clone-and-wds/tutorial.md @@ -0,0 +1,212 @@ +# Lesson 05: Clone Your Project & Add WDS + +**Get your project and WDS onto your computer** + +--- + +## What You'll Do + +- Clone your project repository +- Add WDS to your workspace +- Create docs folder structure + +**Time:** 15-20 minutes + +--- + +## Step 1: Choose Where to Store Projects + +**Create a Projects folder:** + +**Windows:** `C:\Users\YourName\Projects\` +**Mac/Linux:** `/Users/YourName/Projects/` or `~/Projects/` + +### Create the Folder + +In Cursor terminal (**Ctrl+`** or **Cmd+`**): + +```bash +# Windows +mkdir C:\Projects +cd C:\Projects + +# Mac/Linux +mkdir ~/Projects +cd ~/Projects +``` + +**✅ Checkpoint:** Projects folder created + +--- + +## Step 2: Clone Your Project Repository + +### Get Your Repository URL + +1. Go to your repository on GitHub +2. Click the green **"Code"** button +3. Make sure **"HTTPS"** is selected +4. Click the **copy icon** (📋) + +**Your URL looks like:** `https://github.com/your-username/your-project.git` + +### Clone the Repository + +In Cursor terminal: + +```bash +git clone [paste your URL here] +``` + +**Example:** +```bash +git clone https://github.com/john-designer/dog-walker-app.git +``` + +**If Cursor prompts "Install Git?"** → Click **"Install"** and wait, then try again. + +**✅ Checkpoint:** You see "Cloning into..." and then "done" + +--- + +## Step 3: Open Your Project in Cursor + +1. In Cursor: **File** → **Open Folder** +2. Navigate to your Projects folder +3. Select your project folder (e.g., `dog-walker-app`) +4. Click **"Select Folder"** or **"Open"** + +**✅ Checkpoint:** You see your project name in the left sidebar with README.md + +--- + +## Step 4: Clone WDS Repository + +**WDS lives separately from your project.** + +In Cursor terminal (make sure you're in Projects folder): + +```bash +# Navigate back to Projects folder +cd ~/Projects # Mac/Linux +cd C:\Projects # Windows + +# Clone WDS +git clone https://github.com/whiteport-collective/whiteport-design-studio.git +``` + +**✅ Checkpoint:** WDS cloned successfully + +--- + +## Step 5: Add WDS to Your Workspace + +1. In Cursor: **File** → **Add Folder to Workspace** +2. Navigate to your Projects folder +3. Select the `whiteport-design-studio` folder +4. Click **"Add"** + +**✅ Checkpoint:** You see both folders in your Cursor sidebar: +- your-project +- whiteport-design-studio + +--- + +## Step 6: Create Docs Folder Structure + +**Navigate to YOUR project (not WDS):** + +```bash +# Change to your project +cd ~/Projects/dog-walker-app # Mac/Linux (use YOUR project name!) +cd C:\Projects\dog-walker-app # Windows (use YOUR project name!) +``` + +**Create the 8-phase structure:** + +```bash +# Mac/Linux (works in most terminals) +mkdir -p docs/1-project-brief +mkdir -p docs/2-trigger-mapping +mkdir -p docs/3-prd-platform +mkdir -p docs/4-ux-design +mkdir -p docs/5-design-system +mkdir -p docs/6-design-deliveries +mkdir -p docs/7-testing +mkdir -p docs/8-ongoing-development +``` + +**Windows alternative (if above doesn't work):** +```bash +mkdir docs +cd docs +mkdir 1-project-brief +mkdir 2-trigger-mapping +mkdir 3-prd-platform +mkdir 4-ux-design +mkdir 5-design-system +mkdir 6-design-deliveries +mkdir 7-testing +mkdir 8-ongoing-development +cd .. +``` + +**✅ Checkpoint:** You see a `docs/` folder with 8 numbered subfolders in your project + +--- + +## Quick Reference: What Lives Where + +``` +Your Computer/ +└── Projects/ + ├── your-project/ ← YOUR PROJECT + │ ├── docs/ ← Your specifications + │ │ ├── 1-project-brief/ + │ │ ├── 2-trigger-mapping/ + │ │ ├── 3-prd-platform/ + │ │ ├── 4-ux-design/ + │ │ ├── 5-design-system/ + │ │ ├── 6-design-deliveries/ + │ │ ├── 7-testing/ + │ │ └── 8-ongoing-development/ + │ ├── src/ ← Code (if single repo) + │ └── README.md + │ + └── whiteport-design-studio/ ← WDS METHODOLOGY + └── src/modules/wds/ + ├── agents/ + ├── workflows/ + ├── course/ + └── MIMIR-WDS-ORCHESTRATOR.md +``` + +--- + +## Troubleshooting + +**Issue:** "Git command not found" +**Solution:** Let Cursor install Git when prompted, then try again + +**Issue:** "Permission denied" when cloning +**Solution:** Make sure you're signed into GitHub in Cursor + +**Issue:** "Can't find MIMIR file" +**Solution:** Make sure you added `whiteport-design-studio` folder to workspace + +**Issue:** "mkdir: cannot create directory" +**Solution:** Make sure you're in your project folder: `cd ~/Projects/your-project` + +--- + +## What's Next? + +Everything is set up! Now let's activate Mimir and begin your WDS journey. + +**[Continue to Lesson 06: Initiate Mimir →](../lesson-06-initiate-mimir/tutorial.md)** + +--- + +*Part of Module 02: Installation & Setup* +*[← Back to Module Overview](../module-02-overview.md)* + diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-06-initiate-mimir/tutorial.md b/src/modules/wds/course/module-02-installation-setup/lesson-06-initiate-mimir/tutorial.md new file mode 100644 index 00000000..5c0426ed --- /dev/null +++ b/src/modules/wds/course/module-02-installation-setup/lesson-06-initiate-mimir/tutorial.md @@ -0,0 +1,238 @@ +# Lesson 06: Initiate Mimir + +**Activate your WDS guide and begin your journey** + +--- + +## What You'll Do + +- Find the Mimir orchestrator file +- Drag it to AI chat +- Have your first conversation with Mimir +- Begin guided WDS workflow + +**Time:** 5 minutes + +--- + +## What is Mimir? + +**Mimir** is your WDS guide and orchestrator. + +Think of Mimir as: +- Your coach through WDS methodology +- Your trainer for each workflow +- Your psychologist when things feel overwhelming +- Your strategist for project decisions + +**Mimir's role:** Assess your needs, understand your skill level, and connect you with the right specialist agents (Freyja, Saga, Idunn) when appropriate. + +--- + +## Step 1: Find the Mimir File + +In Cursor sidebar: + +1. Expand **`whiteport-design-studio`** +2. Expand **`src`** → **`modules`** → **`wds`** +3. Find **`MIMIR-WDS-ORCHESTRATOR.md`** + +**✅ Checkpoint:** You can see the Mimir file + +--- + +## Step 2: Open AI Chat + +In Cursor: + +- **Windows/Linux:** Press **Ctrl+L** +- **Mac:** Press **Cmd+L** +- Or click the **chat icon** in the sidebar + +**The AI chat panel will appear!** + +--- + +## Step 3: Drag Mimir to Chat + +1. Click and hold **`MIMIR-WDS-ORCHESTRATOR.md`** in the sidebar +2. Drag it into the AI chat input area +3. Release + +**You should see the file attached to your message!** + +--- + +## Step 4: Send Your First Message + +**Type your first message:** + +``` +Hello Mimir! I just completed the installation setup and I'm ready to start. +``` + +**Press Enter or click Send** + +--- + +## What Mimir Will Do + +Mimir will: + +1. **Welcome you warmly** 🌊 +2. **Assess your situation:** + - Technical skill level (beginner → experienced) + - Emotional state (excited, nervous, ready) + - Familiarity with WDS +3. **Check your environment:** + - Is WDS repository present? + - Is your project set up correctly? + - Do you have the docs structure? +4. **Understand your project:** + - What are you building? + - What phase are you in? + - Do you need to start from Project Brief? +5. **Guide your next steps:** + - Route you to appropriate agent if needed + - Suggest which workflow to start with + - Offer training if you want to learn first + +--- + +## Be Honest with Mimir + +**Mimir adapts to YOU.** + +If you're nervous → Mimir will be extra patient +If you're experienced → Mimir will be concise +If you're confused → Mimir will slow down + +**There are no wrong answers!** + +--- + +## Example First Conversation + +**You:** +> Hello Mimir! I just completed setup and I'm ready to start. + +**Mimir:** +> Welcome! 🌊 I'm Mimir, your guide through Whiteport Design Studio. +> +> I can see you've completed the installation - that's fantastic work! +> +> Let me understand your situation: +> 1. How comfortable are you with design tools and AI assistants? (Complete beginner / Learning / Comfortable / Experienced) +> 2. What project are you working on? +> 3. How are you feeling about starting this journey? + +**Just answer honestly!** Mimir will adapt to your needs. + +--- + +## Alternative: Type Instead of Drag + +**If dragging doesn't work:** + +In the AI chat, type: + +``` +@MIMIR-WDS-ORCHESTRATOR.md + +Hello Mimir! I just completed the installation setup and I'm ready to start. +``` + +This references the file and sends your message. + +--- + +## What Happens Next? + +**After your conversation with Mimir, you'll either:** + +1. **Start WDS Training** - If you want to learn methodology first +2. **Begin Project Brief** - If you're ready to dive into your project +3. **Meet Specialist Agents** - Freyja (UX), Saga (Analyst), or Idunn (PM) + +**Mimir will guide you to the right path based on your situation.** + +--- + +## Whenever You Need Help + +**Remember this simple command:** + +``` +@wds-mimir [your question] +``` + +**Examples:** +- `@wds-mimir I'm stuck on trigger mapping, can you help?` +- `@wds-mimir Which agent should I work with for UX design?` +- `@wds-mimir I feel overwhelmed, where should I start?` +- `@wds-mimir Can you walk me through the WDS training?` + +**No question is too small. Mimir is always here to guide you.** + +--- + +## Troubleshooting + +**Issue:** Can't find MIMIR file +**Solution:** Make sure you added `whiteport-design-studio` to workspace (Lesson 05, Step 5) + +**Issue:** Drag doesn't work +**Solution:** Use `@MIMIR-WDS-ORCHESTRATOR.md` instead + +**Issue:** AI doesn't respond +**Solution:** Make sure you're connected to internet, wait a moment, try again + +**Issue:** Not sure what to say +**Solution:** Just say "Hello! I'm new and ready to start" - Mimir will guide you from there + +--- + +## 🎉 Congratulations! + +### You Did It! + +You've completed the entire Module 02: Installation & Setup! + +**What you accomplished:** +- ✅ Created GitHub account +- ✅ Set up project repository +- ✅ Installed IDE (Cursor or VS Code) +- ✅ Cloned your project +- ✅ Added WDS to workspace +- ✅ Created docs structure +- ✅ Activated Mimir + +**This is HUGE!** Many designers never get past this point. You're ready to design with WDS. + +--- + +## Your Journey Continues + +**Next steps (Mimir will guide you):** + +- **[Module 03: Create Project Brief](../../module-03-project-brief/module-03-overview.md)** - If starting a new project +- **[WDS Training Course](../../00-course-overview.md)** - If you want to learn methodology first +- **Ask Mimir** - "What should I do next?" + +--- + +## Remember + +**Whenever in doubt:** + +``` +@wds-mimir [your question] +``` + +**Mimir believes in you. You can do this. Welcome to WDS.** 🌊 + +--- + +*Part of Module 02: Installation & Setup* +*[← Back to Module Overview](../module-02-overview.md)* + 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 index 965b3070..439e5867 100644 --- 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 @@ -1,154 +1,85 @@ # Module 02: Installation & Setup -**From zero to WDS-ready in one session - even if you've never used GitHub or an IDE before** +**From zero to WDS-ready - complete beginner friendly** --- -## What You'll Learn +## Overview -In this module, you'll: +This module takes you from having nothing to being fully set up with WDS, even if you've never used GitHub or an IDE before. -1. **Create Your GitHub Account** - Set up your professional home for projects -2. **Create Your Project Repository** - Decide on naming and structure -3. **Install Your IDE** - Get Cursor or VS Code running -4. **Clone Your Project** - Bring your repository to your computer -5. **Install WDS** - Add the methodology to your workspace -6. **Initiate with Mimir** - Drag the starter file and begin - -**Time investment:** 45-60 minutes (first time) -**Result:** Complete professional setup, ready to design - -**Target audience:** Complete beginners welcome! No prior experience needed. +**Time:** 45-60 minutes total +**Difficulty:** Beginner +**Prerequisites:** Computer + Internet + Email --- -## Why This Matters +## Lessons -Before you can design with WDS, you need a solid foundation: +### [Lesson 01: Create GitHub Account](lesson-01-github-account/tutorial.md) +**5-10 minutes** -- **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.** +Sign up for GitHub, choose a professional username, verify your account. --- -## Module Contents +### [Lesson 02: Create Repository](lesson-02-create-repository/tutorial.md) +**10-15 minutes** -### Lesson 1: Create Your GitHub Account -**Reading time:** 5 minutes - -- Why GitHub for designers -- Creating your account -- Choosing a username -- Setting up your profile - -### Lesson 2: Create Your Project Repository -**Reading time:** 10 minutes - -- Three scenarios: New project, joining existing, or learning only -- Repository naming conventions (determines structure!) -- One repo vs. separate repos (specs + code) -- Public vs. private repositories -- Joining existing repositories: Request access and understand structure -- Initial repository setup -- README basics - -### Lesson 3: Install Your IDE -**Reading time:** 5 minutes - -- Cursor vs. VS Code - which to choose -- Download and installation -- Basic IDE orientation -- Essential settings for designers - -### Lesson 4: Clone Your Project (Git Handled Automatically!) -**Reading time:** 10 minutes - -- Understanding "cloning" -- The IDE handles Git installation for you -- Visual alternative: GitHub Desktop -- Clone your project repository -- Add WDS to your workspace -- Create docs folder structure - -### Lesson 5: Initiate with Mimir -**Reading time:** 5 minutes - -- The Mimir orchestrator file -- Drag-to-chat initialization -- What Mimir will ask you -- Your first guided session +Create your project repository or join an existing one. Learn single vs separate repo structure. --- -## Tutorial: Complete Beginner Setup +### [Lesson 03: Install IDE](lesson-03-install-ide/tutorial.md) +**10 minutes** -**For hands-on learners who want step-by-step instructions:** +Install Cursor or VS Code and do first-launch setup. -[→ Tutorial 02: Complete Beginner Setup](tutorial-02.md) +--- -**8 detailed steps** from GitHub account creation to Mimir activation, with screenshots-worthy instructions and platform-specific commands. +### [Lesson 04: Git Setup](lesson-04-git-setup/tutorial.md) +**5 minutes** + +Let your IDE handle Git automatically or use GitHub Desktop. + +--- + +### [Lesson 05: Clone & Add WDS](lesson-05-clone-and-wds/tutorial.md) +**15-20 minutes** + +Clone your repository, add WDS to workspace, create docs structure. + +--- + +### [Lesson 06: Initiate Mimir](lesson-06-initiate-mimir/tutorial.md) +**5 minutes** + +Drag Mimir file to AI chat and begin your guided journey. + +--- + +## Quick Start + +**Want to dive right in?** + +Follow lessons in order: [Start with Lesson 01 →](lesson-01-github-account/tutorial.md) --- ## After This Module -Once you've completed Module 02: +Once complete, you'll have: -- ✅ GitHub account created and repository set up -- ✅ IDE installed (Cursor or VS Code) -- ✅ Your project cloned to your computer -- ✅ WDS added to your workspace +- ✅ GitHub account and repository +- ✅ IDE installed and configured +- ✅ Project cloned to your computer +- ✅ WDS integrated in workspace - ✅ Docs folder structure created -- ✅ Mimir activated and ready to guide you +- ✅ Mimir activated and ready **Next:** [Module 03: Create Project Brief](../module-03-project-brief/module-03-overview.md) --- -## Prerequisites - -**Absolute minimum to start this module:** - -- ✅ A computer (Windows, Mac, or Linux) -- ✅ Internet connection -- ✅ Email address for GitHub account -- ✅ Willingness to learn (we'll guide you through everything else!) - -**You DON'T need:** -- ❌ Prior GitHub experience -- ❌ Command line knowledge -- ❌ Technical background -- ❌ Coding skills - -**New to all of this?** Perfect! This module is designed for you. - ---- - -## 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)* -