Apresentação web interativa sobre SDD (Spec-Driven Development) com foco em contexto, previsibilidade e fluxo com AI Coding Agents.
🌐 Ver apresentação online · 🚀 Quick Start · 📁 Estrutura · 👩💻 Autora
Este repositório contém a apresentação da Glaucia Lemos sobre Spec-Driven Development (SDD) com GitHub Copilot.
A experiência foi desenvolvida como slides web com Reveal.js, sem build step, com:
- 🔄 Carregamento dinâmico de seções (
slides/manifest.json+slides/parts/*.html); - 🎨 Design system próprio em
css/custom.css; - 🧩 App JS modular em
js/app/*; - ✨ Recursos interativos como quiz, Mermaid, starfield, particles e backgrounds especiais.
|
|
|
|
| Tópico | Descrição |
|---|---|
| 🎯 Fundamentos SDD | Conceitos básicos de Spec-Driven Development |
| 🛠️ spec-kit | Como usar spec-kit no fluxo de desenvolvimento |
| 🤖 GitHub Copilot | Agent Mode e otimização de contexto |
| 📐 Arquitetura | PRD.md, AGENTS.md, Rules e Skills |
| 🔄 Progressive Disclosure | Estratégias para reduzir ruído de contexto |
| 🎬 Demo Prática | Elementos visuais e interativos ao vivo |
| 🏆 Quiz Final | Consolidação dos conceitos apresentados |
Important
- Node.js — Versão 18.0.0 ou superior
- npm — Gerenciador de pacotes
# Clone o repositório
git clone https://github.com/glaucia86/palestra-sdd.git
cd palestra-sdd
# Instale as dependências
npm install
# Inicie o servidor de desenvolvimento
npm run start# type-check sem emitir arquivos
npm run typecheck
# compila src-ts/** para js/app/**
npm run build:ts
# compila em watch mode durante desenvolvimento
npm run build:ts:watchA aplicação será aberta automaticamente em http://127.0.0.1:3000/index.html
Tip
Use npm run start -- --no-browser para iniciar sem abrir o navegador automaticamente.
Reveal.js Slides Framework |
Mermaid Diagramas |
Lucide Ícones |
TypeScript Incremental ESM |
A página principal (index.html) inicia uma estrutura simples:
- carrega estilos e bibliotecas CDN (Reveal, Mermaid, Lucide);
- inicializa o app em
js/app/init.js; - carrega os arquivos definidos em
slides/manifest.json; - injeta os blocos de
slides/parts/*.htmldentro de.reveal .slides; - executa bootstrap de recursos visuais, quiz e hooks de evento do Reveal.
Esse desenho permite evoluir conteúdo e features sem acoplamento forte entre slides e runtime.
palestra-sdd/
|- index.html
|- README.md
|- AGENTS.md
|- css/
| |- custom.css
|- js/
| |- app/
| |- init.js # emitido pelo TypeScript
| |- bootstrap.js # emitido pelo TypeScript
| |- config/
| |- features/
| |- quiz/
|- src-ts/
| |- app/
| |- init.ts
| |- bootstrap.ts
| |- config/
| |- features/
| |- quiz/
| |- types/
|- tsconfig.json
|- tsconfig.typecheck-js.json
|- slides/
| |- manifest.json
| |- parts/
|- resources/
| |- images/
| |- sounds/
|- server/
| |- dev-server.js
| |- no-cache-middleware.js
|- docs/
| |- PRD.md
| |- architecture-js.md
| |- prompt.md
| Tecla | Ação |
|---|---|
→ / Espaço |
Próximo slide |
← |
Slide anterior |
↑ / ↓ |
Navegar sub-slides |
Esc |
Visão geral |
F |
Tela cheia |
S |
Speaker notes |
Note
Demo ao vivo: https://glaucia86.github.io/palestra-sdd/
O deploy para GitHub Pages é automático via workflow:
- Arquivo:
.github/workflows/deploy-pages.yml - Gatilho: push para branch
main - URL publicada: https://glaucia86.github.io/palestra-sdd/
Se você achou esta apresentação útil:
| ⭐ Star este repositório | 🐛 Reporte problemas encontrados |
| 💡 Sugira melhorias | 🔀 Contribua via pull requests |
Este projeto está sob a licença MIT. Veja LICENSE para detalhes.
Feito com 💚 usando Reveal.js e GitHub Copilot