Brief → Spec → Plan → Tasks → Code → Test → Review → Ship
Este repositório é um laboratório de treinamento de 8 horas que ensina a construir software guiado por especificação (Spec-Driven Development) usando o GitHub Copilot em todas as etapas. O projeto final é um Weather App em React + TypeScript que consome a API Open-Meteo.
NÃO COMECE PELO CÓDIGO. Sempre: Spec → Plan → Tasks → Code.
Comece pelo Guia do Workshop e siga os módulos em ordem.
| # | Módulo | Fase | Duração |
|---|---|---|---|
| 01 | Setup | Preparação | 30 min |
| 02 | Understanding the Problem | Discovery | 45 min |
| 03 | Writing the Specification | Spec | 50 min |
| 04 | Creating the Technical Plan | Plan | 45 min |
| 05 | Breaking Down Tasks | Tasks | 40 min |
| 06 | Building the UI | Code | 60 min |
| 07 | Integrating APIs | Code | 60 min |
| 08 | Testing | Test | 55 min |
| 09 | Hardening | Test | 50 min |
| 10 | Pull Request Review | Review | 45 min |
| 11 | Delivery (GitHub Pages) | Ship | 30 min |
Cada módulo tem README.md, challenge.md, prompts.md e solution.md.
- Node.js
- pnpm (único gerenciador de pacotes suportado — habilite com
corepack enable) - GitHub Copilot habilitado no VS Code
- Git e uma conta no GitHub (para PR e deploy)
O repositório inclui um DevContainer com tudo pré-configurado. Abra em um Codespace ou em "Reopen in Container" e pule a instalação manual.
pnpm install
pnpm exec playwright install # navegadores para os testes E2Epnpm dev # servidor de desenvolvimento (Vite)
pnpm build # build de produção
pnpm preview # serve o build localmente
pnpm lint # Biome (lint)
pnpm format # Biome (formatação)
pnpm check # Biome (lint + formatação)
pnpm test # testes unitários (Vitest)
pnpm test:coverage # cobertura
pnpm test:e2e # testes E2E (Playwright)src/
├── components/ # apresentação (um componente por arquivo)
│ └── states/ # loading, erro, vazio
├── hooks/ # orquestração (useWeather)
├── services/ # acesso a dados (Open-Meteo) isolado
├── lib/ # funções puras (conversão, formatação, códigos WMO)
├── types/ # contratos compartilhados
├── styles/ # Tailwind + estilos globais
├── App.tsx # composição da tela
└── main.tsx # bootstrap React
Decisões-chave:
- Temperaturas em Celsius internamente; conversão só na apresentação (o toggle °C/°F não faz nova requisição).
- Rede isolada em
services/— componentes e hooks não conhecem URLs. - Sempre tratar loading, erro e vazio.
- TypeScript (strict) · React · Vite
- Tailwind CSS (tema dark glassmorphism)
- Vitest + Testing Library (unit) · Playwright (E2E)
- Biome (lint + formatação)
- pnpm (gerenciador de pacotes)
- Open-Meteo (geocoding + forecast, sem API key)
A pasta .github/ traz a inteligência do laboratório:
agents/— personas especializadas: Spec, Plan, Task, Code, Test, Review.prompts/— prompts de produção para cada etapa.instructions/— convenções (React, Tailwind, Testing) aplicadas automaticamente.workflows/— CI (lint/build/test/e2e), deploy no Pages e validações que impõem a ordem Spec → Plan → Tasks.
Veja AGENTS.md para a descrição de cada agente.
- Narrativa, comentários e documentação: pt-BR.
- Identificadores de código, nomes de arquivos e termos técnicos: en-US.
Construído com ❤️ para capacitar times em Spec-Driven Development usando o poder do GitHub Copilot.