Skip to content

Commit c8876b4

Browse files
brunoborgesCopilot
brunoborges
and
Copilot
committed
Split .lab/GUIDE.md into multi-file step structure
Reorganize the monolithic GUIDE.md into numbered step files matching the agent-lab-java/python/dotnet structure: - .lab/00-overview.md: Checklist, learning objectives, tips - .lab/01-setup.md: Setup & Context Engineering - .lab/02-design.md: Design-First Frontend - .lab/03-quiz-master.md: Custom Quiz Master - .lab/04-multi-agent.md: Multi-Agent Development - .lab/05-complete.md: Workshop completion - .lab/GUIDE.md: Quick reference with links to all parts - README.md: Add lab guide table with links Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 6975006 commit c8876b4

8 files changed

Lines changed: 531 additions & 246 deletions

File tree

‎.lab/00-overview.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# 🎮 VS Code GitHub Copilot Agent Lab
2+
3+
[← README](../README.md)
4+
5+
---
6+
7+
> **Level:** Intermediate
8+
> **Stack:** TypeScript / Vite / Tailwind CSS
9+
10+
Welcome to **Soc Ops** — a hands-on workshop where you'll transform a Social Bingo app using VS Code's Agent Mode with GitHub Copilot.
11+
12+
---
13+
14+
## 📋 Quick Checklist
15+
16+
- [ ] Latest VS Code **v1.107** (no update pending)
17+
- [ ] Signed in with GitHub (Copilot Free can not run cloud agent!)
18+
- [ ] Git & Node installed
19+
- [ ] Chat open and Agent ready for action
20+
21+
*Optional*: Use DevContainer or WSL.
22+
23+
---
24+
25+
## 🎯 What You'll Learn
26+
27+
| # | Skill | Description |
28+
|---|-------|-------------|
29+
| 1 | **Context Engineering** | Onboard AI to your codebase and workflows |
30+
| 2 | **Agentic Primitives** | Build an AI-first engineering flow |
31+
| 3 | **Agentic Abundance** | Scale exploration and speed up learning |
32+
| 4 | **Design-First Development** | Let AI iterate on UI while you guide the vision |
33+
34+
---
35+
36+
## 📚 Lab Parts
37+
38+
| Part | Title | Description |
39+
|------|-------|-------------|
40+
| [**01**](01-setup.md) | Setup & Context Engineering | Clone, configure, and teach the AI about your project |
41+
| [**02**](02-design.md) | Design-First Frontend | Redesign the UI with creative themes |
42+
| [**03**](03-quiz-master.md) | Custom Quiz Master | Create your own quiz themes with custom agents |
43+
| [**04**](04-multi-agent.md) | Multi-Agent Development | Build new features with TDD and design agents |
44+
45+
---
46+
47+
## 💡 Tips
48+
49+
1. Keep the live-updated browser open
50+
2. Commit working code often
51+
3. Revert unexpected changes using chat *Checkpoints* and *Undo*, then try again
52+
53+
---
54+
55+
## 🔗 Resources
56+
57+
- [VS Code on YouTube](https://www.youtube.com/code)
58+
- [VS Code Copilot Docs](https://code.visualstudio.com/docs/copilot/overview)
59+
- [Awesome Copilot](https://github.com/github/awesome-copilot) for more customizations

‎.lab/01-setup.md‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
# Part 1: Setup & Context Engineering
2+
3+
[← Overview](00-overview.md)
4+
5+
---
6+
7+
In this section, you'll set up your development environment and teach GitHub Copilot about your codebase.
8+
9+
---
10+
11+
## 🔧 Initial Setup
12+
13+
### Step 1: Create Your Repository
14+
15+
1. Open [github.com/copilot-dev-days/agent-lab-typescript](https://github.com/copilot-dev-days/agent-lab-typescript)
16+
2. Click **Use this template** → **Create a new repository**
17+
- Name: `my-soc-ops`
18+
- Visibility: **Public**
19+
3. ✅ Your own Soc Ops repo is ready!
20+
21+
### Step 2: Enable GitHub Pages
22+
23+
1. Go to your repo's **Settings** → **Pages**
24+
2. Under "Build and deployment", change *Deploy from a branch* to **GitHub Actions**
25+
3. ✅ Any commit will now publish to: `https://{username}.github.io/{repo-name}`
26+
27+
### Step 3: Clone & Open in VS Code
28+
29+
1. Open VS Code
30+
2. Run command: `Git: Clone` → `Clone from GitHub`
31+
3. Select your new repository
32+
4. Install recommended extensions (notification or `Extensions: Show Recommended Extensions`)
33+
34+
### Step 4: Run the Setup Agent
35+
36+
In the Chat panel:
37+
38+
```
39+
/setup
40+
```
41+
42+
The agent will figure out any required installation steps.
43+
44+
✅ **Success:** App is running and open in browser!
45+
46+
Keep this `.lab/` guide open (📌 Pin).
47+
48+
---
49+
50+
## 📚 Understanding Context Engineering
51+
52+
Context engineering is how you teach AI about your specific codebase. This makes Copilot's suggestions more accurate and relevant.
53+
54+
### Task 1: Auto-generated Instructions
55+
56+
Instructions guide all agentic codebase interactions, making them more efficient and reliable. Add them early, but make sure to keep them maintained and succinct.
57+
58+
**Steps:**
59+
60+
1. Run command: `Chat: Generate Workspace Instructions File`
61+
- While agent analyzes the codebase, optionally start next task
62+
2. Review results — probably too long and detailed
63+
3. Follow-up: *"Compress down by half and add a mandatory development [ ] checklist (lint, build, test) to the top"*
64+
4. Commit instructions
65+
66+
✅ **Result:** All future requests will have a basic map of the workspace.
67+
68+
---
69+
70+
### Task 2: Background Agents
71+
72+
Handoff tasks that don't require handholding to background agents, which execute them isolated in git worktrees for quick parallel local iteration.
73+
74+
**Steps:**
75+
76+
1. Chat `+` → `New background agent` / `New cloud agent`
77+
2. New Background agent: *Add linting rules for unused vars and awaits usage; and fix any errors*
78+
- Review and *Apply*, then right-click delete the session
79+
3. New cloud agent: *Make the readme more engaging as landing page to the project*
80+
81+
✅ **Result:** Agents adjusted the rules, fixed errors, and all edits are merged back into main. Stricter linting rules will catch any human/agent mistakes earlier.
82+
83+
---
84+
85+
### Task 3: Check Tailwind 4 Instructions
86+
87+
Tailwind v4 instructions close gaps from training data and document the latest best practices.
88+
89+
See prompt in the footer.
90+
91+
> 💡 **Optional:** If interested how it works, delete main text and re-run the prompt
92+
93+
---
94+
95+
### Task 4: Check Frontend Instructions
96+
97+
The "no purple gradients" instructions challenge the agent to think like a designer and be more bold and creative.
98+
99+
Source: Claude blog, linked in the footer.
100+
101+
> 💡 **Think about:** What other agentic biases could you challenge and nudge?
102+
103+
---
104+
105+
## ✅ Part 1 Complete!
106+
107+
You've learned how to:
108+
- Set up your development environment
109+
- Generate and refine workspace instructions
110+
- Use background and cloud agents for parallel work
111+
- Understand existing instruction files

‎.lab/02-design.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
# Part 2: Design-First Frontend
2+
3+
[← Part 1](01-setup.md)
4+
5+
---
6+
7+
Now that we've engineered the repo context, let's get creative.
8+
9+
---
10+
11+
### Task 1: Make It Yours
12+
13+
Plan mode to start off any bigger work items — iterate on the plan (2+ times!) with tweaks and clarifications.
14+
15+
**Steps:**
16+
17+
1. Switch to Plan mode
18+
2. *Lets do a full redesign. Make it …*
19+
3. Review plan and start Implement
20+
21+
**Theme Ideas:**
22+
23+
- Minimalist Mono
24+
- Grotesque Type Grid
25+
- Retro Terminal Green
26+
- Vaporwave Sunset
27+
- Cyberpunk Neon
28+
- Brutalist Blocks
29+
- Soft Pastel Clouds
30+
- Skeuomorphic Stickers
31+
- Dark Mode Noir
32+
- Playful Candy Pop
33+
- Pixel Arcade Style
34+
- Scandinavian Calm
35+
- Corporate Clean Blue
36+
- Gradient Glass UI
37+
- Notebook Doodle Sketch
38+
- Space Galaxy Glow
39+
- Paper Card Cutouts
40+
- Geometric Memphis
41+
- Cozy Coffee Shop
42+
- Metallic Chrome UI
43+
- Bold Constructivist
44+
- Eco Leafy Green
45+
- Anime Bubble Aesthetic
46+
- Monochrome Newspaper
47+
- Chalkboard Classroom
48+
- Yacht Club Nautical
49+
- Desert Sand Minimal
50+
- Bold Serif Vintage
51+
- Toybox Primary Colors
52+
53+
✅ **Result:** Frontend and Tailwind instructions are used to build a beautiful design.
54+
55+
---
56+
57+
### Task 2: Keep Instructions Updated
58+
59+
Keep instructions updated with major architecture/design/dependency changes.
60+
61+
**Steps:**
62+
63+
1. Follow-up: `Add design guide section to copilot-instructions.md`
64+
2. Confirm, commit and push
65+
66+
Bonus: Check that GitHub Pages is updating.
67+
68+
---
69+
70+
### Task 3: A Lot More Redesign
71+
72+
Scale exploration and learning with async cloud agents.
73+
74+
**Steps:**
75+
76+
1. New Chat with Plan mode
77+
2. `Redesign the start screen as more engaging landing page`
78+
3. *Result*: Lots of variations suggested in considerations
79+
4. Run the prompt: `/cloud-explore design variations`
80+
- See `.github/prompts/cloud-explore.prompt.md`
81+
5. Check Agent sessions for 3 new cloud agents appearing to track progress. Click to follow along or open agent in web.
82+
6. LATER: Review the 3 designs, based on screenshots in PRs.
83+
84+
✅ **Result:** 3 cloud agent sessions which will take a few minutes to complete. Meanwhile …
85+
86+
---
87+
88+
## ✅ Part 2 Complete!
89+
90+
You've learned how to:
91+
- Use Plan Mode for complex design tasks
92+
- Iterate on plans before implementing
93+
- Keep instructions updated with changes
94+
- Scale exploration with parallel cloud agents

‎.lab/03-quiz-master.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# Part 3: Custom Quiz Master
2+
3+
[← Part 2](02-design.md)
4+
5+
---
6+
7+
Define your own specialized workflows with custom agents, beyond generic coding prompts. Works both locally and in cloud coding agent.
8+
9+
---
10+
11+
### Task: Your Own Quiz Master
12+
13+
**Steps:**
14+
15+
1. New Chat, pick *Quiz Master* as custom agent
16+
2. `Update questions to …` or just `Update quiz`
17+
3. Check out the prompt in `.github/agents/quiz-master.agent.md`
18+
4. Optional: Follow-up to nudge for more creativity, chaos, engagement
19+
5. `+` → `New cloud agent`: pick Quiz Master
20+
6. Pick another theme and send
21+
22+
**Theme Ideas:**
23+
24+
- Skill Bingo: Workplace or technical skills
25+
- Personality Bingo: Preferences, quirks, fun traits
26+
- Secret Challenge Bingo: Quick micro-tasks with people you meet
27+
- Team Bingo: Department or team categories
28+
- Classic Facts Bingo: Birthday month, pets, etc.
29+
- Work Culture Bingo: Productivity habits, meeting styles, tools
30+
- Tech Life Bingo: Coding languages, shortcuts, frameworks, dev memes
31+
- Travel Bingo: Cities lived in, countries visited, cultural traditions
32+
- Creative Bingo: Music, art, design tastes, creative skills
33+
- Micro-Challenge Bingo: Quick actions (teach a word, show a meme)
34+
- Deep Chat Bingo: Reflective or meaningful conversation starters
35+
- Office Humor Bingo: Desk quirks, caffeine habits, meeting hot takes
36+
- Opposites Bingo: Find someone who is your opposite on specific axes
37+
- Fandom Bingo: Sci-fi, gaming, books, shows, niche interests
38+
- Lifestyle Bingo: Sleep, fitness, food, routines
39+
- Mystery Bingo: Guess who matches a trait and verify
40+
- Chaos Bingo: Surprising, absurd, unpredictable prompts
41+
42+
✅ **Result:** Custom agent runs through the updated quiz, generating new creative and engaging questions.
43+
44+
---
45+
46+
## ✅ Part 3 Complete!
47+
48+
You've learned how to:
49+
- Use custom agents for specialized workflows
50+
- Generate themed quiz questions
51+
- Run custom agents in the cloud
52+
- Iterate on agent output for better results

0 commit comments

Comments
 (0)