feat(wds): Finalize Module 02 content and structure

Completed the content for Module 02, ensuring all lessons are beginner-friendly and comprehensive:
- Enhanced explanations and examples for each lesson
- Included troubleshooting tips and clear instructions
- Maintained logical flow and accessibility throughout

Updated lesson files to reflect the finalized structure and content, ready for deployment and learner engagement.
This commit is contained in:
Mårten Angner 2025-12-11 17:16:48 +01:00
parent d6dd21e781
commit 1a2eeaf426
19 changed files with 2131 additions and 0 deletions

View File

@ -0,0 +1,124 @@
# Lesson 01: Git Setup
**Create GitHub account and project repository**
---
## What You'll Do
- Create GitHub account
- Choose professional username
- Create or join repository
- Understand repository structure
**Time:** 15-20 minutes
---
## Part 1: Create GitHub Account
### What is GitHub?
Professional cloud storage + time machine for your project files. Every change is saved, you can go back to any version, work with others.
### Step 1: Sign Up
1. Go to **https://github.com**
2. Click **"Sign up"**
3. Enter email, password, username
**Username Tips:**
- Professional: `john-designer`, `sarahux`, `mike-creates`
- You might share this with clients
4. Verify email
5. Log in
**✅ Checkpoint:** You can log in to GitHub
---
## Part 2: Choose Your Scenario
**Scenario A:** Starting new project → Continue to Part 3
**Scenario B:** Joining existing → Skip to Part 5
**Scenario C:** Just learning → Skip to [Lesson 02](../lesson-02-ide-installation/02-full-lesson.md)
---
## Part 3: Create Repository
1. Click profile icon → **"Your repositories"** → **"New"**
### Decide Repository Structure
**IMPORTANT: Your naming choice determines your structure!**
**Single Repository:**
- Name: `my-project` (e.g., `dog-walker-app`)
- Structure: Specs + code together
- Use when: Small team, building yourself, simple communication
**Separate Specifications Repository:**
- Name: `my-project-specs` (e.g., `dog-walker-app-specs`)
- Structure: Specs only, separate code repo
- Use when: Corporate, many developers, clear handoff needed
---
## Part 4: Create Repository
**Repository Settings:**
- Name: `____________` (lowercase-with-hyphens)
- Description: One-liner about project
- Public (portfolio) or Private (client work)
- ☑️ Check "Initialize with README"
- Click **"Create repository"**
**✅ Checkpoint:** Repository created
---
## Part 5: Join Existing Repository
**Email template:**
```
Hi [Name],
I'd like to contribute to [project-name] using WDS methodology.
Could you add me as a collaborator?
My GitHub username: [your-username]
Thank you!
```
**Then:**
1. Accept invitation from email
2. Check repo name (ends in `-specs`? Separate repo)
3. Browse structure (has `docs/`? WDS already!)
**✅ Checkpoint:** Access granted
---
## Troubleshooting
**Issue:** Verification email missing → Check spam
**Issue:** Username taken → Try `yourname-designer-2`
**Issue:** Repository name taken → Add your username
---
## What's Next?
GitHub account and repository ready! Now install your IDE.
**[Continue to Lesson 02: IDE Installation →](../lesson-02-ide-installation/02-full-lesson.md)**
---
*Part of Module 02: Installation & Setup*
*[← Back to Module Overview](../module-02-overview.md)*

View File

@ -0,0 +1,87 @@
# Lesson 01: GitHub & IDE Setup - Quick Checklist
**⏱️ 25-30 minutes**
---
## Part 1: GitHub Account
- [ ] Go to **https://github.com**
- [ ] Click **"Sign up"**
- [ ] Enter email, password, username (professional: `yourname-designer`)
- [ ] Verify email
- [ ] ✅ Log in successful
---
## Part 2: Create or Join Repository
### Choose Your Scenario
- [ ] **A:** Starting new project → Continue below
- [ ] **B:** Joining existing → Skip to "Join Existing"
- [ ] **C:** Just learning → Skip to Part 3
### Create New Repository
- [ ] Click profile icon → **"Your repositories"** → **"New"**
**Decide: Single or Separate?**
- [ ] **Single repo:** `my-project` (specs + code together, for small teams)
- [ ] **Separate repo:** `my-project-specs` (specs only, for corporate/many devs)
- [ ] Name: `_____________` (lowercase-with-hyphens)
- [ ] Description: One-liner about project
- [ ] Public or Private
- [ ] ☑️ Check "Initialize with README"
- [ ] Click **"Create repository"**
- [ ] ✅ Repository created
### Join Existing Repository
- [ ] Ask owner for access (see full lesson for email template)
- [ ] Accept invitation from email
- [ ] Check repo structure (name, folders)
- [ ] ✅ Access granted
---
## Part 3: IDE Installation
### Choose & Download
- [ ] **Cursor** (recommended) → https://cursor.sh
- [ ] **VS Code** (alternative) → https://code.visualstudio.com
- [ ] Download installer
### Install
- [ ] **Windows:** Run `.exe`, click through
- [ ] **Mac:** Drag to Applications, open
- [ ] **Linux:** Follow distro instructions
### First Launch
- [ ] Choose theme (Light/Dark)
- [ ] Sign in with GitHub → Yes!
- [ ] Install recommended extensions → Yes
- [ ] ✅ IDE open
### Verify Terminal
- [ ] Press **Ctrl+`** (Win/Linux) or **Cmd+`** (Mac)
- [ ] ✅ Terminal panel appears
---
## Next Step
✅ GitHub & IDE ready!
**[→ Lesson 02: Git Configuration](../lesson-02-git-setup/checklist.md)**
---
**Need more detail?** See [full lesson explanation](lesson.md)

View File

@ -0,0 +1,203 @@
# Lesson 01: GitHub & IDE Setup
**Get your development environment ready**
---
## What You'll Do
- Create GitHub account
- Create or join repository
- Install IDE (Cursor or VS Code)
- Verify everything works
**Time:** 25-30 minutes
---
## Part 1: GitHub Setup
### What is GitHub?
Professional cloud storage + time machine for your project files. Every change is saved, you can go back to any version, and you can work with others.
### Step 1: Create GitHub Account
1. Go to **https://github.com**
2. Click **"Sign up"** (top right)
3. Enter email, password, username
**Username Tips:**
- Professional: `john-designer`, `sarahux`, `mike-creates`
- You might share this with clients
4. Verify email
5. Log in
**✅ Checkpoint:** You can log in to GitHub
---
### Step 2: Choose Your Scenario
**Scenario A: Starting a New Project** → Continue to Step 3
**Scenario B: Joining Existing Project** → Skip to Step 6
**Scenario C: Just Learning WDS** → Skip to Part 2
---
### Step 3: Create Repository (Scenario A)
1. Click profile icon → **"Your repositories"** → **"New"**
### Step 4: Decide Repository Structure
**IMPORTANT: Your naming choice determines your structure!**
#### Single Repository
**Name:** `my-project` (e.g., `dog-walker-app`)
```
my-project/
├── docs/ ← WDS specifications
└── src/ ← Code
```
**Use when:**
- Small team, building yourself
- Simple communication
- Rapid iteration
#### Separate Specifications Repository
**Name:** `my-project-specs` (e.g., `dog-walker-app-specs`)
```
my-project-specs/ ← Specifications only
my-project/ ← Separate code repo
```
**Use when:**
- Corporate environment
- Many developers
- Clear handoff needed
### Step 5: Create Repository
- **Name:** `____________` (lowercase-with-hyphens)
- **Description:** One-liner about project
- **Public** (portfolio) or **Private** (client work)
- ☑️ **Check "Initialize with README"**
- Click **"Create repository"**
**✅ Checkpoint:** Repository created
---
### Step 6: Join Existing Repository (Scenario B)
**Email template:**
```
Hi [Name],
I'd like to contribute to [project-name] using WDS methodology.
Could you add me as a collaborator?
My GitHub username: [your-username]
Thank you!
```
**Then:**
1. Accept invitation from email
2. Check repo name (ends in `-specs`? Separate repo)
3. Browse structure (has `docs/`? WDS already!)
**✅ Checkpoint:** Access granted
---
## Part 2: IDE Installation
### What is an IDE?
Your workspace for creating specifications. Like Microsoft Word, but for design files.
### Step 1: Choose Your IDE
**Cursor (Recommended)**
- Built for AI assistance
- Perfect for WDS
- Download: https://cursor.sh
**VS Code (Alternative)**
- Industry standard
- Works great too
- Download: https://code.visualstudio.com
**For beginners:** Choose Cursor
---
### Step 2: Install
**Windows:**
1. Run `.exe` file
2. Click through installer
3. Use defaults
**Mac:**
1. Open download
2. Drag to Applications
3. Open from Applications
**Linux:**
Follow distro instructions
---
### Step 3: First Launch
1. Choose theme (Light/Dark)
2. **Sign in with GitHub** → Yes!
3. Install recommended extensions → Yes
**✅ Checkpoint:** IDE open and ready
---
### Step 4: Verify Terminal
Press **Ctrl+`** (Win/Linux) or **Cmd+`** (Mac)
**✅ Checkpoint:** Terminal panel appears
---
## Troubleshooting
**GitHub Issues:**
- **Verification email missing** → Check spam
- **Username taken** → Try `yourname-designer-2`
- **Repository name taken** → Add your username
**IDE Issues:**
- **Can't find download** → Check Downloads folder
- **Mac "unidentified developer"** → Right-click → Open
- **Terminal won't open** → View menu → Terminal → New Terminal
---
## What's Next?
GitHub account, repository, and IDE are ready! Now let's configure Git.
**[Continue to Lesson 02: Git Configuration →](../lesson-02-git-setup/lesson.md)**
---
*Part of Module 02: Installation & Setup*
*[← Back to Module Overview](../module-02-overview.md)*

View File

@ -0,0 +1,70 @@
# Lesson 01: GitHub Setup - Quick Checklist
**⏱️ 15-20 minutes**
---
## Create GitHub Account
- [ ] Go to **https://github.com**
- [ ] Click **"Sign up"**
- [ ] Enter email, password, username (professional: `yourname-designer`)
- [ ] Verify email
- [ ] ✅ Log in successful
---
## Choose Your Scenario
- [ ] **A:** Starting new project → Continue below
- [ ] **B:** Joining existing → Skip to "Join Existing" section
- [ ] **C:** Just learning → Skip to [Lesson 02](../lesson-02-install-ide/checklist.md)
---
## Create New Repository
- [ ] Click profile icon → **"Your repositories"** → **"New"**
### Decide: Single or Separate?
**Single repo (specs + code together):**
- [ ] Name: `my-project` (e.g., `dog-walker-app`)
- [ ] For: Small team, building yourself, simple communication
**Separate specs repo (specs only):**
- [ ] Name: `my-project-specs` (e.g., `dog-walker-app-specs`)
- [ ] For: Corporate, many developers, clear handoff
### Repository Settings
- [ ] Name: `_____________` (lowercase-with-hyphens)
- [ ] Description: One-liner about project
- [ ] Public or Private
- [ ] ☑️ **Check "Initialize with README"**
- [ ] Click **"Create repository"**
- [ ] ✅ Repository created
---
## Join Existing Repository
- [ ] Ask owner for access (email template in lesson.md)
- [ ] Check email for GitHub invitation
- [ ] Click **"Accept invitation"**
- [ ] Check repo name (ends in `-specs`? Separate repo)
- [ ] Browse repo structure (has `docs/`? WDS already!)
- [ ] ✅ Access granted
---
## Next Step
✅ GitHub setup complete!
**[→ Lesson 02: IDE Installation](../lesson-02-install-ide/checklist.md)**
---
**Need more detail?** See [full lesson explanation](lesson.md)

View File

@ -0,0 +1,40 @@
# Lesson 02: Git Configuration - Quick Checklist
**⏱️ 5 minutes**
---
## Choose Approach
- [ ] **Option 1:** Let Cursor handle Git (do nothing - easiest!)
- [ ] **Option 2:** Use GitHub Desktop (visual) → https://desktop.github.com
---
## If Using GitHub Desktop
- [ ] Download from https://desktop.github.com
- [ ] Install
- [ ] Sign in with GitHub account
- [ ] ✅ Ready for visual cloning
---
## Recap Repository Structure
From Lesson 01:
- [ ] Single repo: `my-project` (specs + code together)
- [ ] Separate repo: `my-project-specs` (specs only)
---
## Next Step
✅ Git ready!
**[→ Lesson 03: Repository Cloning & WDS Integration](../lesson-03-clone-and-wds/checklist.md)**
---
**Need more detail?** See [full lesson explanation](lesson.md)

View File

@ -0,0 +1,48 @@
# Lesson 02: IDE Installation - Quick Checklist
**⏱️ 10 minutes**
---
## Choose IDE
- [ ] **Cursor** (recommended) → https://cursor.sh
- [ ] **VS Code** (alternative) → https://code.visualstudio.com
---
## Install
- [ ] Download installer
- [ ] **Windows:** Run `.exe`, click through
- [ ] **Mac:** Drag to Applications, open
- [ ] **Linux:** Follow distro instructions
---
## First Launch
- [ ] Choose theme (Light/Dark)
- [ ] Sign in with GitHub → Yes!
- [ ] Install recommended extensions → Yes
- [ ] ✅ IDE open
---
## Verify Terminal
- [ ] Press **Ctrl+`** (Win/Linux) or **Cmd+`** (Mac)
- [ ] ✅ Terminal panel appears
---
## Next Step
✅ IDE installed!
**[→ Lesson 03: Git Repository Cloning](../lesson-03-git-cloning/01-quick-checklist.md)**
---
**Need more detail?** See [full lesson](02-full-lesson.md)

View File

@ -0,0 +1,88 @@
# Lesson 02: IDE Installation
**Get your workspace ready**
---
## What You'll Do
- Choose IDE (Cursor or VS Code)
- Install and configure
- Verify terminal works
**Time:** 10 minutes
---
## Step 1: Choose Your IDE
### Cursor (Recommended)
- Built for AI assistance
- Perfect for WDS
- Download: https://cursor.sh
### VS Code (Alternative)
- Industry standard
- Works great too
- Download: https://code.visualstudio.com
**For beginners:** Choose Cursor
---
## Step 2: Install
**Windows:**
1. Run `.exe` file
2. Click through installer
3. Use defaults
**Mac:**
1. Open download
2. Drag to Applications
3. Open from Applications
**Linux:**
Follow distro instructions
---
## Step 3: First Launch
1. Choose theme (Light/Dark)
2. **Sign in with GitHub** → Yes!
3. Install recommended extensions → Yes
**✅ Checkpoint:** IDE open
---
## Step 4: Verify Terminal
Press **Ctrl+`** (Win/Linux) or **Cmd+`** (Mac)
**✅ Checkpoint:** Terminal panel appears
---
## Troubleshooting
**Issue:** Can't find download → Check Downloads folder
**Issue:** Mac "unidentified developer" → Right-click → Open
**Issue:** Terminal won't open → View menu → Terminal → New Terminal
---
## What's Next?
IDE ready! Now clone your Git repository.
**[Continue to Lesson 03: Git Repository Cloning →](../lesson-03-git-cloning/02-full-lesson.md)**
---
*Part of Module 02: Installation & Setup*
*[← Back to Module Overview](../module-02-overview.md)*

View File

@ -0,0 +1,48 @@
# Lesson 02: IDE Installation - Quick Checklist
**⏱️ 10 minutes**
---
## Choose IDE
- [ ] **Cursor** (recommended for AI work) → https://cursor.sh
- [ ] **VS Code** (alternative) → https://code.visualstudio.com
---
## Install
- [ ] Download installer
- [ ] **Windows:** Run `.exe`, click through
- [ ] **Mac:** Drag to Applications, open
- [ ] **Linux:** Follow distro instructions
---
## First Launch
- [ ] Choose theme (Light/Dark)
- [ ] **Sign in with GitHub** → Yes!
- [ ] Install recommended extensions → Yes
- [ ] ✅ IDE open
---
## Verify Terminal
- [ ] Press **Ctrl+`** (Win/Linux) or **Cmd+`** (Mac)
- [ ] ✅ Terminal panel appears
---
## Next Step
✅ IDE installed!
**[→ Lesson 03: Git Configuration](../lesson-03-git-setup/checklist.md)**
---
**Need more detail?** See [full lesson explanation](lesson.md)

View File

@ -0,0 +1,149 @@
# Lesson 02: IDE Installation
**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**
Your workspace for creating specifications. Like Microsoft Word, but for design files.
---
## Step 1: Choose Your IDE
### Cursor (Recommended)
**Why Cursor:**
- Built for AI assistance
- Modern interface
- Perfect for WDS
- **Download:** https://cursor.sh
### VS Code (Alternative)
**Why VS Code:**
- Industry standard
- More extensions
- Works great with WDS too
- **Download:** https://code.visualstudio.com
**For beginners:** Choose Cursor. It's designed for AI-augmented work.
---
## Step 2: Install Cursor
### 2.1 Download
1. Go to **https://cursor.sh**
2. Click download button for your platform
3. Wait for download
### 2.2 Install
**Windows:**
1. Double-click the `.exe` file
2. Follow installer prompts
3. Use default settings
4. Click "Finish"
**Mac:**
1. Open the download
2. Drag Cursor to Applications folder
3. Open Applications folder
4. Double-click Cursor to launch
**Linux:**
1. Follow installation instructions for your distribution
---
## Step 3: First Launch Setup
1. Open Cursor for the first time
2. Choose your theme (Light or Dark - you can change this later)
### 3.1 Setup Wizard
Cursor will ask you a few questions:
- **"Import settings from VS Code?"** → Skip (unless you already use VS Code)
- **"Sign in with GitHub?"** → Yes! (makes cloning easier)
- **"Install recommended extensions?"** → Yes
**✅ Checkpoint:** Cursor is open and ready
---
## Install VS Code (Alternative)
If you chose VS Code instead:
### Download and Install
1. Go to **https://code.visualstudio.com**
2. Download for your platform
3. Follow same installation steps as Cursor above
4. Complete first-launch setup
5. Sign in with GitHub when prompted
---
## Verify Installation
### Open the Terminal
This is important for upcoming lessons!
**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 later
---
## What's Next?
Your IDE is ready! Now let's understand Git and how your IDE handles it automatically.
**[Continue to Lesson 03: Git Configuration →](../lesson-03-git-setup/tutorial.md)**
---
*Part of Module 02: Installation & Setup*
*[← Back to Module Overview](../module-02-overview.md)*

View File

@ -0,0 +1,51 @@
# Lesson 03: Git Repository Cloning - Quick Checklist
**⏱️ 10 minutes**
---
## Create Projects Folder
In terminal (**Ctrl+`** or **Cmd+`**):
```bash
# Windows
mkdir C:\Projects
cd C:\Projects
# Mac/Linux
mkdir ~/Projects
cd ~/Projects
```
- [ ] ✅ Projects folder created
---
## Clone Your Repository
- [ ] Go to your repo on GitHub → Click **"Code"** → Copy URL
- [ ] In terminal: `git clone [paste-url]`
- [ ] (If prompted: Install Git → Click "Install")
- [ ] ✅ "done" message
---
## Open Project in IDE
- [ ] **File** → **Open Folder**
- [ ] Select your project folder
- [ ] ✅ Project in sidebar
---
## Next Step
✅ Repository cloned!
**[→ Lesson 04: WDS Project Initialization](../lesson-04-wds-initialization/01-quick-checklist.md)**
---
**Need more detail?** See [full lesson](02-full-lesson.md)

View File

@ -0,0 +1,111 @@
# Lesson 03: Git Repository Cloning
**Clone your project to your computer**
---
## What You'll Do
- Create Projects folder
- Clone your repository
- Open project in IDE
- Understand Git auto-installation
**Time:** 10 minutes
---
## Step 1: Create Projects Folder
**Choose a location:**
- Windows: `C:\Users\YourName\Projects\`
- Mac/Linux: `~/Projects/`
In terminal (**Ctrl+`** or **Cmd+`**):
```bash
# Windows
mkdir C:\Projects
cd C:\Projects
# Mac/Linux
mkdir ~/Projects
cd ~/Projects
```
**✅ Checkpoint:** Projects folder created
---
## Step 2: Get Repository URL
1. Go to your repository on GitHub
2. Click green **"Code"** button
3. Make sure **"HTTPS"** selected
4. Click copy icon (📋)
**Your URL:** `https://github.com/your-username/your-project.git`
---
## Step 3: Clone Repository
In terminal:
```bash
git clone [paste your URL]
```
**Example:**
```bash
git clone https://github.com/john-designer/dog-walker-app.git
```
**If Cursor prompts "Install Git?"** → Click **"Install"**, wait, try again
**✅ Checkpoint:** See "Cloning into..." then "done"
---
## Step 4: Open Project in IDE
1. **File** → **Open Folder**
2. Navigate to Projects folder
3. Select your project folder
4. Click **"Select Folder"** or **"Open"**
**✅ Checkpoint:** Project name in sidebar with README.md
---
## About Git Auto-Installation
**Git** is the tool that syncs with GitHub. Modern IDEs handle this automatically:
- First time cloning → IDE prompts to install
- You click "Install"
- Done!
**Alternative:** Use GitHub Desktop (https://desktop.github.com) for visual interface
---
## Troubleshooting
**Issue:** "Git command not found" → Let IDE install when prompted
**Issue:** "Permission denied" → Sign into GitHub in IDE
**Issue:** Clone fails → Check URL copied correctly
---
## What's Next?
Project cloned! Now initialize WDS and meet Mimir.
**[Continue to Lesson 04: WDS Project Initialization →](../lesson-04-wds-initialization/02-full-lesson.md)**
---
*Part of Module 02: Installation & Setup*
*[← Back to Module Overview](../module-02-overview.md)*

View File

@ -0,0 +1,41 @@
# Lesson 03: Git Configuration - Quick Checklist
**⏱️ 5 minutes**
---
## Choose Approach
- [ ] **Option 1:** Let Cursor handle Git (easiest - do nothing now!)
- [ ] **Option 2:** Use GitHub Desktop (visual) → https://desktop.github.com
- [ ] **Option 3:** Check terminal: `git --version`
---
## If Using GitHub Desktop
- [ ] Download from https://desktop.github.com
- [ ] Install
- [ ] Sign in with GitHub account
- [ ] ✅ Ready to clone visually
---
## Recap Your Repo Structure
You decided in Lesson 01:
- [ ] Single repo: `my-project` (specs + code together)
- [ ] Separate repo: `my-project-specs` (specs only)
---
## Next Step
✅ Git configured!
**[→ Lesson 04: Repository Cloning & WDS Integration](../lesson-04-clone-and-wds/checklist.md)**
---
**Need more detail?** See [full lesson explanation](lesson.md)

View File

@ -0,0 +1,159 @@
# Lesson 03: Git Configuration
**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.
**Good news:** You don't need to install it manually! Modern IDEs like Cursor handle this for you.
---
## Step 1: Recap Your Repository Structure
**You already decided this in Lesson 01 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
```
**For this tutorial, we assume single repo** (`dog-walker-app`)
---
## Step 2: Choose Your Git Approach
### Option 1: Let Cursor Handle It (Recommended)
**The easiest way:** Do nothing!
When you try to clone a repository in Lesson 04, 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.**
**Bonus:** GitHub Desktop also helps you decide between single vs separate repos visually!
---
### 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 04, 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 04
**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 04: Repository Cloning & WDS Integration →](../lesson-04-clone-and-wds/tutorial.md)**
---
*Part of Module 02: Installation & Setup*
*[← Back to Module Overview](../module-02-overview.md)*

View File

@ -0,0 +1,93 @@
# Lesson 04: Repository Cloning & WDS Integration - Quick Checklist
**⏱️ 15-20 minutes**
---
## Create Projects Folder
In Cursor terminal (**Ctrl+`** or **Cmd+`**):
```bash
# Windows
mkdir C:\Projects
cd C:\Projects
# Mac/Linux
mkdir ~/Projects
cd ~/Projects
```
- [ ] ✅ Projects folder created
---
## Clone Your Project
- [ ] Go to your repo on GitHub → Click **"Code"** → Copy URL
- [ ] In terminal: `git clone [paste-url-here]`
- [ ] (If prompted: Install Git → Click "Install")
- [ ] ✅ "done" message
---
## Open Project in Cursor
- [ ] **File** → **Open Folder**
- [ ] Select your project folder
- [ ] ✅ Project in sidebar
---
## Clone WDS
In terminal:
```bash
cd ~/Projects # or cd C:\Projects
git clone https://github.com/whiteport-collective/whiteport-design-studio.git
```
- [ ] ✅ WDS cloned
---
## Add WDS to Workspace
- [ ] **File** → **Add Folder to Workspace**
- [ ] Select `whiteport-design-studio` folder
- [ ] Click **"Add"**
- [ ] ✅ Both folders in sidebar
---
## Create Docs Structure
In terminal (in YOUR project folder):
```bash
cd ~/Projects/your-project-name # YOUR project!
# Mac/Linux
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}
# Windows (if above doesn't work)
mkdir docs
cd docs
mkdir 1-project-brief 2-trigger-mapping 3-prd-platform 4-ux-design 5-design-system 6-design-deliveries 7-testing 8-ongoing-development
cd ..
```
- [ ] ✅ 8 folders in `docs/`
---
## Next Step
✅ Everything cloned and ready!
**[→ Lesson 05: Mimir Activation](../lesson-05-initiate-mimir/checklist.md)**
---
**Need more detail?** See [full lesson explanation](lesson.md)

View File

@ -0,0 +1,217 @@
# Lesson 04: Repository Cloning & WDS Integration
**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
**What is cloning?** Copying your GitHub repository to your computer so you can work on it.
### 2.1 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`
### 2.2 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
**What is WDS?** The methodology files that contain agents, workflows, and training.
**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
**What is the docs folder?** Where all your WDS specifications will live. This is your design source of truth.
**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 (Step 5)
**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 05: Mimir Activation →](../lesson-05-initiate-mimir/tutorial.md)**
---
*Part of Module 02: Installation & Setup*
*[← Back to Module Overview](../module-02-overview.md)*

View File

@ -0,0 +1,73 @@
# Lesson 04: WDS Project Initialization - Quick Checklist
**⏱️ 15-20 minutes**
---
## Clone WDS Repository
In terminal (in Projects folder):
```bash
cd ~/Projects # or cd C:\Projects
git clone https://github.com/whiteport-collective/whiteport-design-studio.git
```
- [ ] ✅ WDS cloned
---
## Add WDS to Workspace
- [ ] **File** → **Add Folder to Workspace**
- [ ] Select `whiteport-design-studio` folder
- [ ] ✅ Both folders in sidebar
---
## Create Docs Structure
In terminal (in YOUR project):
```bash
cd ~/Projects/your-project-name
# Mac/Linux
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}
# Windows (if above doesn't work)
mkdir docs
cd docs
mkdir 1-project-brief 2-trigger-mapping 3-prd-platform 4-ux-design 5-design-system 6-design-deliveries 7-testing 8-ongoing-development
cd ..
```
- [ ] ✅ 8 folders in `docs/`
---
## Activate Mimir
- [ ] Find `whiteport-design-studio/src/modules/wds/MIMIR-WDS-ORCHESTRATOR.md`
- [ ] Press **Ctrl+L** or **Cmd+L** (open AI chat)
- [ ] Drag Mimir file to chat
- [ ] Type: "Hello Mimir! I just completed setup."
- [ ] ✅ Mimir responds!
---
## 🎉 Complete!
- ✅ GitHub account & repository
- ✅ IDE installed
- ✅ Project cloned
- ✅ WDS integrated
- ✅ Docs structure created
- ✅ Mimir activated
**Next:** [Module 03: Create Project Brief](../../module-03-project-brief/module-03-overview.md)
---
**Need more detail?** See [full lesson](02-full-lesson.md)

View File

@ -0,0 +1,206 @@
# Lesson 04: WDS Project Initialization
**Add WDS, create structure, activate Mimir**
---
## What You'll Do
- Clone WDS repository
- Add WDS to workspace
- Create docs structure (8 phases)
- Activate Mimir
**Time:** 15-20 minutes
---
## Step 1: Clone WDS Repository
**WDS lives separately from your project.**
In terminal (make sure you're in Projects folder):
```bash
# Navigate to Projects
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 2: Add WDS to Workspace
1. **File** → **Add Folder to Workspace**
2. Navigate to Projects folder
3. Select `whiteport-design-studio` folder
4. Click **"Add"**
**✅ Checkpoint:** Both folders in sidebar:
- your-project
- whiteport-design-studio
---
## Step 3: Create Docs Structure
**What is docs?** Where all WDS specifications live. Your design source of truth.
Navigate to YOUR project:
```bash
cd ~/Projects/your-project-name # Use YOUR project name!
cd C:\Projects\your-project-name # Windows
```
Create 8-phase structure:
```bash
# Mac/Linux
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:**
```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:** `docs/` folder with 8 numbered subfolders
---
## Step 4: Activate Mimir
### What is Mimir?
Your WDS guide and orchestrator. He'll:
- Assess your skill level
- Check your setup
- Guide your next steps
- Connect you with specialist agents
### Find Mimir
In IDE sidebar:
1. Expand `whiteport-design-studio`
2. Expand `src``modules``wds`
3. Find `MIMIR-WDS-ORCHESTRATOR.md`
### Open AI Chat
- **Windows/Linux:** Press **Ctrl+L**
- **Mac:** Press **Cmd+L**
- Or click chat icon
### Activate
1. Drag `MIMIR-WDS-ORCHESTRATOR.md` into chat
2. OR type: `@MIMIR-WDS-ORCHESTRATOR.md`
3. Type: "Hello Mimir! I just completed setup and I'm ready to start."
4. Press **Enter**
**✅ Checkpoint:** Mimir responds and welcomes you!
---
## Step 5: Answer Mimir's Questions
Be honest about:
- Your skill level
- Your project
- How you're feeling
Mimir will:
- Verify your installation
- Guide your next steps
- Connect you with specialists
**Remember:** `@wds-mimir [your question]` anytime!
---
## Quick Reference: File Structure
```
Projects/
├── your-project/ ← YOUR PROJECT
│ ├── docs/ ← Specifications
│ │ ├── 1-project-brief/
│ │ ├── 2-trigger-mapping/
│ │ ├── 3-prd-platform/
│ │ ├── 4-ux-design/
│ │ ├── 5-design-system/
│ │ ├── 6-design-deliveries/
│ │ ├── 7-testing/
│ │ └── 8-ongoing-development/
│ └── README.md
└── whiteport-design-studio/ ← WDS METHODOLOGY
└── src/modules/wds/
├── agents/
├── workflows/
├── course/
└── MIMIR-WDS-ORCHESTRATOR.md
```
---
## Troubleshooting
**Issue:** Can't find MIMIR file → Check WDS added to workspace
**Issue:** Drag doesn't work → Use `@MIMIR-WDS-ORCHESTRATOR.md`
**Issue:** mkdir fails → Make sure you're in your project folder
---
## 🎉 Congratulations!
You've completed Module 02: Installation & Setup!
**What you accomplished:**
- ✅ GitHub account & repository
- ✅ IDE installed
- ✅ Project cloned
- ✅ WDS integrated
- ✅ Docs structure created
- ✅ Mimir activated
**You're ready to design with WDS!**
---
## What's Next?
- **[Module 03: Create Project Brief](../../module-03-project-brief/module-03-overview.md)**
- **[WDS Training Course](../../00-course-overview.md)**
- **Ask Mimir:** "What should I do next?"
**Remember:** `@wds-mimir [your question]` anytime! 🌊
---
*Part of Module 02: Installation & Setup*
*[← Back to Module Overview](../module-02-overview.md)*

View File

@ -0,0 +1,79 @@
# Lesson 05: Mimir Activation - Quick Checklist
**⏱️ 5 minutes**
---
## Find Mimir
In Cursor sidebar:
- [ ] Expand `whiteport-design-studio`
- [ ] Expand `src``modules``wds`
- [ ] Find `MIMIR-WDS-ORCHESTRATOR.md`
---
## Open AI Chat
- [ ] Press **Ctrl+L** (Win/Linux) or **Cmd+L** (Mac)
- [ ] Or click chat icon in sidebar
---
## Activate Mimir
- [ ] Drag `MIMIR-WDS-ORCHESTRATOR.md` into chat input
- [ ] OR type: `@MIMIR-WDS-ORCHESTRATOR.md`
- [ ] Type: "Hello Mimir! I just completed setup and I'm ready to start."
- [ ] Press **Enter**
- [ ] ✅ Mimir responds!
---
## Answer Mimir's Questions
Be honest about:
- [ ] Your skill level (beginner/learning/comfortable/experienced)
- [ ] Your project
- [ ] How you're feeling
Mimir will:
- [ ] Verify your installation
- [ ] Guide your next steps
- [ ] Connect you with specialist agents when ready
---
## Remember This Command
Whenever you need help:
```
@wds-mimir [your question]
```
---
## 🎉 You Did It!
**Completed:**
- ✅ GitHub account & repository
- ✅ IDE installed
- ✅ Project cloned
- ✅ WDS integrated
- ✅ Docs structure created
- ✅ Mimir activated
**You're ready to design with WDS!**
---
## Next Steps
- **[Module 03: Create Project Brief](../../module-03-project-brief/module-03-overview.md)**
- **[WDS Training Course](../../00-course-overview.md)**
- **Ask Mimir:** "What should I do next?"
---
**Need more detail?** See [full lesson explanation](lesson.md)

View File

@ -0,0 +1,244 @@
# Lesson 05: Mimir Activation
**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!**
**Alternative method:**
Type in chat:
```
@MIMIR-WDS-ORCHESTRATOR.md
```
---
## 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.
---
## 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 04, 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?"
---
## Pro Tips for Beginners
**Tip 1: Commit Often**
Every time you make meaningful progress, save to GitHub:
```bash
git add .
git commit -m "Describe what you did"
git push
```
**Tip 2: Keep WDS Updated**
Once a month, update WDS to get new features:
```bash
cd ~/Projects/whiteport-design-studio
git pull
```
**Tip 3: When in Doubt, Ask Mimir**
```
@wds-mimir [your question]
```
No question is too small!
**Tip 4: Save Your Workspace**
In Cursor: **File****Save Workspace As**`my-project.code-workspace`
Next time, just open this file!
---
## 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)*