Initial commit

workshop/.ignored-by-agents

@@ -0,0 +1 @@
+Agents MUST ignore use this folder for code suggestions.

workshop/00-overview.md

@@ -0,0 +1,59 @@
+# 🎮 VS Code GitHub Copilot Agent Lab
+[← README](../README.md)
+
+- [ ] Latest VS Code **v1.113** (no update pending)
+
+> **Level:** Intermediate
+> **Stack:** TypeScript / Vite / Tailwind CSS
+
+Welcome to **Bingo Mixer** — a hands-on workshop where you'll transform a social bingo app using VS Code's Agent Mode with GitHub Copilot.
+
+---
+
+## 📋 Quick Checklist
+
+- [ ] Latest VS Code **v1.113** (no update pending)
+  - [ ] Make sure updates are not disabled
+- [ ] Signed in with GitHub (Copilot Free can not run cloud agent!)
+- [ ] Git & Node installed
+- [ ] Chat open and Agent ready for action
+
+*Optional*: Use DevContainer or WSL.
+
+---
+
+## 🎯 What You'll Learn
+
+| # | Skill | Description |
+|---|-------|-------------|
+| 1 | **Context Engineering** | Onboard AI to your codebase and workflows |
+| 2 | **Agentic Primitives** | Build an AI-first engineering flow |
+| 3 | **Agentic Abundance** | Scale exploration and speed up learning |
+| 4 | **Design-First Development** | Let AI iterate on UI while you guide the vision |
+
+---
+
+## 📚 Lab Parts
+
+| Part | Title | Description |
+|------|-------|-------------|
+| [**01**](01-setup.md) | Setup & Context Engineering | Clone, configure, and teach the AI about your project |
+| [**02**](02-design.md) | Design-First Frontend | Redesign the UI with creative themes |
+| [**03**](03-quiz-master.md) | Custom Quiz Master | Create your own quiz themes with custom agents |
+| [**04**](04-multi-agent.md) | Multi-Agent Development | Build new features with TDD and design agents |
+
+---
+
+## 💡 Tips
+
+1. Keep the live-updated browser open
+2. Commit working code often
+3. Revert unexpected changes using chat *Checkpoints* and *Undo*, then try again
+
+---
+
+## 🔗 Resources
+
+- [VS Code on YouTube](https://www.youtube.com/code)
+- [VS Code Copilot Docs](https://code.visualstudio.com/docs/copilot/overview)
+- [Awesome Copilot](https://github.com/github/awesome-copilot) for more customizations

workshop/01-setup.md

@@ -0,0 +1,120 @@
+# Part 1: Setup & Context Engineering
+
+[← Overview](00-overview.md)
+
+---
+
+In this section, you'll set up your development environment and teach GitHub Copilot about your codebase.
+
+> 🎮 **[Play the Bingo Mixer game](../game/)** — See what you'll be building!
+
+---
+
+## 🔧 Initial Setup
+
+### Step 1: Create Your Repository (Required)
+
+1. Open [github.com/copilot-dev-days/agent-lab-typescript](https://github.com/copilot-dev-days/agent-lab-typescript)
+2. Click **Use this template** → **Create a new repository**
+   - Name: `my-bingo-mixer`
+   - Visibility: **Public**
+3. ✅ Your own Bingo Mixer repo is ready!
+
+### Step 2: Enable GitHub Pages
+
+1. Go to your repo's **Settings** → **Pages**
+2. Under "Build and deployment", change *Deploy from a branch* to **GitHub Actions**
+3. ✅ Any commit will now publish to: `https://{username}.github.io/{repo-name}`
+
+### Step 3: Choose How You'll Develop
+
+#### Option A: Clone locally in VS Code
+
+1. Open VS Code
+2. Run command: `Git: Clone` → `Clone from GitHub`
+3. Select your new repository
+4. Install recommended extensions (notification or `Extensions: Show Recommended Extensions`)
+
+#### Option B: Create a Codespace for your repo
+
+1. Open your repository on GitHub
+2. Click **Code** → **Codespaces** → **Create codespace on main**
+3. ✅ Codespace starts with your repo and devcontainer.
+
+### Step 4: Run the Setup Agent
+
+In the Chat panel:
+
+```
+/setup
+```
+
+The agent will figure out any required installation steps.
+
+On the first terminal tool, enable *Auto*-*Approve*.
+
+Let the agent figure out any required installation steps.
+
+✅ **Success:** App is running and open in browser!
+
+Keep this `workshop/` guide open (📌 Pin).
+
+---
+
+## 📚 Understanding Context Engineering
+
+Context engineering is how you teach AI about your specific codebase. This makes Copilot's suggestions more accurate and relevant.
+
+### Task 1: Auto-generated Instructions
+
+Instructions guide all agentic codebase interactions, making them more efficient and reliable. Add them early, but make sure to keep them maintained and succinct.
+
+**Steps:**
+
+1. Run prompt: `/init` with Autopilot enabled
+   - While agent analyzes the codebase, optionally start next task
+2. Open a new chat for the next task, as init can take a while and we can review later.
+3. Review results — is it not too long and overly detailed
+   1. Optional follow-up: *"Compress down and add a mandatory development [ ] checklist (lint, build, test) to the top"*
+4. Apply and commit
+
+✅ **Result:** All future requests will have a basic map of the workspace.
+
+---
+
+### Task 2: Dogfooding & Custom Skills
+
+**Steps:**
+
+1. Prompt: *"Test the app like a critical dogfooder, giving critical feedback on how fun it is"*
+2. Watch how the agent launches the built-in browser, interacts with the app, and writes a report
+3. `/create-skill` *for dogfooding* — or: *"Save this as a dogfooding skill"*
+
+✅ **Result:** The agent used the browser to actually play the app and produced a critical report. You then saved that testing approach as a reusable dogfooding skill.
+
+> 💡 **Context engineering insight:** The agent needs hands-on context — running the app, seeing the UI, clicking through flows — to truly understand how it works and validate functionality. Code alone isn't enough; interacting with the running product closes the gap between reading code and understanding the user experience.
+
+---
+
+### Task 3: Customization Modal
+
+Tour the repo customizations to understand how context engineering works in practice.
+
+**Steps:**
+
+1. Open the Customization panel, Command: `Chat: Open Customizations (Preview)`
+2. Browse the repo customizations — instructions, skills, and agents
+3. Look at the **frontend design skill** and **Tailwind 4 instructions**
+
+> 💡 **Think about:** What conventions or patterns from your own projects could become instructions or skills?
+
+---
+
+## ✅ Part 1 Complete!
+
+You've learned how to:
+- Set up your development environment
+- Generate and refine workspace instructions
+- Dogfood your app with the agent's built-in browser
+- Create and save custom skills
+- Tour repo customizations (instructions, skills, agents)

workshop/02-design.md

@@ -0,0 +1,90 @@
+# Part 2: Design-First Frontend
+
+[← Part 1](01-setup.md)
+
+---
+
+Now that we've engineered the repo context, let's get creative.
+
+---
+
+### Task 1: Make It Yours
+
+Plan mode to start off any bigger work items — iterate on the plan (2+ times!) with tweaks and clarifications.
+
+**Steps:**
+
+1. Switch to Plan mode
+2. *Lets do a full redesign. Make it …*
+3. Review plan and start Implement
+
+**Theme Ideas:**
+
+- Minimalist Mono
+- Grotesque Type Grid
+- Retro Terminal Green
+- Vaporwave Sunset
+- Cyberpunk Neon
+- Brutalist Blocks
+- Soft Pastel Clouds
+- Skeuomorphic Stickers
+- Dark Mode Noir
+- Playful Candy Pop
+- Pixel Arcade Style
+- Scandinavian Calm
+- Corporate Clean Blue
+- Gradient Glass UI
+- Notebook Doodle Sketch
+- Space Galaxy Glow
+- Paper Card Cutouts
+- Geometric Memphis
+- Cozy Coffee Shop
+- Metallic Chrome UI
+- Bold Constructivist
+- Eco Leafy Green
+- Anime Bubble Aesthetic
+- Monochrome Newspaper
+- Chalkboard Classroom
+- Yacht Club Nautical
+- Desert Sand Minimal
+- Bold Serif Vintage
+- Toybox Primary Colors
+
+✅ **Result:** Frontend and Tailwind instructions are used to build a beautiful design.
+
+---
+
+### Task 2: Keep Instructions Updated
+
+Keep instructions updated with major architecture/design/dependency changes.
+
+**Steps:**
+
+1. Follow-up: `/create-instructions design guide`
+2. Confirm, commit and push
+
+Bonus: Check that GitHub Pages is updating.
+
+---
+
+### Task 3: Dogfood the Redesign
+
+Re-run the dogfooding skill from Part 1 to validate your new design.
+
+**Steps:**
+
+1. Prompt: *"Dogfood the app — focus on the new design"*
+2. Compare feedback to the earlier dogfooding report
+3. Optional: Address any issues the agent flags
+
+✅ **Result:** The agent plays through the redesigned app and gives fresh critical feedback.
+
+---
+
+## ✅ Part 2 Complete!
+
+You've learned how to:
+- Use Plan Mode for complex design tasks
+- Iterate on plans before implementing
+- Keep instructions updated with changes
+- Re-run dogfooding to validate design changes

workshop/03-quiz-master.md

@@ -0,0 +1,49 @@
+# Part 3: Custom Quiz Master
+
+[← Part 2](02-design.md)
+
+---
+
+Define your own specialized workflows with custom agents, beyond generic coding prompts.
+
+---
+
+### Task: Your Own Quiz Master
+
+**Steps:**
+
+1. New Chat, pick *Quiz Master* as custom agent
+2. `Update questions to …` or just `Update quiz`
+3. Check out the prompt in `.github/agents/quiz-master.agent.md`
+4. Optional: Follow-up to nudge for more creativity, chaos, engagement
+
+**Theme Ideas:**
+
+- Skill Bingo: Workplace or technical skills
+- Personality Bingo: Preferences, quirks, fun traits
+- Secret Challenge Bingo: Quick micro-tasks with people you meet
+- Team Bingo: Department or team categories
+- Classic Facts Bingo: Birthday month, pets, etc.
+- Work Culture Bingo: Productivity habits, meeting styles, tools
+- Tech Life Bingo: Coding languages, shortcuts, frameworks, dev memes
+- Travel Bingo: Cities lived in, countries visited, cultural traditions
+- Creative Bingo: Music, art, design tastes, creative skills
+- Micro-Challenge Bingo: Quick actions (teach a word, show a meme)
+- Deep Chat Bingo: Reflective or meaningful conversation starters
+- Office Humor Bingo: Desk quirks, caffeine habits, meeting hot takes
+- Opposites Bingo: Find someone who is your opposite on specific axes
+- Fandom Bingo: Sci-fi, gaming, books, shows, niche interests
+- Lifestyle Bingo: Sleep, fitness, food, routines
+- Mystery Bingo: Guess who matches a trait and verify
+- Chaos Bingo: Surprising, absurd, unpredictable prompts
+
+✅ **Result:** Custom agent runs through the updated quiz, generating new creative and engaging questions.
+
+---
+
+## ✅ Part 3 Complete!
+
+You've learned how to:
+- Use custom agents for specialized workflows
+- Generate themed quiz questions
+- Iterate on agent output for better results

workshop/04-multi-agent.md

@@ -0,0 +1,116 @@
+# Part 4: Multi-Agent Development
+
+[← Part 3](03-quiz-master.md)
+
+---
+
+## Task 1: Agent Hooks — Test Gate
+
+[Agent hooks](https://code.visualstudio.com/docs/copilot/customization/hooks) execute shell commands at key lifecycle points during agent sessions. We'll add a workspace-scoped **Stop hook** that gates *every* agent — no agent can finish until all tests pass.
+
+**Steps:**
+
+1. Open the `.github/hooks/` folder
+2. Prompt: *Add an agent hook that runs the tests and blocks the agent from finishing if any test fails*
+3. The hook should be a JSON file in `.github/hooks/` (e.g. `stop-test-gate.json`), not inside any single agent file.
+
+✅ **Result:** Every agent now has a safety net — it will keep working until all tests pass before handing back control.
+
+---
+
+## Task 2: New Bingo Pattern (TDD-Driven)
+
+Use the TDD agent to add a "Four Corners" bingo pattern. The workspace stop hook you set up will enforce test discipline — every agent must leave tests passing before it hands back control.
+
+**Steps:**
+
+1. New chat with agent: `TDD`
+2. *Add a "Four Corners" bingo win pattern — all four corner squares (top-left, top-right, bottom-left, bottom-right) must be marked*
+3. Watch TDD orchestrate:
+   - **TDD Red** writes failing tests for Four Corners detection
+   - Review the new tests in VS Code's test runner
+   - **TDD Green** implements the minimal code to pass — stop hook fires, keeps it going if tests fail
+   - **TDD Refactor** cleans up the implementation
+   - Click on any sub-agent while it runs to see its context and instructions
+4. Review the summary of changes
+
+✅ **Result:** Orchestrated TDD cycle with automatic test gating — no manual handoffs between agents.
+
+---
+
+## Task 3: Verify with Agent Debug Logs
+
+Inspect what happened under the hood — did the hook fire? How did agents communicate?
+
+**Steps:**
+
+1. Verify the hook loads: open the **GitHub Copilot Chat Hooks** output channel (Output panel → channel dropdown)
+2. Open Agent Debug Logs: gear icon (⚙️) in Chat view → **Show Agent Debug Logs**
+3. **Logs view:** filter for hook execution events during the TDD cycle
+4. **Agent Flow Chart:** visualize the TDD → Red → Green → Refactor orchestration
+5. **Summary view:** review total tool calls and token usage
+
+**Bonus:** Click the ✨ sparkle icon to attach debug events to a new chat, then ask: `/troubleshoot did the Stop hook fire during the TDD cycle?`
+
+✅ **Result:** Full observability into multi-agent orchestration and hook execution.
+
+---
+
+## Task 4: Card Deck Shuffle (Design-Driven)
+
+Break down agent workflows into specific focus areas, like design-first.
+
+**Steps:**
+
+1. New chat with agent: `Pixel Jam`
+2. *New mode: Card Deck Shuffle. Every player opens the game → taps → gets a random card with a question.*
+3. Agent iterates on the UI
+4. Follow up to make it work like you want:
+   - *Add left/right (fail, success)*
+   - *Draw a card right when I open it*
+5. Commit
+
+---
+
+## Task 5: UX Review Agent
+
+Combine MCP, custom workflows, and subagent isolation in an agent for powerful workflows. Focus on different aspects, like usability, a11y, compliance.
+
+**Steps:**
+
+1. New chat with agent: `Pixel Jam`: *Run review*
+2. Keep the app open in VS Code browser preview while the review runs
+3. Follow along as it reviews
+   - Aside: Open `.github/agents/pixel-jam.agent.md` to review the prompt
+4. Behold a mighty in-depth review
+
+**Bonus:**
+- File findings as issues on GitHub for later
+- Assign critical issues to coding agent to fix
+
+---
+
+## Bonus: Keep Going
+
+- Fix UX review problems, delegated to background or cloud agent
+- Add ability to have multiple question themes to pick from
+- Add social sharing to win state
+- Make a real iOS or full-stack app?
+
+---
+
+## ✅ Part 4 Complete!
+
+You've learned how to:
+- Add workspace-scoped agent hooks to enforce quality gates (Stop hook on all agents)
+- Use TDD to orchestrate Red → Green → Refactor automatically
+- Inspect agent behavior with Agent Debug Logs and Flow Charts
+- Use design-first agents for UI-driven development
+- Run UX review agents for comprehensive testing
+- Combine multiple agent types for complex workflows
+
+### Keep Going
+
+- 📺 [VS Code on YouTube](https://www.youtube.com/code)
+- 📖 [VS Code Copilot Docs](https://code.visualstudio.com/docs/copilot/overview)
+- 🌟 [Awesome Copilot](https://github.com/github/awesome-copilot)

workshop/05-complete.md

@@ -0,0 +1,56 @@
+# 🎉 Workshop Complete!
+
+[← Part 4](04-multi-agent.md)
+
+---
+
+## Congratulations! 🎊
+
+You've completed the **VS Code GitHub Copilot Agent Lab**!
+
+---
+
+## 🏆 What You Built
+
+- ✅ A fully redesigned Social Bingo app
+- ✅ Custom quiz themes with Quiz Master agent
+- ✅ Agent hooks for automated test gating
+- ✅ Four Corners bingo pattern (TDD-built)
+- ✅ Card Deck Shuffle mode (design-driven)
+- ✅ Comprehensive UX review
+
+---
+
+## 🧠 What You Learned
+
+| Skill | Description |
+|-------|-------------|
+| **Context Engineering** | Onboarding AI to your codebase with instructions |
+| **Agentic Primitives** | Background agents, cloud agents, and custom workflows |
+| **Design-First Development** | UI iteration with AI assistance |
+| **Test-Driven Development** | Reliable code with TDD agents |
+
+---
+
+## 🚀 Keep Going!
+
+### Resources
+
+- 📺 [VS Code on YouTube](https://www.youtube.com/code)
+- 📖 [VS Code Copilot Docs](https://code.visualstudio.com/docs/copilot/overview)
+- 🌟 [Awesome Copilot](https://github.com/github/awesome-copilot)
+
+### Next Steps
+
+1. **Share your creation** — Show off your themed bingo app!
+2. **Try more themes** — Use Pixel Jam for more design variations
+3. **Add features** — Leaderboards, sound effects, multiplayer?
+4. **Teach others** — Run this workshop for your team
+
+---
+
+## 💜 Thank You!
+
+Thanks for joining us on this journey into AI-assisted development.
+
+We can't wait to see what you build next!

workshop/GUIDE.md

@@ -0,0 +1,82 @@
+# Bingo Mixer — VS Code GitHub Copilot Agent Lab
+[← README](../README.md)
+
+---
+- [ ] VS Code **v1.113+**
+> **Quick Reference Guide** — For detailed instructions, see the individual parts below.
+
+---
+
+## 📚 Lab Parts
+
+| Part | Title |
+|------|-------|
+| [**00**](00-overview.md) | Overview & Checklist |
+| [**01**](01-setup.md) | Setup & Context Engineering |
+| [**02**](02-design.md) | Design-First Frontend |
+| [**03**](03-quiz-master.md) | Custom Quiz Master |
+| [**04**](04-multi-agent.md) | Multi-Agent Development |
+
+---
+
+## ⚡ Quick Checklist
+
+- [ ] VS Code **v1.113+**
+- [ ] GitHub Copilot (Pro/Business/Enterprise)
+- [ ] Git & Node 22+
+- [ ] Chat panel open
+
+---
+
+## 🚀 Quick Setup
+
+```
+# 1. Create repo from template: github.com/copilot-dev-days/agent-lab-typescript
+# 2. Enable Pages: Settings > Pages > GitHub Actions
+# 3. Choose one: clone repo in VS Code OR create a Codespace from your repo
+# Then run:
+# /setup
+```
+
+---
+
+## 📋 Task Summary
+
+### Part 1: Context Engineering
+- [ ] Run /setup agent
+- [ ] Generate workspace instructions
+- [ ] Dogfood the app with built-in browser
+- [ ] Create a custom dogfooding skill
+- [ ] Tour repo customizations
+
+### Part 2: Design-First Frontend
+- [ ] Full UI redesign (Plan Mode)
+- [ ] Update copilot-instructions.md
+- [ ] Dogfood the redesign
+
+### Part 3: Quiz Master
+- [ ] Generate custom quiz theme
+
+### Part 4: Multi-Agent Development
+- [ ] Agent hooks — test gate
+- [ ] Four Corners bingo pattern (TDD)
+- [ ] Agent Debug Logs
+- [ ] Card Deck Shuffle mode (Pixel Jam)
+- [ ] UX Review
+
+---
+
+## 💡 Tips
+
+1. Keep browser open for live updates
+2. Commit working code often
+3. Use checkpoints to revert mistakes
+4. Iterate on plans 2+ times before implementing
+
+---
+
+## 🔗 Resources
+
+- [VS Code YouTube](https://www.youtube.com/code)
+- [Copilot Docs](https://code.visualstudio.com/docs/copilot/overview)
+- [Awesome Copilot](https://github.com/github/awesome-copilot)

workshop/es/00-overview.md

@@ -0,0 +1,60 @@
+<!-- l10n-sync: source-file="workshop/00-overview.md" -->
+# 🎮 VS Code GitHub Copilot Agent Lab
+[← README](../../README.es.md)
+
+- [ ] VS Code más reciente **v1.113** (sin actualización pendiente)
+
+> **Nivel:** Intermedio
+> **Stack:** TypeScript / Vite / Tailwind CSS
+
+Bienvenido a **Bingo Mixer** — un workshop práctico donde transformarás una app de bingo social usando el Agent Mode de VS Code con GitHub Copilot.
+
+---
+
+## 📋 Lista Rápida
+
+- [ ] VS Code más reciente **v1.113** (sin actualización pendiente)
+  - [ ] Asegúrate de que las actualizaciones no estén deshabilitadas
+- [ ] Sesión iniciada con GitHub (¡Copilot Free no puede ejecutar cloud agent!)
+- [ ] Git & Node instalados
+- [ ] Chat abierto y Agent listo para la acción
+
+*Opcional*: Usa DevContainer o WSL.
+
+---
+
+## 🎯 Lo que Aprenderás
+
+| # | Habilidad | Descripción |
+|---|-----------|-------------|
+| 1 | **Ingeniería de Contexto** | Integra la IA a tu codebase y flujos de trabajo |
+| 2 | **Primitivas Agénticas** | Construye un flujo de ingeniería AI-first |
+| 3 | **Abundancia Agéntica** | Escala la exploración y acelera el aprendizaje |
+| 4 | **Desarrollo Design-First** | Deja que la IA itere en la UI mientras tú guías la visión |
+
+---
+
+## 📚 Partes del Lab
+
+| Parte | Título | Descripción |
+|-------|--------|-------------|
+| [**01**](01-setup.md) | Configuración & Ingeniería de Contexto | Clona, configura y enséñale a la IA sobre tu proyecto |
+| [**02**](02-design.md) | Frontend Design-First | Rediseña la UI con temas creativos |
+| [**03**](03-quiz-master.md) | Quiz Master Personalizado | Crea tus propios temas de quiz con agentes personalizados |
+| [**04**](04-multi-agent.md) | Desarrollo Multi-Agente | Construye nuevas funcionalidades con TDD y agentes de diseño |
+
+---
+
+## 💡 Consejos
+
+1. Mantén el navegador con actualización en tiempo real abierto
+2. Haz commit del código funcional con frecuencia
+3. Revierte cambios inesperados usando *Checkpoints* y *Undo* del chat, luego intenta de nuevo
+
+---
+
+## 🔗 Recursos
+
+- [VS Code on YouTube](https://www.youtube.com/code)
+- [VS Code Copilot Docs](https://code.visualstudio.com/docs/copilot/overview)
+- [Awesome Copilot](https://github.com/github/awesome-copilot) para más personalizaciones

workshop/es/01-setup.md

@@ -0,0 +1,121 @@
+<!-- l10n-sync: source-file="workshop/01-setup.md" -->
+# Parte 1: Configuración & Ingeniería de Contexto
+
+[← Descripción General](00-overview.md)
+
+---
+
+En esta sección, configurarás tu entorno de desarrollo y le enseñarás a GitHub Copilot sobre tu codebase.
+
+> 🎮 **[Juega Bingo Mixer](../game/)** — ¡Mira lo que vas a construir!
+
+---
+
+## 🔧 Configuración Inicial
+
+### Paso 1: Crea Tu Repositorio (Obligatorio)
+
+1. Abre [github.com/copilot-dev-days/agent-lab-typescript](https://github.com/copilot-dev-days/agent-lab-typescript)
+2. Haz clic en **Use this template** → **Create a new repository**
+   - Nombre: `my-bingo-mixer`
+   - Visibilidad: **Public**
+3. ✅ ¡Tu propio repo de Bingo Mixer está listo!
+
+### Paso 2: Habilita GitHub Pages
+
+1. Ve a **Settings** → **Pages** de tu repo
+2. En "Build and deployment", cambia *Deploy from a branch* a **GitHub Actions**
+3. ✅ Cualquier commit ahora publicará en: `https://{username}.github.io/{repo-name}`
+
+### Paso 3: Elige Cómo Vas a Desarrollar
+
+#### Opción A: Clona localmente en VS Code
+
+1. Abre VS Code
+2. Ejecuta el comando: `Git: Clone` → `Clone from GitHub`
+3. Selecciona tu nuevo repositorio
+4. Instala las extensiones recomendadas (notificación o `Extensions: Show Recommended Extensions`)
+
+#### Opción B: Crea un Codespace para tu repo
+
+1. Abre tu repositorio en GitHub
+2. Haz clic en **Code** → **Codespaces** → **Create codespace on main**
+3. ✅ El Codespace inicia con tu repo y devcontainer.
+
+### Paso 4: Ejecuta el Agente de Setup
+
+En el panel de Chat:
+
+```
+/setup
+```
+
+El agente identificará los pasos de instalación necesarios.
+
+En la primera herramienta de terminal, habilita *Auto*-*Approve*.
+
+Deja que el agente identifique los pasos de instalación necesarios.
+
+✅ **Éxito:** ¡La app está corriendo y abierta en el navegador!
+
+Mantén esta guía del `workshop/` abierta (📌 Fijar).
+
+---
+
+## 📚 Entendiendo la Ingeniería de Contexto
+
+La ingeniería de contexto es cómo le enseñas a la IA sobre tu codebase específico. Esto hace que las sugerencias de Copilot sean más precisas y relevantes.
+
+### Tarea 1: Instrucciones Auto-generadas
+
+Las instrucciones guían todas las interacciones agénticas con el codebase, haciéndolas más eficientes y confiables. Agrégalas temprano, pero asegúrate de mantenerlas actualizadas y concisas.
+
+**Pasos:**
+
+1. Ejecuta el prompt: `/init` con Autopilot habilitado
+   - Mientras el agente analiza el codebase, opcionalmente comienza la siguiente tarea
+2. Abre un nuevo chat para la siguiente tarea, ya que init puede tardar y podemos revisar después.
+3. Revisa los resultados — ¿no es demasiado largo y detallado?
+   1. Follow-up opcional: *"Comprime y agrega una checklist de desarrollo obligatoria [ ] (lint, build, test) en la parte superior"*
+4. Aplica y haz commit
+
+✅ **Resultado:** Todas las solicitudes futuras tendrán un mapa básico del workspace.
+
+---
+
+### Tarea 2: Dogfooding & Skills Personalizadas
+
+**Pasos:**
+
+1. Prompt: *"Prueba la app como un dogfooder crítico, dando feedback crítico sobre qué tan divertida es"*
+2. Observa cómo el agente abre el navegador integrado, interactúa con la app y escribe un reporte
+3. `/create-skill` *para dogfooding* — o: *"Guarda esto como una skill de dogfooding"*
+
+✅ **Resultado:** El agente usó el navegador para realmente jugar la app y produjo un reporte crítico. Luego guardaste ese enfoque de prueba como una skill reutilizable de dogfooding.
+
+> 💡 **Insight de ingeniería de contexto:** El agente necesita contexto práctico — ejecutar la app, ver la UI, hacer clic en los flujos — para realmente entender cómo funciona y validar la funcionalidad. Solo el código no es suficiente; interactuar con el producto en ejecución cierra la brecha entre leer código y entender la experiencia del usuario.
+
+---
+
+### Tarea 3: Modal de Personalización
+
+Explora las personalizaciones del repo para entender cómo funciona la ingeniería de contexto en la práctica.
+
+**Pasos:**
+
+1. Abre el panel de Personalización, Comando: `Chat: Open Customizations (Preview)`
+2. Navega por las personalizaciones del repo — instrucciones, skills y agentes
+3. Mira la **skill de diseño frontend** y las **instrucciones de Tailwind 4**
+
+> 💡 **Piensa en:** ¿Qué convenciones o patrones de tus propios proyectos podrían convertirse en instrucciones o skills?
+
+---
+
+## ✅ ¡Parte 1 Completa!
+
+Aprendiste cómo:
+- Configurar tu entorno de desarrollo
+- Generar y refinar instrucciones del workspace
+- Probar tu app con el navegador integrado del agente
+- Crear y guardar skills personalizadas
+- Explorar personalizaciones del repo (instrucciones, skills, agentes)

workshop/es/02-design.md

@@ -0,0 +1,91 @@
+<!-- l10n-sync: source-file="workshop/02-design.md" -->
+# Parte 2: Frontend Design-First
+
+[← Parte 1](01-setup.md)
+
+---
+
+Ahora que hemos trabajado la ingeniería de contexto del repo, vamos a ponernos creativos.
+
+---
+
+### Tarea 1: Hazlo Tuyo
+
+Plan mode para comenzar cualquier trabajo grande — itera en el plan (¡2+ veces!) con ajustes y aclaraciones.
+
+**Pasos:**
+
+1. Cambia a Plan mode
+2. *Hagamos un rediseño completo. Hazlo…*
+3. Revisa el plan y comienza a Implementar
+
+**Ideas de Temas:**
+
+- Minimalist Mono
+- Grotesque Type Grid
+- Retro Terminal Green
+- Vaporwave Sunset
+- Cyberpunk Neon
+- Brutalist Blocks
+- Soft Pastel Clouds
+- Skeuomorphic Stickers
+- Dark Mode Noir
+- Playful Candy Pop
+- Pixel Arcade Style
+- Scandinavian Calm
+- Corporate Clean Blue
+- Gradient Glass UI
+- Notebook Doodle Sketch
+- Space Galaxy Glow
+- Paper Card Cutouts
+- Geometric Memphis
+- Cozy Coffee Shop
+- Metallic Chrome UI
+- Bold Constructivist
+- Eco Leafy Green
+- Anime Bubble Aesthetic
+- Monochrome Newspaper
+- Chalkboard Classroom
+- Yacht Club Nautical
+- Desert Sand Minimal
+- Bold Serif Vintage
+- Toybox Primary Colors
+
+✅ **Resultado:** Las instrucciones de frontend y Tailwind se usan para crear un diseño hermoso.
+
+---
+
+### Tarea 2: Mantén las Instrucciones Actualizadas
+
+Mantén las instrucciones actualizadas con cambios importantes de arquitectura/diseño/dependencias.
+
+**Pasos:**
+
+1. Follow-up: `/create-instructions design guide`
+2. Confirma, haz commit y push
+
+Bonus: Verifica que GitHub Pages se esté actualizando.
+
+---
+
+### Tarea 3: Prueba el Rediseño
+
+Re-ejecuta la skill de dogfooding de la Parte 1 para validar tu nuevo diseño.
+
+**Pasos:**
+
+1. Prompt: *"Haz dogfooding de la app — enfócate en el nuevo diseño"*
+2. Compara el feedback con el reporte de dogfooding anterior
+3. Opcional: Resuelve cualquier problema que el agente señale
+
+✅ **Resultado:** El agente juega la app rediseñada y da feedback crítico actualizado.
+
+---
+
+## ✅ ¡Parte 2 Completa!
+
+Aprendiste cómo:
+- Usar Plan Mode para tareas complejas de diseño
+- Iterar en los planes antes de implementar
+- Mantener instrucciones actualizadas con cambios
+- Re-ejecutar dogfooding para validar cambios de diseño

workshop/es/03-quiz-master.md

@@ -0,0 +1,50 @@
+<!-- l10n-sync: source-file="workshop/03-quiz-master.md" -->
+# Parte 3: Quiz Master Personalizado
+
+[← Parte 2](02-design.md)
+
+---
+
+Define tus propios flujos de trabajo especializados con agentes personalizados, yendo más allá de prompts genéricos de código.
+
+---
+
+### Tarea: Tu Propio Quiz Master
+
+**Pasos:**
+
+1. Nuevo Chat, selecciona *Quiz Master* como agente personalizado
+2. `Actualiza las preguntas para…` o simplemente `Update quiz`
+3. Revisa el prompt en `.github/agents/quiz-master.agent.md`
+4. Opcional: Follow-up para pedir más creatividad, caos, engagement
+
+**Ideas de Temas:**
+
+- Skill Bingo: Habilidades profesionales o técnicas
+- Personality Bingo: Preferencias, manías, rasgos divertidos
+- Secret Challenge Bingo: Micro-desafíos rápidos con personas que conozcas
+- Team Bingo: Categorías por departamento o equipo
+- Classic Facts Bingo: Mes de cumpleaños, mascotas, etc.
+- Work Culture Bingo: Hábitos de productividad, estilos de reunión, herramientas
+- Tech Life Bingo: Lenguajes de programación, atajos, frameworks, memes de dev
+- Travel Bingo: Ciudades donde viviste, países visitados, tradiciones culturales
+- Creative Bingo: Gustos musicales, arte, diseño, habilidades creativas
+- Micro-Challenge Bingo: Acciones rápidas (enseñar una palabra, mostrar un meme)
+- Deep Chat Bingo: Conversaciones reflexivas o significativas para iniciar
+- Office Humor Bingo: Manías de escritorio, hábitos de cafeína, opiniones picantes sobre reuniones
+- Opposites Bingo: Encuentra a alguien que sea tu opuesto en ejes específicos
+- Fandom Bingo: Sci-fi, gaming, libros, series, intereses de nicho
+- Lifestyle Bingo: Sueño, ejercicio, comida, rutinas
+- Mystery Bingo: Adivina quién tiene un rasgo y verifica
+- Chaos Bingo: Prompts sorprendentes, absurdos e impredecibles
+
+✅ **Resultado:** El agente personalizado recorre el quiz actualizado, generando nuevas preguntas creativas y atractivas.
+
+---
+
+## ✅ ¡Parte 3 Completa!
+
+Aprendiste cómo:
+- Usar agentes personalizados para flujos de trabajo especializados
+- Generar preguntas de quiz temáticas
+- Iterar en la salida del agente para mejores resultados

workshop/es/04-multi-agent.md

@@ -0,0 +1,117 @@
+<!-- l10n-sync: source-file="workshop/04-multi-agent.md" -->
+# Parte 4: Desarrollo Multi-Agente
+
+[← Parte 3](03-quiz-master.md)
+
+---
+
+## Tarea 1: Agent Hooks — Puerta de Pruebas
+
+[Agent hooks](https://code.visualstudio.com/docs/copilot/customization/hooks) ejecutan comandos shell en puntos clave del ciclo de vida durante sesiones de agente. Vamos a agregar un **Stop hook** con alcance de workspace que bloquea *todos* los agentes — ningún agente puede finalizar hasta que todas las pruebas pasen.
+
+**Pasos:**
+
+1. Abre la carpeta `.github/hooks/`
+2. Prompt: *Agrega un agent hook que ejecute las pruebas y bloquee al agente de finalizar si alguna prueba falla*
+3. El hook debe ser un archivo JSON en `.github/hooks/` (ej: `stop-test-gate.json`), no dentro de ningún archivo de agente individual.
+
+✅ **Resultado:** Cada agente ahora tiene una red de seguridad — seguirá trabajando hasta que todas las pruebas pasen antes de devolver el control.
+
+---
+
+## Tarea 2: Nuevo Patrón de Bingo (Orientado por TDD)
+
+Usa el agente TDD para agregar un patrón de bingo "Four Corners". El stop hook del workspace que configuraste garantizará la disciplina de pruebas — cada agente debe dejar las pruebas pasando antes de devolver el control.
+
+**Pasos:**
+
+1. Nuevo chat con agente: `TDD`
+2. *Agrega un patrón de victoria "Four Corners" en bingo — los cuatro cuadrados de las esquinas (superior-izquierda, superior-derecha, inferior-izquierda, inferior-derecha) deben estar marcados*
+3. Observa cómo TDD orquesta:
+   - **TDD Red** escribe pruebas que fallan para la detección de Four Corners
+   - Revisa las nuevas pruebas en el test runner de VS Code
+   - **TDD Green** implementa el código mínimo para pasar — el stop hook se activa, continúa si las pruebas fallan
+   - **TDD Refactor** limpia la implementación
+   - Haz clic en cualquier sub-agente mientras se ejecuta para ver su contexto e instrucciones
+4. Revisa el resumen de cambios
+
+✅ **Resultado:** Ciclo TDD orquestado con puerta de pruebas automática — sin handoffs manuales entre agentes.
+
+---
+
+## Tarea 3: Verifica con Agent Debug Logs
+
+Inspecciona lo que pasó bajo el capó — ¿se activó el hook? ¿Cómo se comunicaron los agentes?
+
+**Pasos:**
+
+1. Verifica que el hook cargue: abre el canal de salida **GitHub Copilot Chat Hooks** (panel Output → dropdown de canal)
+2. Abre Agent Debug Logs: ícono de engranaje (⚙️) en la vista de Chat → **Show Agent Debug Logs**
+3. **Pestaña Logs:** filtra por eventos de ejecución del hook durante el ciclo TDD
+4. **Agent Flow Chart:** visualiza la orquestación TDD → Red → Green → Refactor
+5. **Pestaña Summary:** revisa el total de llamadas de herramienta y uso de tokens
+
+**Bonus:** Haz clic en el ícono ✨ sparkle para adjuntar eventos de debug a un nuevo chat, luego pregunta: `/troubleshoot ¿se activó el Stop hook durante el ciclo TDD?`
+
+✅ **Resultado:** Observabilidad completa de la orquestación multi-agente y ejecución de hooks.
+
+---
+
+## Tarea 4: Card Deck Shuffle (Orientado por Diseño)
+
+Divide los flujos de trabajo de agentes en áreas de enfoque específicas, como design-first.
+
+**Pasos:**
+
+1. Nuevo chat con agente: `Pixel Jam`
+2. *Nuevo modo: Card Deck Shuffle. Cada jugador abre el juego → toca → recibe una carta aleatoria con una pregunta.*
+3. El agente itera en la UI
+4. Da follow-up para que funcione como quieres:
+   - *Agrega izquierda/derecha (fallo, éxito)*
+   - *Saca una carta justo cuando lo abra*
+5. Commit
+
+---
+
+## Tarea 5: Agente de Revisión de UX
+
+Combina MCP, flujos de trabajo personalizados y aislamiento de sub-agentes en un agente para flujos de trabajo poderosos. Enfócate en diferentes aspectos, como usabilidad, a11y, cumplimiento.
+
+**Pasos:**
+
+1. Nuevo chat con agente: `Pixel Jam`: *Ejecuta la revisión*
+2. Mantén la app abierta en la vista previa del navegador de VS Code mientras la revisión se ejecuta
+3. Sigue el proceso mientras revisa
+   - Aparte: Abre `.github/agents/pixel-jam.agent.md` para revisar el prompt
+4. Contempla una revisión profunda y detallada
+
+**Bonus:**
+- Registra hallazgos como issues en GitHub para después
+- Asigna issues críticas al agente de código para corregir
+
+---
+
+## Bonus: Sigue Explorando
+
+- Corrige problemas de la revisión de UX, delegados a agente en background o cloud
+- Agrega la posibilidad de tener múltiples temas de preguntas para elegir
+- Agrega compartir en redes sociales en el estado de victoria
+- ¿Haz una app real para iOS o full-stack?
+
+---
+
+## ✅ ¡Parte 4 Completa!
+
+Aprendiste cómo:
+- Agregar agent hooks con alcance de workspace para imponer puertas de calidad (Stop hook en todos los agentes)
+- Usar TDD para orquestar Red → Green → Refactor automáticamente
+- Inspeccionar comportamiento del agente con Agent Debug Logs y Flow Charts
+- Usar agentes design-first para desarrollo orientado por UI
+- Ejecutar agentes de revisión de UX para pruebas integrales
+- Combinar múltiples tipos de agentes para flujos de trabajo complejos
+
+### Sigue Explorando
+
+- 📺 [VS Code on YouTube](https://www.youtube.com/code)
+- 📖 [VS Code Copilot Docs](https://code.visualstudio.com/docs/copilot/overview)
+- 🌟 [Awesome Copilot](https://github.com/github/awesome-copilot)

workshop/es/05-complete.md

@@ -0,0 +1,57 @@
+<!-- l10n-sync: source-file="workshop/05-complete.md" -->
+# 🎉 ¡Workshop Completo!
+
+[← Parte 4](04-multi-agent.md)
+
+---
+
+## ¡Felicidades! 🎊
+
+¡Completaste el **VS Code GitHub Copilot Agent Lab**!
+
+---
+
+## 🏆 Lo que Construiste
+
+- ✅ Una app de Social Bingo completamente rediseñada
+- ✅ Temas de quiz personalizados con el agente Quiz Master
+- ✅ Agent hooks para puerta de pruebas automatizada
+- ✅ Patrón de bingo Four Corners (construido con TDD)
+- ✅ Modo Card Deck Shuffle (orientado por diseño)
+- ✅ Revisión integral de UX
+
+---
+
+## 🧠 Lo que Aprendiste
+
+| Habilidad | Descripción |
+|-----------|-------------|
+| **Ingeniería de Contexto** | Integración de la IA a tu codebase con instrucciones |
+| **Primitivas Agénticas** | Background agents, cloud agents y flujos de trabajo personalizados |
+| **Desarrollo Design-First** | Iteración de UI con asistencia de IA |
+| **Desarrollo Orientado por Pruebas** | Código confiable con agentes TDD |
+
+---
+
+## 🚀 ¡Sigue Explorando!
+
+### Recursos
+
+- 📺 [VS Code on YouTube](https://www.youtube.com/code)
+- 📖 [VS Code Copilot Docs](https://code.visualstudio.com/docs/copilot/overview)
+- 🌟 [Awesome Copilot](https://github.com/github/awesome-copilot)
+
+### Próximos Pasos
+
+1. **Comparte tu creación** — ¡Muestra tu app de bingo temática!
+2. **Prueba más temas** — Usa Pixel Jam para más variaciones de diseño
+3. **Agrega funcionalidades** — ¿Tabla de posiciones, efectos de sonido, multiplayer?
+4. **Enséñale a otros** — Ejecuta este workshop para tu equipo
+
+---
+
+## 💜 ¡Gracias!
+
+Gracias por acompañarnos en este viaje por el desarrollo asistido por IA.
+
+¡No podemos esperar a ver lo que construirás!

workshop/es/GUIDE.md

@@ -0,0 +1,83 @@
+<!-- l10n-sync: source-file="workshop/GUIDE.md" -->
+# Bingo Mixer — VS Code GitHub Copilot Agent Lab
+[← README](../../README.es.md)
+
+---
+- [ ] VS Code **v1.113+**
+> **Guía de Referencia Rápida** — Para instrucciones detalladas, consulta las partes individuales a continuación.
+
+---
+
+## 📚 Partes del Lab
+
+| Parte | Título |
+|-------|--------|
+| [**00**](00-overview.md) | Descripción General & Lista Rápida |
+| [**01**](01-setup.md) | Configuración & Ingeniería de Contexto |
+| [**02**](02-design.md) | Frontend Design-First |
+| [**03**](03-quiz-master.md) | Quiz Master Personalizado |
+| [**04**](04-multi-agent.md) | Desarrollo Multi-Agente |
+
+---
+
+## ⚡ Lista Rápida
+
+- [ ] VS Code **v1.113+**
+- [ ] GitHub Copilot (Pro/Business/Enterprise)
+- [ ] Git & Node 22+
+- [ ] Panel de Chat abierto
+
+---
+
+## 🚀 Configuración Rápida
+
+```
+# 1. Crea un repo desde la plantilla: github.com/copilot-dev-days/agent-lab-typescript
+# 2. Habilita Pages: Settings > Pages > GitHub Actions
+# 3. Elige una opción: clona el repo en VS Code O crea un Codespace desde tu repo
+# Luego ejecuta:
+# /setup
+```
+
+---
+
+## 📋 Resumen de Tareas
+
+### Parte 1: Ingeniería de Contexto
+- [ ] Ejecutar el agente /setup
+- [ ] Generar instrucciones del workspace
+- [ ] Probar la app con el navegador integrado
+- [ ] Crear una skill personalizada de dogfooding
+- [ ] Explorar las personalizaciones del repo
+
+### Parte 2: Frontend Design-First
+- [ ] Rediseño completo de la UI (Plan Mode)
+- [ ] Actualizar copilot-instructions.md
+- [ ] Probar el rediseño
+
+### Parte 3: Quiz Master
+- [ ] Generar tema personalizado de quiz
+
+### Parte 4: Desarrollo Multi-Agente
+- [ ] Agent hooks — puerta de pruebas
+- [ ] Patrón de bingo Four Corners (TDD)
+- [ ] Agent Debug Logs
+- [ ] Modo Card Deck Shuffle (Pixel Jam)
+- [ ] Revisión de UX
+
+---
+
+## 💡 Consejos
+
+1. Mantén el navegador abierto para actualizaciones en tiempo real
+2. Haz commit del código funcional con frecuencia
+3. Usa checkpoints para revertir errores
+4. Itera en los planes 2+ veces antes de implementar
+
+---
+
+## 🔗 Recursos
+
+- [VS Code YouTube](https://www.youtube.com/code)
+- [Copilot Docs](https://code.visualstudio.com/docs/copilot/overview)
+- [Awesome Copilot](https://github.com/github/awesome-copilot)

workshop/pt_BR/00-overview.md

@@ -0,0 +1,60 @@
+<!-- l10n-sync: source-file="workshop/00-overview.md" -->
+# 🎮 VS Code GitHub Copilot Agent Lab
+[← README](../../README.pt_BR.md)
+
+- [ ] VS Code mais recente **v1.113** (sem atualização pendente)
+
+> **Nível:** Intermediário
+> **Stack:** TypeScript / Vite / Tailwind CSS
+
+Bem-vindo ao **Bingo Mixer** — um workshop prático onde você vai transformar um app de bingo social usando o Agent Mode do VS Code com GitHub Copilot.
+
+---
+
+## 📋 Lista Rápida
+
+- [ ] VS Code mais recente **v1.113** (sem atualização pendente)
+  - [ ] Verifique se as atualizações não estão desabilitadas
+- [ ] Logado com GitHub (Copilot Free não pode executar cloud agent!)
+- [ ] Git & Node instalados
+- [ ] Chat aberto e Agent pronto para ação
+
+*Opcional*: Use DevContainer ou WSL.
+
+---
+
+## 🎯 O que Você Vai Aprender
+
+| # | Habilidade | Descrição |
+|---|------------|-----------|
+| 1 | **Engenharia de Contexto** | Integre a IA ao seu codebase e fluxos de trabalho |
+| 2 | **Primitivas Agênticas** | Construa um fluxo de engenharia AI-first |
+| 3 | **Abundância Agêntica** | Escale exploração e acelere o aprendizado |
+| 4 | **Desenvolvimento Design-First** | Deixe a IA iterar na UI enquanto você guia a visão |
+
+---
+
+## 📚 Partes do Lab
+
+| Parte | Título | Descrição |
+|-------|--------|-----------|
+| [**01**](01-setup.md) | Configuração & Engenharia de Contexto | Clone, configure e ensine a IA sobre seu projeto |
+| [**02**](02-design.md) | Frontend Design-First | Redesenhe a UI com temas criativos |
+| [**03**](03-quiz-master.md) | Quiz Master Personalizado | Crie seus próprios temas de quiz com agentes personalizados |
+| [**04**](04-multi-agent.md) | Desenvolvimento Multi-Agente | Construa novas funcionalidades com TDD e agentes de design |
+
+---
+
+## 💡 Dicas
+
+1. Mantenha o navegador com atualização em tempo real aberto
+2. Faça commit do código funcional com frequência
+3. Reverta mudanças inesperadas usando *Checkpoints* e *Undo* do chat, depois tente novamente
+
+---
+
+## 🔗 Recursos
+
+- [VS Code on YouTube](https://www.youtube.com/code)
+- [VS Code Copilot Docs](https://code.visualstudio.com/docs/copilot/overview)
+- [Awesome Copilot](https://github.com/github/awesome-copilot) para mais customizações

workshop/pt_BR/01-setup.md

@@ -0,0 +1,121 @@
+<!-- l10n-sync: source-file="workshop/01-setup.md" -->
+# Parte 1: Configuração & Engenharia de Contexto
+
+[← Visão Geral](00-overview.md)
+
+---
+
+Nesta seção, você vai configurar seu ambiente de desenvolvimento e ensinar o GitHub Copilot sobre seu codebase.
+
+> 🎮 **[Jogue o Bingo Mixer](../game/)** — Veja o que você vai construir!
+
+---
+
+## 🔧 Configuração Inicial
+
+### Passo 1: Crie Seu Repositório (Obrigatório)
+
+1. Abra [github.com/copilot-dev-days/agent-lab-typescript](https://github.com/copilot-dev-days/agent-lab-typescript)
+2. Clique em **Use this template** → **Create a new repository**
+   - Nome: `my-bingo-mixer`
+   - Visibilidade: **Public**
+3. ✅ Seu próprio repo do Bingo Mixer está pronto!
+
+### Passo 2: Habilite o GitHub Pages
+
+1. Vá em **Settings** → **Pages** do seu repo
+2. Em "Build and deployment", mude *Deploy from a branch* para **GitHub Actions**
+3. ✅ Qualquer commit agora vai publicar em: `https://{username}.github.io/{repo-name}`
+
+### Passo 3: Escolha Como Vai Desenvolver
+
+#### Opção A: Clone localmente no VS Code
+
+1. Abra o VS Code
+2. Execute o comando: `Git: Clone` → `Clone from GitHub`
+3. Selecione seu novo repositório
+4. Instale as extensões recomendadas (notificação ou `Extensions: Show Recommended Extensions`)
+
+#### Opção B: Crie um Codespace para seu repo
+
+1. Abra seu repositório no GitHub
+2. Clique em **Code** → **Codespaces** → **Create codespace on main**
+3. ✅ O Codespace inicia com seu repo e devcontainer.
+
+### Passo 4: Execute o Agente de Setup
+
+No painel de Chat:
+
+```
+/setup
+```
+
+O agente vai identificar quaisquer passos de instalação necessários.
+
+Na primeira ferramenta de terminal, habilite *Auto*-*Approve*.
+
+Deixe o agente identificar quaisquer passos de instalação necessários.
+
+✅ **Sucesso:** O app está rodando e aberto no navegador!
+
+Mantenha este guia do `workshop/` aberto (📌 Fixar).
+
+---
+
+## 📚 Entendendo Engenharia de Contexto
+
+Engenharia de contexto é como você ensina a IA sobre seu codebase específico. Isso torna as sugestões do Copilot mais precisas e relevantes.
+
+### Tarefa 1: Instruções Auto-geradas
+
+Instruções orientam todas as interações agênticas com o codebase, tornando-as mais eficientes e confiáveis. Adicione-as cedo, mas mantenha-as atualizadas e concisas.
+
+**Passos:**
+
+1. Execute o prompt: `/init` com Autopilot habilitado
+   - Enquanto o agente analisa o codebase, opcionalmente comece a próxima tarefa
+2. Abra um novo chat para a próxima tarefa, pois o init pode demorar e podemos revisar depois.
+3. Revise os resultados — não está longo e detalhado demais?
+   1. Follow-up opcional: *"Comprima e adicione uma checklist de desenvolvimento obrigatória [ ] (lint, build, test) no topo"*
+4. Aplique e faça commit
+
+✅ **Resultado:** Todas as futuras solicitações terão um mapa básico do workspace.
+
+---
+
+### Tarefa 2: Dogfooding & Skills Personalizadas
+
+**Passos:**
+
+1. Prompt: *"Teste o app como um dogfooder crítico, dando feedback crítico sobre o quão divertido ele é"*
+2. Observe como o agente abre o navegador integrado, interage com o app e escreve um relatório
+3. `/create-skill` *para dogfooding* — ou: *"Salve isso como uma skill de dogfooding"*
+
+✅ **Resultado:** O agente usou o navegador para realmente jogar o app e produziu um relatório crítico. Você então salvou essa abordagem de teste como uma skill reutilizável de dogfooding.
+
+> 💡 **Insight de engenharia de contexto:** O agente precisa de contexto prático — executar o app, ver a UI, clicar pelos fluxos — para realmente entender como funciona e validar a funcionalidade. Só o código não basta; interagir com o produto em execução fecha a lacuna entre ler código e entender a experiência do usuário.
+
+---
+
+### Tarefa 3: Modal de Customização
+
+Explore as customizações do repo para entender como a engenharia de contexto funciona na prática.
+
+**Passos:**
+
+1. Abra o painel de Customização, Comando: `Chat: Open Customizations (Preview)`
+2. Navegue pelas customizações do repo — instruções, skills e agentes
+3. Veja a **skill de design frontend** e as **instruções de Tailwind 4**
+
+> 💡 **Pense sobre:** Quais convenções ou padrões dos seus próprios projetos poderiam se tornar instruções ou skills?
+
+---
+
+## ✅ Parte 1 Completa!
+
+Você aprendeu como:
+- Configurar seu ambiente de desenvolvimento
+- Gerar e refinar instruções do workspace
+- Testar seu app com o navegador integrado do agente
+- Criar e salvar skills personalizadas
+- Explorar customizações do repo (instruções, skills, agentes)

workshop/pt_BR/02-design.md

@@ -0,0 +1,91 @@
+<!-- l10n-sync: source-file="workshop/02-design.md" -->
+# Parte 2: Frontend Design-First
+
+[← Parte 1](01-setup.md)
+
+---
+
+Agora que engenheiramos o contexto do repo, vamos ser criativos.
+
+---
+
+### Tarefa 1: Deixe a Sua Cara
+
+Plan mode para começar qualquer trabalho maior — itere no plano (2+ vezes!) com ajustes e esclarecimentos.
+
+**Passos:**
+
+1. Mude para Plan mode
+2. *Vamos fazer um redesign completo. Faça algo…*
+3. Revise o plano e comece a Implementação
+
+**Ideias de Temas:**
+
+- Minimalist Mono
+- Grotesque Type Grid
+- Retro Terminal Green
+- Vaporwave Sunset
+- Cyberpunk Neon
+- Brutalist Blocks
+- Soft Pastel Clouds
+- Skeuomorphic Stickers
+- Dark Mode Noir
+- Playful Candy Pop
+- Pixel Arcade Style
+- Scandinavian Calm
+- Corporate Clean Blue
+- Gradient Glass UI
+- Notebook Doodle Sketch
+- Space Galaxy Glow
+- Paper Card Cutouts
+- Geometric Memphis
+- Cozy Coffee Shop
+- Metallic Chrome UI
+- Bold Constructivist
+- Eco Leafy Green
+- Anime Bubble Aesthetic
+- Monochrome Newspaper
+- Chalkboard Classroom
+- Yacht Club Nautical
+- Desert Sand Minimal
+- Bold Serif Vintage
+- Toybox Primary Colors
+
+✅ **Resultado:** As instruções de frontend e Tailwind são usadas para criar um design bonito.
+
+---
+
+### Tarefa 2: Mantenha as Instruções Atualizadas
+
+Mantenha as instruções atualizadas com mudanças importantes de arquitetura/design/dependências.
+
+**Passos:**
+
+1. Follow-up: `/create-instructions design guide`
+2. Confirme, faça commit e push
+
+Bônus: Verifique se o GitHub Pages está atualizando.
+
+---
+
+### Tarefa 3: Teste o Redesign
+
+Re-execute a skill de dogfooding da Parte 1 para validar seu novo design.
+
+**Passos:**
+
+1. Prompt: *"Faça dogfooding do app — foque no novo design"*
+2. Compare o feedback com o relatório de dogfooding anterior
+3. Opcional: Resolva quaisquer problemas que o agente apontar
+
+✅ **Resultado:** O agente joga o app redesenhado e dá feedback crítico atualizado.
+
+---
+
+## ✅ Parte 2 Completa!
+
+Você aprendeu como:
+- Usar Plan Mode para tarefas complexas de design
+- Iterar nos planos antes de implementar
+- Manter instruções atualizadas com mudanças
+- Re-executar dogfooding para validar mudanças de design

workshop/pt_BR/03-quiz-master.md

@@ -0,0 +1,50 @@
+<!-- l10n-sync: source-file="workshop/03-quiz-master.md" -->
+# Parte 3: Quiz Master Personalizado
+
+[← Parte 2](02-design.md)
+
+---
+
+Defina seus próprios fluxos de trabalho especializados com agentes personalizados, indo além de prompts genéricos de código.
+
+---
+
+### Tarefa: Seu Próprio Quiz Master
+
+**Passos:**
+
+1. Novo Chat, selecione *Quiz Master* como agente personalizado
+2. `Atualize as perguntas para…` ou apenas `Update quiz`
+3. Confira o prompt em `.github/agents/quiz-master.agent.md`
+4. Opcional: Follow-up para pedir mais criatividade, caos, engajamento
+
+**Ideias de Temas:**
+
+- Skill Bingo: Habilidades profissionais ou técnicas
+- Personality Bingo: Preferências, manias, traços divertidos
+- Secret Challenge Bingo: Micro-desafios rápidos com pessoas que você conhecer
+- Team Bingo: Categorias por departamento ou equipe
+- Classic Facts Bingo: Mês de aniversário, pets, etc.
+- Work Culture Bingo: Hábitos de produtividade, estilos de reunião, ferramentas
+- Tech Life Bingo: Linguagens de programação, atalhos, frameworks, memes de dev
+- Travel Bingo: Cidades onde morou, países visitados, tradições culturais
+- Creative Bingo: Gostos musicais, arte, design, habilidades criativas
+- Micro-Challenge Bingo: Ações rápidas (ensinar uma palavra, mostrar um meme)
+- Deep Chat Bingo: Conversas reflexivas ou significativas para começar
+- Office Humor Bingo: Manias de mesa, hábitos de cafeína, opiniões quentes sobre reuniões
+- Opposites Bingo: Encontre alguém que seja seu oposto em eixos específicos
+- Fandom Bingo: Sci-fi, games, livros, séries, interesses de nicho
+- Lifestyle Bingo: Sono, exercício, comida, rotinas
+- Mystery Bingo: Adivinhe quem tem um traço e verifique
+- Chaos Bingo: Prompts surpreendentes, absurdos e imprevisíveis
+
+✅ **Resultado:** O agente personalizado percorre o quiz atualizado, gerando novas perguntas criativas e envolventes.
+
+---
+
+## ✅ Parte 3 Completa!
+
+Você aprendeu como:
+- Usar agentes personalizados para fluxos de trabalho especializados
+- Gerar perguntas de quiz temáticas
+- Iterar na saída do agente para melhores resultados

workshop/pt_BR/04-multi-agent.md

@@ -0,0 +1,117 @@
+<!-- l10n-sync: source-file="workshop/04-multi-agent.md" -->
+# Parte 4: Desenvolvimento Multi-Agente
+
+[← Parte 3](03-quiz-master.md)
+
+---
+
+## Tarefa 1: Agent Hooks — Portão de Testes
+
+[Agent hooks](https://code.visualstudio.com/docs/copilot/customization/hooks) executam comandos shell em pontos-chave do ciclo de vida durante sessões de agente. Vamos adicionar um **Stop hook** com escopo de workspace que bloqueia *todos* os agentes — nenhum agente pode finalizar até que todos os testes passem.
+
+**Passos:**
+
+1. Abra a pasta `.github/hooks/`
+2. Prompt: *Adicione um agent hook que execute os testes e bloqueie o agente de finalizar se algum teste falhar*
+3. O hook deve ser um arquivo JSON em `.github/hooks/` (ex: `stop-test-gate.json`), não dentro de nenhum arquivo de agente individual.
+
+✅ **Resultado:** Todo agente agora tem uma rede de segurança — ele vai continuar trabalhando até que todos os testes passem antes de devolver o controle.
+
+---
+
+## Tarefa 2: Novo Padrão de Bingo (Orientado por TDD)
+
+Use o agente TDD para adicionar um padrão de bingo "Four Corners". O stop hook do workspace que você configurou vai garantir a disciplina de testes — todo agente deve deixar os testes passando antes de devolver o controle.
+
+**Passos:**
+
+1. Novo chat com agente: `TDD`
+2. *Adicione um padrão de vitória "Four Corners" no bingo — todos os quatro quadrados dos cantos (superior-esquerdo, superior-direito, inferior-esquerdo, inferior-direito) devem estar marcados*
+3. Observe o TDD orquestrar:
+   - **TDD Red** escreve testes que falham para a detecção de Four Corners
+   - Revise os novos testes no test runner do VS Code
+   - **TDD Green** implementa o código mínimo para passar — o stop hook dispara, continua se os testes falharem
+   - **TDD Refactor** limpa a implementação
+   - Clique em qualquer sub-agente enquanto ele executa para ver seu contexto e instruções
+4. Revise o resumo das mudanças
+
+✅ **Resultado:** Ciclo TDD orquestrado com portão de testes automático — sem handoffs manuais entre agentes.
+
+---
+
+## Tarefa 3: Verifique com Agent Debug Logs
+
+Inspecione o que aconteceu por baixo dos panos — o hook disparou? Como os agentes se comunicaram?
+
+**Passos:**
+
+1. Verifique se o hook carrega: abra o canal de saída **GitHub Copilot Chat Hooks** (painel Output → dropdown de canal)
+2. Abra Agent Debug Logs: ícone de engrenagem (⚙️) na view do Chat → **Show Agent Debug Logs**
+3. **Aba Logs:** filtre por eventos de execução do hook durante o ciclo TDD
+4. **Agent Flow Chart:** visualize a orquestração TDD → Red → Green → Refactor
+5. **Aba Summary:** revise o total de chamadas de ferramenta e uso de tokens
+
+**Bônus:** Clique no ícone ✨ sparkle para anexar eventos de debug a um novo chat, depois pergunte: `/troubleshoot o Stop hook disparou durante o ciclo TDD?`
+
+✅ **Resultado:** Observabilidade completa da orquestração multi-agente e execução de hooks.
+
+---
+
+## Tarefa 4: Card Deck Shuffle (Orientado por Design)
+
+Divida fluxos de trabalho de agentes em áreas de foco específicas, como design-first.
+
+**Passos:**
+
+1. Novo chat com agente: `Pixel Jam`
+2. *Novo modo: Card Deck Shuffle. Todo jogador abre o jogo → toca → recebe uma carta aleatória com uma pergunta.*
+3. O agente itera na UI
+4. Dê follow-up para funcionar como você quer:
+   - *Adicione esquerda/direita (falha, sucesso)*
+   - *Puxe uma carta logo quando eu abrir*
+5. Commit
+
+---
+
+## Tarefa 5: Agente de Revisão de UX
+
+Combine MCP, fluxos de trabalho personalizados e isolamento de sub-agentes em um agente para fluxos de trabalho poderosos. Foque em diferentes aspectos, como usabilidade, a11y, conformidade.
+
+**Passos:**
+
+1. Novo chat com agente: `Pixel Jam`: *Execute a revisão*
+2. Mantenha o app aberto na pré-visualização do navegador do VS Code enquanto a revisão executa
+3. Acompanhe conforme ele revisa
+   - À parte: Abra `.github/agents/pixel-jam.agent.md` para revisar o prompt
+4. Contemple uma revisão profunda e detalhada
+
+**Bônus:**
+- Registre achados como issues no GitHub para depois
+- Atribua issues críticas ao agente de código para corrigir
+
+---
+
+## Bônus: Continue Explorando
+
+- Corrija problemas da revisão de UX, delegados para agente em background ou cloud
+- Adicione a possibilidade de ter múltiplos temas de perguntas para escolher
+- Adicione compartilhamento social no estado de vitória
+- Faça um app real para iOS ou full-stack?
+
+---
+
+## ✅ Parte 4 Completa!
+
+Você aprendeu como:
+- Adicionar agent hooks com escopo de workspace para impor portões de qualidade (Stop hook em todos os agentes)
+- Usar TDD para orquestrar Red → Green → Refactor automaticamente
+- Inspecionar comportamento do agente com Agent Debug Logs e Flow Charts
+- Usar agentes design-first para desenvolvimento orientado por UI
+- Executar agentes de revisão de UX para testes abrangentes
+- Combinar múltiplos tipos de agentes para fluxos de trabalho complexos
+
+### Continue Explorando
+
+- 📺 [VS Code on YouTube](https://www.youtube.com/code)
+- 📖 [VS Code Copilot Docs](https://code.visualstudio.com/docs/copilot/overview)
+- 🌟 [Awesome Copilot](https://github.com/github/awesome-copilot)

workshop/pt_BR/05-complete.md

@@ -0,0 +1,57 @@
+<!-- l10n-sync: source-file="workshop/05-complete.md" -->
+# 🎉 Workshop Completo!
+
+[← Parte 4](04-multi-agent.md)
+
+---
+
+## Parabéns! 🎊
+
+Você completou o **VS Code GitHub Copilot Agent Lab**!
+
+---
+
+## 🏆 O que Você Construiu
+
+- ✅ Um app de Social Bingo totalmente redesenhado
+- ✅ Temas de quiz personalizados com o agente Quiz Master
+- ✅ Agent hooks para portão de testes automatizado
+- ✅ Padrão de bingo Four Corners (construído com TDD)
+- ✅ Modo Card Deck Shuffle (orientado por design)
+- ✅ Revisão abrangente de UX
+
+---
+
+## 🧠 O que Você Aprendeu
+
+| Habilidade | Descrição |
+|------------|-----------|
+| **Engenharia de Contexto** | Integração da IA ao seu codebase com instruções |
+| **Primitivas Agênticas** | Background agents, cloud agents e fluxos de trabalho personalizados |
+| **Desenvolvimento Design-First** | Iteração de UI com assistência de IA |
+| **Desenvolvimento Orientado por Testes** | Código confiável com agentes TDD |
+
+---
+
+## 🚀 Continue Explorando!
+
+### Recursos
+
+- 📺 [VS Code on YouTube](https://www.youtube.com/code)
+- 📖 [VS Code Copilot Docs](https://code.visualstudio.com/docs/copilot/overview)
+- 🌟 [Awesome Copilot](https://github.com/github/awesome-copilot)
+
+### Próximos Passos
+
+1. **Compartilhe sua criação** — Mostre seu app de bingo temático!
+2. **Experimente mais temas** — Use Pixel Jam para mais variações de design
+3. **Adicione funcionalidades** — Placar, efeitos sonoros, multiplayer?
+4. **Ensine outros** — Execute este workshop para sua equipe
+
+---
+
+## 💜 Obrigado!
+
+Obrigado por nos acompanhar nesta jornada pelo desenvolvimento assistido por IA.
+
+Mal podemos esperar para ver o que você vai construir!

workshop/pt_BR/GUIDE.md

@@ -0,0 +1,83 @@
+<!-- l10n-sync: source-file="workshop/GUIDE.md" -->
+# Bingo Mixer — VS Code GitHub Copilot Agent Lab
+[← README](../../README.pt_BR.md)
+
+---
+- [ ] VS Code **v1.113+**
+> **Guia de Referência Rápida** — Para instruções detalhadas, veja as partes individuais abaixo.
+
+---
+
+## 📚 Partes do Lab
+
+| Parte | Título |
+|-------|--------|
+| [**00**](00-overview.md) | Visão Geral & Lista Rápida |
+| [**01**](01-setup.md) | Configuração & Engenharia de Contexto |
+| [**02**](02-design.md) | Frontend Design-First |
+| [**03**](03-quiz-master.md) | Quiz Master Personalizado |
+| [**04**](04-multi-agent.md) | Desenvolvimento Multi-Agente |
+
+---
+
+## ⚡ Lista Rápida
+
+- [ ] VS Code **v1.113+**
+- [ ] GitHub Copilot (Pro/Business/Enterprise)
+- [ ] Git & Node 22+
+- [ ] Painel de Chat aberto
+
+---
+
+## 🚀 Configuração Rápida
+
+```
+# 1. Crie um repo a partir do template: github.com/copilot-dev-days/agent-lab-typescript
+# 2. Habilite Pages: Settings > Pages > GitHub Actions
+# 3. Escolha uma opção: clone o repo no VS Code OU crie um Codespace a partir do seu repo
+# Depois execute:
+# /setup
+```
+
+---
+
+## 📋 Resumo das Tarefas
+
+### Parte 1: Engenharia de Contexto
+- [ ] Executar o agente /setup
+- [ ] Gerar instruções do workspace
+- [ ] Testar o app com o navegador integrado
+- [ ] Criar uma skill personalizada de dogfooding
+- [ ] Explorar as customizações do repo
+
+### Parte 2: Frontend Design-First
+- [ ] Redesign completo da UI (Plan Mode)
+- [ ] Atualizar copilot-instructions.md
+- [ ] Testar o redesign
+
+### Parte 3: Quiz Master
+- [ ] Gerar tema personalizado de quiz
+
+### Parte 4: Desenvolvimento Multi-Agente
+- [ ] Agent hooks — portão de testes
+- [ ] Padrão de bingo Four Corners (TDD)
+- [ ] Agent Debug Logs
+- [ ] Modo Card Deck Shuffle (Pixel Jam)
+- [ ] Revisão de UX
+
+---
+
+## 💡 Dicas
+
+1. Mantenha o navegador aberto para atualizações em tempo real
+2. Faça commit do código funcional com frequência
+3. Use checkpoints para reverter erros
+4. Itere nos planos 2+ vezes antes de implementar
+
+---
+
+## 🔗 Recursos
+
+- [VS Code YouTube](https://www.youtube.com/code)
+- [Copilot Docs](https://code.visualstudio.com/docs/copilot/overview)
+- [Awesome Copilot](https://github.com/github/awesome-copilot)