andwati/copilot-dev-days
1
0
Fork 0
mirror of https://github.com/andwati/copilot-dev-days.git synced 2026-10-24 04:42:16 +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/pt_BR/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.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
+121
View File
@@ -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
+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)
---
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
+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)
---
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
+117
View File
@@ -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
+57
View File
@@ -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
+83
View File
@@ -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)