🎮 Mona Mayhem

VS Code & GitHub Copilot CLI Workshop — Build a GitHub Contribution Battle Arena

A workshop template for building a retro arcade-themed website with Astro that compares GitHub contribution graphs of two users. This is the starting point — you'll build the app step by step using GitHub Copilot.

What you'll build by the end of the workshop

📚 Workshop

The workshop supports two tracks — follow the one that matches your preferred workflow:

• VS Code track — Chat, Plan Mode, Agent Mode, background agents, and editor-native review loops
• CLI track — copilot, @file context, /plan, autonomous edits, /fleet, /delegate, and /review

Part	Title	Copilot Focus
00	Overview	Track selection and learning goals
01	Setup & Context Engineering	Instructions, permissions, and environment setup
02	Plan & Scaffold	Planning the API and page architecture
03	Build the Game	Agentic implementation and iteration
04	Design-First Theming	Visual design planning and implementation
05	Polish & Parallel Work	Parallelism, reviews, and quality passes
06	Bonus & Extensions	Open-ended feature ideas and extra Copilot experiments

🚀 Quick Start

1. Create your own repo first by either:
   • clicking Use this template to create a new repo, or
   • forking this repository.
2. Choose your workshop path:
   • VS Code: clone your repo and open it in VS Code.
   • GitHub Copilot CLI: clone your repo locally, install copilot, and work from your terminal.
3. Follow the workshop guide

Prerequisites

Shared

• GitHub Copilot (Pro, Business, or Enterprise)
• Git
• Node.js

VS Code track

• VS Code v1.107+
• GitHub Copilot extension signed in

CLI track

• GitHub Copilot CLI (copilot)
• Node.js 22+ if you plan to install the CLI via npm install -g @github/copilot
• Or Homebrew / WinGet if you prefer a native package manager install

Technology Stack

• Framework: Astro v5
• Runtime: Node.js with @astrojs/node adapter
• Font: Press Start 2P (retro gaming font)
• API: GitHub's contribution graph API

License

MIT