Skip to content

04-multi-agent.md

Latest commit

 

History

History
116 lines (77 loc) · 4.29 KB

04-multi-agent.md

File metadata and controls

116 lines (77 loc) · 4.29 KB

Part 4: Multi-Agent Development

← Part 3

Task 1: Agent Hooks — Test Gate

Agent 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