refactor(wds): Final Module 02 structure with 4 clean lessons
Complete restructure with logical separation: Lesson 01: Git Setup (15-20 min) - GitHub account creation - Repository creation or joining existing - Single vs separate repo decision at naming Lesson 02: IDE Installation (10 min) - Cursor or VS Code choice and installation - First launch setup - Terminal verification Lesson 03: Git Repository Cloning (10 min) - Create Projects folder - Clone your repository - Open in IDE - Git auto-installation by IDE Lesson 04: WDS Project Initialization (15-20 min) - Clone WDS repository - Add WDS to workspace - Create 8-phase docs structure - Activate Mimir Each lesson: - 01-quick-checklist.md (checkbox action list) - 02-full-lesson.md (detailed explanation) Also organized course explainers: - Created course-explainers/ folder at course root - Moved all NotebookLM and YouTube content there - Cleaner module folders Benefits: - Clear logical separation of concerns - Mimir integrated with WDS init (natural fit) - Git cloning separate from WDS setup - Each lesson focused on single topic - Dual format for all learning styles
This commit is contained in:
Mårten Angner
parent
11422e16a4
commit
b93bfef6ef
|
|
@ -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)
|
||||
|
||||
|
|
@ -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)*
|
||||
|
||||
|
|
@ -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)
|
||||
|
||||
|
|
@ -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)*
|
||||
|
||||
|
|
@ -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)
|
||||
|
||||
|
|
@ -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)*
|
||||
|
||||
|
|
@ -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)
|
||||
|
||||
|
|
@ -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)*
|
||||
|
||||
|
|
@ -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)
|
||||
|
||||
|
|
@ -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)*
|
||||
|
|
@ -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)
|
||||
|
||||
|
|
@ -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)*
|
||||
|
||||
|
|
@ -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)
|
||||
|
||||
|
|
@ -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)*
|
||||
|
|
@ -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)
|
||||
|
||||
|
|
@ -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)*
|
||||
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)*
|
||||
Loading…
Reference in New Issue