diff --git a/src/modules/wds/course/00-course-overview/explainers/00-getting-started-NOTEBOOKLM-PROMPT.md b/src/modules/wds/course/course-explainers/00-getting-started-NOTEBOOKLM-PROMPT.md similarity index 100% rename from src/modules/wds/course/00-course-overview/explainers/00-getting-started-NOTEBOOKLM-PROMPT.md rename to src/modules/wds/course/course-explainers/00-getting-started-NOTEBOOKLM-PROMPT.md diff --git a/src/modules/wds/course/00-course-overview/explainers/00-getting-started-YOUTUBE-SHOW-NOTES.md b/src/modules/wds/course/course-explainers/00-getting-started-YOUTUBE-SHOW-NOTES.md similarity index 100% rename from src/modules/wds/course/00-course-overview/explainers/00-getting-started-YOUTUBE-SHOW-NOTES.md rename to src/modules/wds/course/course-explainers/00-getting-started-YOUTUBE-SHOW-NOTES.md diff --git a/src/modules/wds/course/module-01-why-wds-matters/Module-01-explainers/module-01-NOTEBOOKLM-PROMPT.md b/src/modules/wds/course/course-explainers/module-01-NOTEBOOKLM-PROMPT.md similarity index 100% rename from src/modules/wds/course/module-01-why-wds-matters/Module-01-explainers/module-01-NOTEBOOKLM-PROMPT.md rename to src/modules/wds/course/course-explainers/module-01-NOTEBOOKLM-PROMPT.md diff --git a/src/modules/wds/course/module-01-why-wds-matters/Module-01-explainers/module-01-YOUTUBE-SHOW-NOTES.md b/src/modules/wds/course/course-explainers/module-01-YOUTUBE-SHOW-NOTES.md similarity index 100% rename from src/modules/wds/course/module-01-why-wds-matters/Module-01-explainers/module-01-YOUTUBE-SHOW-NOTES.md rename to src/modules/wds/course/course-explainers/module-01-YOUTUBE-SHOW-NOTES.md diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-01-git-setup/01-quick-checklist.md b/src/modules/wds/course/module-02-installation-setup/lesson-01-git-setup/01-quick-checklist.md new file mode 100644 index 00000000..c62a12f8 --- /dev/null +++ b/src/modules/wds/course/module-02-installation-setup/lesson-01-git-setup/01-quick-checklist.md @@ -0,0 +1,63 @@ +# Lesson 01: Git Setup - Quick Checklist + +**⏱️ 15-20 minutes** + +--- + +## Part 1: Create GitHub Account + +- [ ] Go to **https://github.com** +- [ ] Click **"Sign up"** +- [ ] Enter email, password, username (professional: `yourname-designer`) +- [ ] Verify email +- [ ] ✅ Log in successful + +--- + +## Part 2: Choose Your Scenario + +- [ ] **A:** Starting new project → Continue below +- [ ] **B:** Joining existing → Skip to "Join Existing" +- [ ] **C:** Just learning → Skip to [Lesson 02](../lesson-02-ide-installation/01-quick-checklist.md) + +--- + +## Part 3: Create New Repository + +- [ ] Click profile icon → **"Your repositories"** → **"New"** + +### Decide: Single or Separate? + +- [ ] **Single repo:** `my-project` (specs + code together, small teams) +- [ ] **Separate repo:** `my-project-specs` (specs only, corporate/many devs) + +### Repository Settings + +- [ ] Name: `_____________` (lowercase-with-hyphens) +- [ ] Description: One-liner about project +- [ ] Public or Private +- [ ] ☑️ Check "Initialize with README" +- [ ] Click **"Create repository"** +- [ ] ✅ Repository created + +--- + +## Part 4: Join Existing Repository + +- [ ] Ask owner for access (see full lesson for email template) +- [ ] Accept invitation from email +- [ ] Check repo structure +- [ ] ✅ Access granted + +--- + +## Next Step + +✅ GitHub ready! + +**[→ Lesson 02: IDE Installation](../lesson-02-ide-installation/01-quick-checklist.md)** + +--- + +**Need more detail?** See [full lesson](02-full-lesson.md) + diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-01-git-setup/02-full-lesson.md b/src/modules/wds/course/module-02-installation-setup/lesson-01-git-setup/02-full-lesson.md new file mode 100644 index 00000000..c76972db --- /dev/null +++ b/src/modules/wds/course/module-02-installation-setup/lesson-01-git-setup/02-full-lesson.md @@ -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)* + diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-01-github-and-ide-setup/01-quick-checklist.md b/src/modules/wds/course/module-02-installation-setup/lesson-01-github-and-ide-setup/01-quick-checklist.md deleted file mode 100644 index 5c256ed0..00000000 --- a/src/modules/wds/course/module-02-installation-setup/lesson-01-github-and-ide-setup/01-quick-checklist.md +++ /dev/null @@ -1,87 +0,0 @@ -# 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) - diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-01-github-and-ide-setup/02-full-lesson.md b/src/modules/wds/course/module-02-installation-setup/lesson-01-github-and-ide-setup/02-full-lesson.md deleted file mode 100644 index 55422288..00000000 --- a/src/modules/wds/course/module-02-installation-setup/lesson-01-github-and-ide-setup/02-full-lesson.md +++ /dev/null @@ -1,203 +0,0 @@ -# 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)* - diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-02-git-configuration/01-quick-checklist.md b/src/modules/wds/course/module-02-installation-setup/lesson-02-git-configuration/01-quick-checklist.md deleted file mode 100644 index a069c50d..00000000 --- a/src/modules/wds/course/module-02-installation-setup/lesson-02-git-configuration/01-quick-checklist.md +++ /dev/null @@ -1,40 +0,0 @@ -# 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) - diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-02-git-configuration/02-full-lesson.md b/src/modules/wds/course/module-02-installation-setup/lesson-02-git-configuration/02-full-lesson.md deleted file mode 100644 index 658f60f8..00000000 --- a/src/modules/wds/course/module-02-installation-setup/lesson-02-git-configuration/02-full-lesson.md +++ /dev/null @@ -1,88 +0,0 @@ -# Lesson 02: Git Configuration - -**Let your IDE handle Git automatically** - ---- - -## What You'll Do - -- Understand what Git does -- Let Cursor install Git automatically -- OR use GitHub Desktop (visual alternative) - -**Time:** 5 minutes - ---- - -## What is Git? - -**Git** syncs your computer with GitHub. Good news: You don't need to install it manually! - ---- - -## Option 1: Let Cursor Handle It (Recommended) - -**Do nothing now!** - -When you clone in Lesson 03, Cursor will: -1. Check if Git is installed -2. Prompt "Install Git?" if needed -3. You click "Install" -4. Done! - -**This is easiest for beginners.** - ---- - -## Option 2: GitHub Desktop (Visual Alternative) - -**For designers who prefer visual tools:** - -### Why GitHub Desktop? - -- No terminal commands -- Visual interface -- See changes graphically -- Many professionals use it - -### Install - -1. Download: https://desktop.github.com -2. Install (standard installer) -3. Sign in with GitHub account -4. Use it to clone repositories (Lesson 03) -5. Use Cursor to edit specifications - -**This is a valid professional workflow!** - ---- - -## Recap: Your Repository Structure - -**You decided in Lesson 01:** - -**Single repo (`my-project`):** -``` -my-project/ -├── docs/ ← Specs -└── src/ ← Code -``` - -**Separate repo (`my-project-specs`):** -``` -my-project-specs/ ← Specs only -``` - ---- - -## What's Next? - -Git will be ready when you need it! Now clone your repository and add WDS. - -**[Continue to Lesson 03: Repository Cloning & WDS Integration →](../lesson-03-clone-and-wds/lesson.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-ide-installation/01-quick-checklist.md b/src/modules/wds/course/module-02-installation-setup/lesson-02-ide-installation/01-quick-checklist.md new file mode 100644 index 00000000..d891504b --- /dev/null +++ b/src/modules/wds/course/module-02-installation-setup/lesson-02-ide-installation/01-quick-checklist.md @@ -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) + diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-02-ide-installation/02-full-lesson.md b/src/modules/wds/course/module-02-installation-setup/lesson-02-ide-installation/02-full-lesson.md new file mode 100644 index 00000000..594a11e4 --- /dev/null +++ b/src/modules/wds/course/module-02-installation-setup/lesson-02-ide-installation/02-full-lesson.md @@ -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)* + diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-03-clone-and-wds/01-quick-checklist.md b/src/modules/wds/course/module-02-installation-setup/lesson-03-clone-and-wds/01-quick-checklist.md deleted file mode 100644 index d7b59c5d..00000000 --- a/src/modules/wds/course/module-02-installation-setup/lesson-03-clone-and-wds/01-quick-checklist.md +++ /dev/null @@ -1,93 +0,0 @@ -# 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) - diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-03-clone-and-wds/02-full-lesson.md b/src/modules/wds/course/module-02-installation-setup/lesson-03-clone-and-wds/02-full-lesson.md deleted file mode 100644 index 07afefcc..00000000 --- a/src/modules/wds/course/module-02-installation-setup/lesson-03-clone-and-wds/02-full-lesson.md +++ /dev/null @@ -1,217 +0,0 @@ -# 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)* diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-03-git-cloning/01-quick-checklist.md b/src/modules/wds/course/module-02-installation-setup/lesson-03-git-cloning/01-quick-checklist.md new file mode 100644 index 00000000..f5166c1f --- /dev/null +++ b/src/modules/wds/course/module-02-installation-setup/lesson-03-git-cloning/01-quick-checklist.md @@ -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) + diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-03-git-cloning/02-full-lesson.md b/src/modules/wds/course/module-02-installation-setup/lesson-03-git-cloning/02-full-lesson.md new file mode 100644 index 00000000..ed79dcfd --- /dev/null +++ b/src/modules/wds/course/module-02-installation-setup/lesson-03-git-cloning/02-full-lesson.md @@ -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)* + diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-04-initiate-mimir/01-quick-checklist.md b/src/modules/wds/course/module-02-installation-setup/lesson-04-initiate-mimir/01-quick-checklist.md deleted file mode 100644 index 1b736aa9..00000000 --- a/src/modules/wds/course/module-02-installation-setup/lesson-04-initiate-mimir/01-quick-checklist.md +++ /dev/null @@ -1,79 +0,0 @@ -# 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) - diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-04-initiate-mimir/02-full-lesson.md b/src/modules/wds/course/module-02-installation-setup/lesson-04-initiate-mimir/02-full-lesson.md deleted file mode 100644 index 4c894b8e..00000000 --- a/src/modules/wds/course/module-02-installation-setup/lesson-04-initiate-mimir/02-full-lesson.md +++ /dev/null @@ -1,244 +0,0 @@ -# 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)* diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-04-wds-initialization/01-quick-checklist.md b/src/modules/wds/course/module-02-installation-setup/lesson-04-wds-initialization/01-quick-checklist.md new file mode 100644 index 00000000..7c811317 --- /dev/null +++ b/src/modules/wds/course/module-02-installation-setup/lesson-04-wds-initialization/01-quick-checklist.md @@ -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) + diff --git a/src/modules/wds/course/module-02-installation-setup/lesson-04-wds-initialization/02-full-lesson.md b/src/modules/wds/course/module-02-installation-setup/lesson-04-wds-initialization/02-full-lesson.md new file mode 100644 index 00000000..71234e4c --- /dev/null +++ b/src/modules/wds/course/module-02-installation-setup/lesson-04-wds-initialization/02-full-lesson.md @@ -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)* + 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 73ae207e..e0c7478c 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 @@ -16,43 +16,35 @@ This module takes you from having nothing to being fully set up with WDS, even i ## Lessons -### [Lesson 01: GitHub & IDE Setup](lesson-01-github-and-ide-setup/) -**25-30 minutes** +### [Lesson 01: Git Setup](lesson-01-git-setup/) +**15-20 minutes** | Create GitHub account and repository -Create GitHub account, repository, and install your IDE. - -- **[01 - Quick Checklist](lesson-01-github-and-ide-setup/01-quick-checklist.md)** - Just the steps -- **[02 - Full Lesson](lesson-01-github-and-ide-setup/02-full-lesson.md)** - Detailed explanation +- **[01 - Quick Checklist](lesson-01-git-setup/01-quick-checklist.md)** - Action list +- **[02 - Full Lesson](lesson-01-git-setup/02-full-lesson.md)** - With explanations --- -### [Lesson 02: Git Configuration](lesson-02-git-configuration/) -**5 minutes** +### [Lesson 02: IDE Installation](lesson-02-ide-installation/) +**10 minutes** | Install Cursor or VS Code -Let your IDE handle Git automatically or use GitHub Desktop. - -- **[01 - Quick Checklist](lesson-02-git-configuration/01-quick-checklist.md)** - Just the steps -- **[02 - Full Lesson](lesson-02-git-configuration/02-full-lesson.md)** - Detailed explanation +- **[01 - Quick Checklist](lesson-02-ide-installation/01-quick-checklist.md)** - Action list +- **[02 - Full Lesson](lesson-02-ide-installation/02-full-lesson.md)** - With explanations --- -### [Lesson 03: Repository Cloning & WDS Integration](lesson-03-clone-and-wds/) -**15-20 minutes** +### [Lesson 03: Git Repository Cloning](lesson-03-git-cloning/) +**10 minutes** | Clone your project to your computer -Clone your repository, add WDS to workspace, create docs structure. - -- **[01 - Quick Checklist](lesson-03-clone-and-wds/01-quick-checklist.md)** - Just the steps -- **[02 - Full Lesson](lesson-03-clone-and-wds/02-full-lesson.md)** - Detailed explanation +- **[01 - Quick Checklist](lesson-03-git-cloning/01-quick-checklist.md)** - Action list +- **[02 - Full Lesson](lesson-03-git-cloning/02-full-lesson.md)** - With explanations --- -### [Lesson 04: Mimir Activation](lesson-04-initiate-mimir/) -**5 minutes** +### [Lesson 04: WDS Project Initialization](lesson-04-wds-initialization/) +**15-20 minutes** | Add WDS, create docs structure, activate Mimir -Drag Mimir file to AI chat and begin your guided journey. - -- **[01 - Quick Checklist](lesson-04-initiate-mimir/01-quick-checklist.md)** - Just the steps -- **[02 - Full Lesson](lesson-04-initiate-mimir/02-full-lesson.md)** - Detailed explanation +- **[01 - Quick Checklist](lesson-04-wds-initialization/01-quick-checklist.md)** - Action list +- **[02 - Full Lesson](lesson-04-wds-initialization/02-full-lesson.md)** - With explanations --- @@ -60,18 +52,16 @@ Drag Mimir file to AI chat and begin your guided journey. **Want the fastest path?** -Follow the checklists in order: [Start with Lesson 01 Checklist →](lesson-01-github-and-ide-setup/01-quick-checklist.md) +Follow the checklists: [Start with Lesson 01 Checklist →](lesson-01-git-setup/01-quick-checklist.md) **Want detailed explanations?** -Follow the full lessons: [Start with Lesson 01 Full Lesson →](lesson-01-github-and-ide-setup/02-full-lesson.md) +Follow the full lessons: [Start with Lesson 01 Full Lesson →](lesson-01-git-setup/02-full-lesson.md) --- ## After This Module -Once complete, you'll have: - - ✅ GitHub account and repository - ✅ IDE installed and configured - ✅ Project cloned to your computer 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 deleted file mode 100644 index 682cdaea..00000000 --- a/src/modules/wds/course/module-02-installation-setup/tutorial-02.md +++ /dev/null @@ -1,647 +0,0 @@ -# Tutorial 02: Complete Beginner Setup - -**From zero to WDS-ready - step by step, screenshot by screenshot** - ---- - -## 🎯 What You'll Accomplish - -By the end of this tutorial: - -- ✅ GitHub account created -- ✅ Project repository set up -- ✅ IDE installed (Cursor or VS Code) -- ✅ Project cloned to your computer -- ✅ WDS added to workspace -- ✅ Mimir activated and ready to guide you - -**Total time:** 45-60 minutes (first time) - -**No prior experience needed!** We assume you're starting from zero. - ---- - -## Step 1: Create Your GitHub Account 🌐 - -**What is GitHub?** Think of it as a 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. - -### 1.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 - -**Username Tips:** -- Professional (you might share this with clients) -- Simple and memorable -- Examples: `john-designer`, `sarahux`, `mike-creates` - -6. Verify you're human (solve the puzzle) -7. Check your email and click the verification link - -**✅ Checkpoint:** You can log in to GitHub - ---- - -## Step 2: Create Your Project Repository 📦 - -**What is a repository?** A folder that GitHub tracks. Every change you make is saved, and you can always go back. - -### 2.1 Three Scenarios - -**Before creating a repository, determine which scenario applies to you:** - -**Scenario A: Starting a New Project** (Continue to 2.2 below) -- You're starting fresh -- No existing repository -- You control the setup - -**Scenario B: Joining an Existing Project** (Skip to 2.6 below) -- Team project already exists -- Client has existing repository -- Contributing to ongoing work - -**Scenario C: Using WDS as a Reference Only** (Skip to Step 3) -- You're just learning WDS methodology -- Not starting a project yet -- Following along with tutorial - -**Most beginners: Use Scenario A (start new project)** - ---- - -### 2.2 Navigate to Repositories (Scenario A: New Project) - -1. After logging in, click your **profile icon** (top right) -2. Click **"Your repositories"** -3. Click the green **"New"** button - -### 2.3 Repository Settings (Scenario A continued) - -**IMPORTANT: Your naming choice determines your structure!** - -### Single Repo or Separate Specs Repo? - -**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 -``` - -**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 - -**For this tutorial:** -- Beginners: Use **Option A** (single repo like `dog-walker-app`) -- Corporate/Enterprise: Use **Option B** (separate like `dog-walker-app-specs`) - -**Choose your name now based on your situation!** - ---- - -**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) - -### 2.4 Create Repository (Scenario A continued) - -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 - -**Now skip to Step 3: Install Your IDE** - ---- - -### 2.6 Joining an Existing Repository (Scenario B) - -**If you're joining a team project or client repository:** - -#### 2.6.1 Request Repository Access - -**Ask the 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 - -#### 2.6.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"** - -#### 2.6.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 - -**Ask the team lead if unsure!** - -**✅ Checkpoint:** Invitation accepted, you understand the structure - -**Now continue to Step 3: Install Your IDE** - ---- - -## Step 3: Install Your IDE 💻 - -**What is an IDE?** Your workspace for creating specifications. Like Microsoft Word, but for design files. - -### 3.1 Choose: Cursor or VS Code? - -**Cursor (Recommended)** -- Built for AI assistance -- Modern interface -- Perfect for WDS -- **Download:** https://cursor.sh - -**VS Code (Alternative)** -- 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. - -### 3.2 Install Cursor - -1. Download from **https://cursor.sh** -2. Run the installer - - **Windows:** Double-click the `.exe` file - - **Mac:** Drag Cursor to Applications folder - - **Linux:** Follow the Linux installation instructions -3. Open Cursor for the first time -4. Choose your theme (Light or Dark - you can change this later) - -### 3.3 First Launch Setup - -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 - ---- - -## Step 4: Let the IDE Handle Git 🔧 - -**What is Git?** The behind-the-scenes tool that syncs your computer with GitHub. - -**Good news:** You don't need to install anything manually! Modern IDEs like Cursor handle this for you. - -### 4.1 Recap: Your Repository Structure - -**You already decided this in Step 2 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) - ← Create separate code repo later -``` - -**For this tutorial, we assume single repo** (`dog-walker-app`) - -### 4.2 Let Cursor Install Git Automatically - -When you try to clone a repository in Step 5, Cursor will: -1. Check if Git is installed -2. If not, **automatically prompt you to install it** -3. Click "Install" when prompted -4. Done! - -**That's it.** No command line needed. - -### 4.3 Alternative: GitHub Desktop (Even Easier!) - -**For designers who prefer visual tools:** - -1. Download **GitHub Desktop** from **https://desktop.github.com** -2. Install it -3. Sign in with your GitHub account -4. Use it to clone repositories (visual interface, no commands!) - -**Then** open the cloned folder in Cursor. - -**This is perfectly valid!** Many professional designers use GitHub Desktop. - -**Bonus:** GitHub Desktop also helps you decide between single vs separate repos visually! - -### 4.4 Already Comfortable with Terminal? - -If you want to verify Git is installed: - -In Cursor terminal (press **Ctrl+`** or **Cmd+`**): -```bash -git --version -``` - -If you see a version number → you're good! -If not → Continue to Step 5, Cursor will prompt you. - -**✅ Checkpoint:** Ready to clone your repository in Step 5! - ---- - -## Step 5: Clone Your Project Repository 📥 - -**What is cloning?** Copying your GitHub repository to your computer so you can work on it. - -### 5.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** (📋) to copy the URL - -**Your URL looks like:** `https://github.com/your-username/your-project.git` - -### 5.2 Choose Where to Clone - -**Windows:** `C:\Users\YourName\Projects\` -**Mac/Linux:** `/Users/YourName/Projects/` or `~/Projects/` - -**Don't have a Projects folder?** Let's create one: - -In Cursor terminal: -```bash -# Windows -mkdir C:\Projects -cd C:\Projects - -# Mac/Linux -mkdir ~/Projects -cd ~/Projects -``` - -### 5.3 Clone the Repository - -In Cursor terminal, type: - -```bash -git clone [paste your URL here] -``` - -**Example:** -```bash -git clone https://github.com/john-designer/dog-walker-app.git -``` - -Press Enter and wait for it to download. - -**✅ Checkpoint:** You see "Cloning into..." and then "done" - -### 5.4 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 the README.md file - ---- - -## Step 6: Add WDS to Your Workspace 🎨 - -**What is WDS?** The methodology files that contain agents, workflows, and training. - -### 6.1 Decide: Clone WDS Inside or Beside? - -**Option A: Inside Your Project (Simpler)** -``` -my-project/ -├── .wds/ ← WDS here -├── docs/ ← Your specs -└── README.md -``` - -**Option B: Separate in Workspace (Recommended)** -``` -Workspace/ -├── my-project/ ← Your project -└── whiteport-design-studio/ ← WDS here -``` - -**For beginners: Use Option B** (easier to update WDS later) - -### 6.2 Add WDS to Workspace - -**Method 1: Through Cursor (Easiest)** - -1. In Cursor: **File** → **Add Folder to Workspace** -2. You'll now clone WDS - -In Cursor terminal (make sure you're in your Projects folder): - -```bash -# Navigate to Projects folder -cd ~/Projects # Mac/Linux -cd C:\Projects # Windows - -# Clone WDS -git clone https://github.com/whiteport-collective/whiteport-design-studio.git -``` - -3. Back in Cursor: **File** → **Add Folder to Workspace** -4. Select the `whiteport-design-studio` folder -5. Click **"Add"** - -**✅ Checkpoint:** You see both folders in your Cursor sidebar: -- your-project -- whiteport-design-studio - ---- - -## Step 7: Create Your Docs Structure 📁 - -**What is the docs folder?** Where all your WDS specifications will live. This is your design source of truth. - -### 7.1 Create the 8-Phase Structure - -In Cursor terminal (make sure you're in YOUR project folder): - -```bash -# Navigate to your project -cd ~/Projects/dog-walker-app # Change to YOUR project name - -# Create docs structure -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 mkdir -p 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 - ---- - -## Step 8: Initiate with Mimir 🧠 - -**What is Mimir?** Your WDS guide and orchestrator. He'll assess your needs and connect you with the right agents. - -### 8.1 Find the Mimir File - -In Cursor sidebar: -1. Expand `whiteport-design-studio` -2. Expand `src` → `modules` → `wds` -3. Find **`MIMIR-WDS-ORCHESTRATOR.md`** - -### 8.2 Drag to AI Chat - -1. **Open AI chat** in Cursor (usually the chat icon, or press Ctrl+L / Cmd+L) -2. **Drag** `MIMIR-WDS-ORCHESTRATOR.md` into the chat input area -3. **Press Enter** or click Send - -**Alternative method:** -Type in chat: -``` -@MIMIR-WDS-ORCHESTRATOR.md -``` - -### 8.3 Your First Interaction - -Mimir will introduce himself and ask you questions like: - -- "What's your experience level with design tools?" -- "What project are you working on?" -- "How are you feeling about starting this?" - -**Be honest!** Mimir adapts to YOUR level. - -After assessment, Mimir will: -- ✅ Verify your installation -- ✅ Explain the next steps -- ✅ Introduce you to specialist agents -- ✅ Guide you to your first workflow - -**✅ Checkpoint:** Mimir responds and welcomes you to WDS! - ---- - -## 🎉 Congratulations! You're Set Up! - -### What You Just Accomplished - -In less than an hour, you: - -1. ✅ Created a professional GitHub account -2. ✅ Set up your first project repository -3. ✅ Installed a modern IDE (Cursor) -4. ✅ Cloned your project to your computer -5. ✅ Added WDS methodology to your workspace -6. ✅ Created proper folder structure -7. ✅ Activated Mimir, your guide -8. ✅ Ready to start designing! - -**This is a HUGE accomplishment!** Many designers never get past this step. You just did. - ---- - -## 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 building) - │ └── README.md ← Project description - │ - └── whiteport-design-studio/ ← WDS METHODOLOGY - └── src/modules/wds/ - ├── agents/ ← Agent definitions - ├── workflows/ ← Workflow guides - ├── course/ ← Training modules - └── MIMIR-WDS-ORCHESTRATOR.md ← Your guide -``` - ---- - -## Troubleshooting 🔧 - -### "Git command not found" -**Solution:** Install Git (see Step 4.2), then restart Cursor - -### "Permission denied" when cloning -**Solution:** Make sure you're signed into GitHub in Cursor - -### "Can't find MIMIR file" -**Solution:** Make sure you added `whiteport-design-studio` folder to workspace (Step 6) - -### "Mimir doesn't respond" -**Solution:** Make sure you dragged the ENTIRE file, not just the filename - -### "mkdir: cannot create directory" -**Solution:** Make sure you're in your project folder: `cd ~/Projects/your-project` - -### Still stuck? -Ask Mimir: **"@wds-mimir I'm stuck on installation, can you help?"** - ---- - -## Next Steps 🚀 - -**Now that you're set up:** - -### Option 1: Continue Training -[→ Module 03: Create Project Brief](../module-03-project-brief/module-03-overview.md) - -### Option 2: Start Your Project -Ask Mimir: -``` -@wds-mimir I want to start working on my project. Where should I begin? -``` - -### Option 3: Explore WDS -- Browse the workflows folder -- Read about the 8-phase structure -- Check out the other agents (Freyja, Saga, Idunn) - ---- - -## 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! - ---- - -**You did it! Welcome to WDS.** 🌊 - -*Part of Module 02: Installation & Setup* -*[← Back to Module Overview](module-02-overview.md)*