Learn spec-driven development and agentic engineering in one focused hour.
Pick one of the six scenarios below, watch the short video, and follow the matching scenario doc.
| # | Scenario | Tooling | Guide |
|---|---|---|---|
| 1 | Greenfield Todo App | OpenSpec + Copilot Chat | docs/scenario-1-openspec-todo.md |
| 2 | Brownfield Feature | Copilot Plan Mode | docs/scenario-2-plan-mode-bookshelf.md |
| 3 | Legacy Modernization | Spec Kit | docs/scenario-3-speckit-cobol.md |
| 4 | Personal Assistant | Copilot CLI + Squad + OpenSpec | docs/scenario-4-cli-squad-assistant.md |
| 5 | ETL Pipeline (data) | Copilot CLI + Squad + Spec Kit | docs/scenario-5-speckit-etl-pipeline.md |
| 6 | Angular → React Modernization | Copilot CLI + Squad + Spec Kit + Playwright | docs/scenario-6-speckit-angular-react.md |
Each scenario has an examples/scenario-N-…/ folder — the location you run it from. Some come with starter files; others contain only a README and are populated as you go.
- VS Code with GitHub Copilot + Copilot Chat signed in.
- Node.js 20.19+ (
node --version). - Playwright MCP is preconfigured for VS Code (
.vscode/mcp.json) and Copilot CLI (.mcp.json). It runs on demand vianpx @playwright/mcp@latest. You can also use Playwright CLI as a backup (npm install -g playwright && npx playwright install chromium).
For a complete scenario-by-scenario prerequisites matrix (including hackathon-only extras), see docs/prerequisites.md.
git clone https://github.com/pascalvanderheiden/sdd-mini-hack.git
cd sdd-mini-hack
code .Build a small todo app from a spec. Validate it with the Playwright MCP server.
Extra prereqs
- OpenSpec:
npm install -g @fission-ai/openspec@latest - VS Code extension: OpenSpec for Copilot (
atman-dev.openspec-for-copilot)
Demo video
scenario-1-openspec-greenfield.mp4
→ Follow docs/scenario-1-openspec-todo.md
Add a feature to the included Bookshelf app, then validate it through Playwright MCP.
Extra prereqs
- The sample app under
examples/scenario-2-bookshelf-app(already in the repo, no install).
Demo video
scenario-2-plan-mode.mp4
→ Follow docs/scenario-2-plan-mode-bookshelf.md
Clone a legacy COBOL accounting system as the source, then use Spec Kit to specify, plan, task, and implement a modern rewrite.
Extra prereqs
- GnuCOBOL to run the legacy app:
- macOS:
brew install gnu-cobol - Linux:
sudo apt-get install -y gnucobol - Windows: install via GnuCOBOL Windows builds or use WSL.
- macOS:
- Python 3.12+ and uv:
curl -LsSf https://astral.sh/uv/install.sh | sh - Spec Kit:
uv tool install specify-cli --from git+https://github.com/github/spec-kit.git - VS Code extension: SpecKit Companion (
alfredoperez.speckit-companion)
Demo video
scenario-3-speckit-legacy-modernization.mp4
→ Follow docs/scenario-3-speckit-cobol.md
Use Copilot CLI with the Squad agent. Add a Squad team member that owns OpenSpec, then have them propose and execute a personal assistant app.
Extra prereqs
- GitHub Copilot CLI signed in (
copilot --help). - Squad:
npm install -g @bradygaster/squad-cli(squad doctor). - OpenSpec:
npm install -g @fission-ai/openspec@latest.
Demo video
scenario-4-squad-cli.mp4
→ Follow docs/scenario-4-cli-squad-assistant.md
Execute the complete Spec Kit lifecycle orchestrated by the Squad team, landing two public climate datasets into a local PostgreSQL container.
Extra prereqs
- Docker with docker compose (
docker --version). - Python 3.12+ and uv:
curl -LsSf https://astral.sh/uv/install.sh | sh - Spec Kit:
uv tool install specify-cli --from git+https://github.com/github/spec-kit.git - GitHub Copilot CLI signed in (
copilot --help). - Squad:
npm install -g @bradygaster/squad-cli(squad doctor). - psql client (optional):
brew install postgresql@16(macOS) orsudo apt-get install postgresql-client(Linux).
Demo video
scenario-5-cli-etl-pipeline.mp4
→ Follow docs/scenario-5-speckit-etl-pipeline.md
Use Copilot CLI with the Squad agent to run the full Spec Kit lifecycle and modernize the Angular RealWorld app's frontend to React — same UI, frontend only — then validate it with Playwright.
Extra prereqs
- GitHub Copilot CLI signed in (
copilot --help). - Squad:
npm install -g @bradygaster/squad-cli(squad doctor). - Spec Kit:
uv tool install specify-cli --from git+https://github.com/github/spec-kit.git. - Node.js 20.19+ and Playwright (MCP preconfigured; CLI backup
npm install -g playwright && npx playwright install chromium).
Demo video
scenario-6-angular-react.mp4
→ Follow docs/scenario-6-speckit-angular-react.md
Two small skills are included under .github/skills/. Copilot can use them when relevant; you do not have to invoke them manually.
frontend-design— opinionated UI defaults for scenarios 1, 2, and 4.legacy-cobol-explorer— domain notes for the COBOL sample in scenario 3.
./scripts/verify-workshop.sh.
├── .devcontainer/ # Codespaces config
├── .github/skills/ # Optional Copilot skills
├── .vscode/ # Editor + MCP config (Playwright)
├── .mcp.json # MCP config for Copilot CLI
├── docs/ # 6 scenario guides (one per scenario)
├── examples/
│ ├── scenario-1-openspec-todo/ # Scenario 1 (greenfield, from scratch)
│ ├── scenario-2-bookshelf-app/ # Scenario 2 starter
│ ├── scenario-3-legacy-cobol-library/ # Scenario 3 (clone COBOL source here)
│ ├── scenario-4-cli-squad-assistant/ # Scenario 4 (greenfield, from scratch)
│ ├── scenario-5-etl-climate-pipeline/ # Scenario 5 starter (PostgreSQL ETL)
│ └── scenario-6-angular-realworld-react/ # Scenario 6 working folder (Angular→React)
├── media/videos/ # demo videos
└── scripts/ # Verification helper
Want to design your own reusable agentic template? See docs/meta-agentic-template.md for a simple meta-cognition flow covering prompts, skills, agents, and MCP servers.
It works really well to combine your agentic template with spec-driven development: once the template knows how to work, layer SDD on top so the agent also works from a spec — making your solutions more sophisticated and reviewable.