Initial commit

2026-10-18 02:02:52 +00:00 · 2026-04-25 12:37:38 +03:00
commit df7302b8b0
85 changed files with 10204 additions and 0 deletions
@@ -0,0 +1,116 @@
+# Part 4: Multi-Agent Development
+
+[← Part 3](03-quiz-master.md)
+
+---
+
+## Task 1: Agent Hooks — Test Gate
+
+[Agent hooks](https://code.visualstudio.com/docs/copilot/customization/hooks) execute shell commands at key lifecycle points during agent sessions. We'll add a workspace-scoped **Stop hook** that gates *every* agent — no agent can finish until all tests pass.
+
+**Steps:**
+
+1. Open the `.github/hooks/` folder
+2. Prompt: *Add an agent hook that runs the tests and blocks the agent from finishing if any test fails*
+3. The hook should be a JSON file in `.github/hooks/` (e.g. `stop-test-gate.json`), not inside any single agent file.
+
+✅ **Result:** Every agent now has a safety net — it will keep working until all tests pass before handing back control.
+
+---
+
+## Task 2: New Bingo Pattern (TDD-Driven)
+
+Use the TDD agent to add a "Four Corners" bingo pattern. The workspace stop hook you set up will enforce test discipline — every agent must leave tests passing before it hands back control.
+
+**Steps:**
+
+1. New chat with agent: `TDD`
+2. *Add a "Four Corners" bingo win pattern — all four corner squares (top-left, top-right, bottom-left, bottom-right) must be marked*
+3. Watch TDD orchestrate:
+   - **TDD Red** writes failing tests for Four Corners detection
+   - Review the new tests in VS Code's test runner
+   - **TDD Green** implements the minimal code to pass — stop hook fires, keeps it going if tests fail
+   - **TDD Refactor** cleans up the implementation
+   - Click on any sub-agent while it runs to see its context and instructions
+4. Review the summary of changes
+
+✅ **Result:** Orchestrated TDD cycle with automatic test gating — no manual handoffs between agents.
+
+---
+
+## Task 3: Verify with Agent Debug Logs
+
+Inspect what happened under the hood — did the hook fire? How did agents communicate?
+
+**Steps:**
+
+1. Verify the hook loads: open the **GitHub Copilot Chat Hooks** output channel (Output panel → channel dropdown)
+2. Open Agent Debug Logs: gear icon (⚙️) in Chat view → **Show Agent Debug Logs**
+3. **Logs view:** filter for hook execution events during the TDD cycle
+4. **Agent Flow Chart:** visualize the TDD → Red → Green → Refactor orchestration
+5. **Summary view:** review total tool calls and token usage
+
+**Bonus:** Click the ✨ sparkle icon to attach debug events to a new chat, then ask: `/troubleshoot did the Stop hook fire during the TDD cycle?`
+
+✅ **Result:** Full observability into multi-agent orchestration and hook execution.
+
+---
+
+## Task 4: Card Deck Shuffle (Design-Driven)
+
+Break down agent workflows into specific focus areas, like design-first.
+
+**Steps:**
+
+1. New chat with agent: `Pixel Jam`
+2. *New mode: Card Deck Shuffle. Every player opens the game → taps → gets a random card with a question.*
+3. Agent iterates on the UI
+4. Follow up to make it work like you want:
+   - *Add left/right (fail, success)*
+   - *Draw a card right when I open it*
+5. Commit
+
+---
+
+## Task 5: UX Review Agent
+
+Combine MCP, custom workflows, and subagent isolation in an agent for powerful workflows. Focus on different aspects, like usability, a11y, compliance.
+
+**Steps:**
+
+1. New chat with agent: `Pixel Jam`: *Run review*
+2. Keep the app open in VS Code browser preview while the review runs
+3. Follow along as it reviews
+   - Aside: Open `.github/agents/pixel-jam.agent.md` to review the prompt
+4. Behold a mighty in-depth review
+
+**Bonus:**
+- File findings as issues on GitHub for later
+- Assign critical issues to coding agent to fix
+
+---
+
+## Bonus: Keep Going
+
+- Fix UX review problems, delegated to background or cloud agent
+- Add ability to have multiple question themes to pick from
+- Add social sharing to win state
+- Make a real iOS or full-stack app?
+
+---
+
+## ✅ Part 4 Complete!
+
+You've learned how to:
+- Add workspace-scoped agent hooks to enforce quality gates (Stop hook on all agents)
+- Use TDD to orchestrate Red → Green → Refactor automatically
+- Inspect agent behavior with Agent Debug Logs and Flow Charts
+- Use design-first agents for UI-driven development
+- Run UX review agents for comprehensive testing
+- Combine multiple agent types for complex workflows
+
+### Keep Going
+
+- 📺 [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)