Skip to content

Commit 18b3f07

Browse files
jamesmontemagnojamesmontemagno
committed
Break lab guide into digestible parts
- 00-overview.md: Quick intro and navigation - 01-setup.md: Setup & Context Engineering (15 min) - 02-design.md: Design-First Frontend (15 min) - 03-quiz-master.md: Custom Quiz Master (10 min) - 04-multi-agent.md: Multi-Agent Development (20 min) - GUIDE.md: Now a quick reference with task checklists
1 parent 92b0924 commit 18b3f07

6 files changed

Lines changed: 724 additions & 238 deletions

File tree

‎.lab/00-overview.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# 🎮 VS Code GitHub Copilot Agent Lab
2+
3+
> **Duration:** ~1 hour
4+
> **Level:** Intermediate
5+
> **Stack:** C# / .NET 10 / Blazor WebAssembly
6+
7+
Welcome to Soc Ops — a hands-on workshop where you'll transform a simple Social Bingo app into something amazing using VS Code's Agent Mode with GitHub Copilot.
8+
9+
---
10+
11+
## 📋 Quick Checklist
12+
13+
Before you begin, verify:
14+
15+
- [ ] VS Code **v1.107+** (no pending updates)
16+
- [ ] Signed in with **GitHub Copilot** (Pro, Business, or Enterprise)
17+
- [ ] Git installed
18+
- [ ] .NET 10 SDK installed
19+
- [ ] Chat panel open and Agent ready
20+
21+
> 💡 **Tip:** Use the DevContainer for a pre-configured environment!
22+
23+
---
24+
25+
## 🎯 What You'll Learn
26+
27+
| # | Skill | Description |
28+
|---|-------|-------------|
29+
| 1 | **Context Engineering** | Teach AI about your codebase with instructions |
30+
| 2 | **Agentic Primitives** | Use background agents, cloud agents, and custom workflows |
31+
| 3 | **Design-First Development** | Let AI iterate on UI while you guide the vision |
32+
| 4 | **Test-Driven Development** | Use TDD agents for reliable feature development |
33+
34+
---
35+
36+
## 📚 Lab Parts
37+
38+
| Part | Title | Time | Description |
39+
|------|-------|------|-------------|
40+
| [**01**](01-setup.md) | Setup & Context Engineering | 15 min | Clone, configure, and teach the AI about your project |
41+
| [**02**](02-design.md) | Design-First Frontend | 15 min | Redesign the UI with creative themes |
42+
| [**03**](03-quiz-master.md) | Custom Quiz Master | 10 min | Create your own quiz themes with custom agents |
43+
| [**04**](04-multi-agent.md) | Multi-Agent Development | 20 min | Build new features with TDD and design agents |
44+
45+
---
46+
47+
## 💡 Pro Tips
48+
49+
1. **Keep the browser open** — Watch live updates as you code
50+
2. **Commit often** — Save working states frequently
51+
3. **Use checkpoints** — Revert unexpected changes with chat Checkpoints & Undo
52+
4. **📌 Pin this guide** — Keep it visible while you work
53+
54+
---
55+
56+
## 🚀 Ready?
57+
58+
👉 **[Start with Part 1: Setup](01-setup.md)**
59+
60+
---
61+
62+
*Created for .NET developers by the VS Code and .NET teams*

‎.lab/01-setup.md‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
# Part 1: Setup & Context Engineering
2+
3+
> ⏱️ **Time:** ~15 minutes
4+
5+
In this section, you'll set up your development environment and teach GitHub Copilot about your codebase.
6+
7+
---
8+
9+
## 🔧 Initial Setup
10+
11+
### Step 1: Create Your Repository
12+
13+
1. Open [github.com/dotnet-presentations/vscode-github-copilot-agent-lab](https://github.com/dotnet-presentations/vscode-github-copilot-agent-lab)
14+
2. Click **Use this template** → **Create a new repository**
15+
- Name: `my-soc-ops-csharp`
16+
- Visibility: **Public**
17+
3. ✅ Your own Soc Ops repo is ready!
18+
19+
### Step 2: Enable GitHub Pages
20+
21+
1. Go to your repo's **Settings** → **Pages**
22+
2. Under "Build and deployment", select **GitHub Actions**
23+
3. ✅ Every commit will now publish to: `https://{username}.github.io/{repo-name}`
24+
25+
### Step 3: Clone & Open in VS Code
26+
27+
1. Open VS Code
28+
2. Run command: `Git: Clone` → `Clone from GitHub`
29+
3. Select your new repository
30+
4. When prompted, install **recommended extensions**
31+
32+
### Step 4: Run the Setup Agent
33+
34+
In the Chat panel:
35+
36+
```
37+
/setup
38+
```
39+
40+
The agent will:
41+
- Detect your environment
42+
- Install any missing dependencies
43+
- Start the development server
44+
45+
✅ **Success:** App is running in your browser!
46+
47+
---
48+
49+
## 📚 Understanding Context Engineering
50+
51+
Context engineering is how you teach AI about your specific codebase. This makes Copilot's suggestions more accurate and relevant.
52+
53+
### Task 1: Generate Workspace Instructions
54+
55+
Instructions guide all agentic interactions, making them efficient and reliable.
56+
57+
**Steps:**
58+
59+
1. Run command: `Chat: Generate Workspace Instructions File`
60+
2. Wait for the agent to analyze your codebase
61+
3. Review the generated instructions (probably too detailed!)
62+
4. Follow up with:
63+
```
64+
Compress down by half and add a mandatory development checklist
65+
(lint, build, test) to the top
66+
```
67+
5. **Commit** the instructions file
68+
69+
✅ **Result:** All future requests have a basic map of your workspace.
70+
71+
---
72+
73+
### Task 2: Background Agents for Parallel Work
74+
75+
Background agents run in isolated git worktrees — perfect for tasks that don't need handholding.
76+
77+
**Steps:**
78+
79+
1. Click `+` in Chat → **New background agent**
80+
2. Enter:
81+
```
82+
Add linting rules for unused vars and async/await usage; fix any errors
83+
```
84+
3. Let it run, then **Review** and **Apply** the changes
85+
4. Right-click the session to delete it when done
86+
87+
**Try a Cloud Agent too:**
88+
89+
1. Click `+` → **New cloud agent**
90+
2. Enter:
91+
```
92+
Make the README more engaging as a landing page to the project
93+
```
94+
95+
✅ **Result:** Linting rules added, errors fixed, README improved — all merged back to main!
96+
97+
---
98+
99+
### Task 3: Explore Existing Instructions
100+
101+
Your repo comes with pre-configured instructions that help the AI understand the project.
102+
103+
#### CSS Utilities Instructions
104+
105+
📄 See `.github/instructions/css-utilities.instructions.md`
106+
107+
These document the custom Tailwind-like CSS classes available in this Blazor project.
108+
109+
> 💡 **Optional:** Delete the main text and re-run the prompt to see how it generates
110+
111+
#### Frontend Design Instructions
112+
113+
📄 See `.github/instructions/frontend-design.instructions.md`
114+
115+
The "no purple gradients" instructions challenge the agent to think like a designer.
116+
117+
> 💡 **Think about:** What other AI biases could you challenge and nudge?
118+
119+
---
120+
121+
## ✅ Part 1 Complete!
122+
123+
You've learned how to:
124+
- Set up your development environment
125+
- Generate and refine workspace instructions
126+
- Use background and cloud agents for parallel work
127+
- Understand existing instruction files
128+
129+
---
130+
131+
👉 **[Continue to Part 2: Design-First Frontend](02-design.md)**

‎.lab/02-design.md‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
# Part 2: Design-First Frontend
2+
3+
> ⏱️ **Time:** ~15 minutes
4+
5+
Now that your repo context is engineered, let's get creative! You'll redesign the entire UI using AI-assisted development.
6+
7+
---
8+
9+
## 🎨 Task 1: Make It Yours
10+
11+
Use **Plan Mode** to start any bigger work item. Iterate on the plan (2+ times!) with tweaks and clarifications.
12+
13+
### Steps
14+
15+
1. In Chat, switch to **Plan Mode** (toggle at bottom)
16+
2. Enter your vision:
17+
```
18+
Let's do a full redesign. Make it [YOUR THEME]
19+
```
20+
3. Review the generated plan
21+
4. Ask for adjustments until you're happy
22+
5. Click **Implement** to execute
23+
24+
### 🎭 Theme Ideas
25+
26+
Pick one that speaks to you:
27+
28+
| Category | Themes |
29+
|----------|--------|
30+
| **Minimal** | Minimalist Mono, Scandinavian Calm, Desert Sand Minimal |
31+
| **Retro** | Retro Terminal Green, Pixel Arcade Style, Vaporwave Sunset |
32+
| **Dark** | Cyberpunk Neon, Dark Mode Noir, Space Galaxy Glow |
33+
| **Playful** | Playful Candy Pop, Toybox Primary Colors, Anime Bubble |
34+
| **Professional** | Corporate Clean Blue, Gradient Glass UI, Metallic Chrome |
35+
| **Creative** | Brutalist Blocks, Geometric Memphis, Bold Constructivist |
36+
| **Cozy** | Cozy Coffee Shop, Soft Pastel Clouds, Notebook Doodle |
37+
| **Unique** | Skeuomorphic Stickers, Paper Card Cutouts, Chalkboard |
38+
39+
✅ **Result:** Frontend and CSS utility instructions combine to build a beautiful design.
40+
41+
---
42+
43+
## 📝 Task 2: Keep Instructions Updated
44+
45+
When you make major architecture, design, or dependency changes, update your instructions!
46+
47+
### Steps
48+
49+
1. After your redesign, follow up:
50+
```
51+
Add a design guide section to copilot-instructions.md
52+
```
53+
2. Review the changes
54+
3. **Commit and push**
55+
56+
> 💡 Check that GitHub Pages is updating with your new design!
57+
58+
---
59+
60+
## 🚀 Task 3: Scale Exploration with Cloud Agents
61+
62+
Generate multiple design variations in parallel using cloud agents.
63+
64+
### Steps
65+
66+
1. Start a **new Chat** in Plan Mode
67+
2. Enter:
68+
```
69+
Redesign the start screen as a more engaging landing page
70+
```
71+
3. Note the variations suggested in the plan
72+
4. Run the exploration prompt:
73+
```
74+
/cloud-explore design variations
75+
```
76+
📄 See `.github/prompts/cloud-explore.prompt.md`
77+
78+
5. Check **Agent Sessions** to track the 3 new cloud agents
79+
6. Click any session to follow progress or open in web
80+
81+
### What's Happening
82+
83+
The prompt spins up **3 parallel cloud agents**, each exploring a different design direction. They'll:
84+
- Create branches
85+
- Implement variations
86+
- Take screenshots
87+
- Open PRs for your review
88+
89+
✅ **Result:** 3 design variations to compare, all running in parallel!
90+
91+
> ⏰ These take a few minutes. Continue to Part 3 while they run.
92+
93+
---
94+
95+
## 🖼️ Design Showcase
96+
97+
Here's what the **Cyberpunk Neon** theme looks like:
98+
99+
```
100+
┌─────────────────────────────────────────────┐
101+
│ ╔═══════════════════════════════════════╗ │
102+
│ ║ 🎮 SOC OPS - SOCIAL BINGO 🎮 ║ │
103+
│ ╚═══════════════════════════════════════╝ │
104+
│ │
105+
│ ┌─────┬─────┬─────┬─────┬─────┐ │
106+
│ │ ▓▓▓ │ ░░░ │ ▓▓▓ │ ░░░ │ ▓▓▓ │ │
107+
│ ├─────┼─────┼─────┼─────┼─────┤ │
108+
│ │ ░░░ │ ▓▓▓ │ ░░░ │ ▓▓▓ │ ░░░ │ NEON │
109+
│ ├─────┼─────┼─────┼─────┼─────┤ GLOW │
110+
│ │ ▓▓▓ │ ░░░ │ ★★★ │ ░░░ │ ▓▓▓ │ │
111+
│ ├─────┼─────┼─────┼─────┼─────┤ │
112+
│ │ ░░░ │ ▓▓▓ │ ░░░ │ ▓▓▓ │ ░░░ │ │
113+
│ ├─────┼─────┼─────┼─────┼─────┤ │
114+
│ │ ▓▓▓ │ ░░░ │ ▓▓▓ │ ░░░ │ ▓▓▓ │ │
115+
│ └─────┴─────┴─────┴─────┴─────┘ │
116+
│ │
117+
│ [ 🔄 NEW GAME ] [ 🎯 BINGO! ] │
118+
└─────────────────────────────────────────────┘
119+
```
120+
121+
---
122+
123+
## ✅ Part 2 Complete!
124+
125+
You've learned how to:
126+
- Use Plan Mode for complex design tasks
127+
- Iterate on plans before implementing
128+
- Keep instructions updated with changes
129+
- Scale exploration with parallel cloud agents
130+
131+
---
132+
133+
👉 **[Continue to Part 3: Custom Quiz Master](03-quiz-master.md)**

0 commit comments

Comments
 (0)