andwati/copilot-dev-days
1
0
Fork 0
mirror of https://github.com/andwati/copilot-dev-days.git synced 2026-10-21 03:24:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
andwati
2026-04-25 12:37:38 +03:00
committed by GitHub
commit df7302b8b0
85 changed files with 10204 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workshop/es/00-overview.md
+60
View File
@@ -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
+121
View File
@@ -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
+91
View File
@@ -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
+50
View File
@@ -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
+117
View File
@@ -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
+57
View File
@@ -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
+83
View File
@@ -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)