🎉 Bonus & Extensions
You’ve built a fully functional GitHub Battle app — and set up custom agents, skills, and MCP servers along the way. Now it’s time to push further with open-ended challenges. Lean on everything from Parts 6–8 as you go.
Use Copilot CLI for all of these — mix @file context, /plan, /agent, /skills, /mcp, normal mode, and /review as needed.
🏆 Challenge 1: Winner Banner
Section titled “🏆 Challenge 1: Winner Banner”After both contribution graphs load, compare the totals and display a dynamic winner announcement.
What to build:
- Compare total contributions for both users
- Show ”🏆 {username} WINS! 🏆” with a celebratory style if there’s a clear winner
- Show ”🤝 IT’S A TIE! 🤝” if contributions are equal
- Add animation or confetti for extra flair
Prompt suggestion:
After both users’ contribution data loads, compare total contributions and display a winner banner. Show ”🏆 {username} WINS! 🏆” if one user has more contributions, or ”🤝 IT’S A TIE! 🤝” if equal. Make it visually exciting with CSS animations.
🏆 Challenge 2: Streak Counter
Section titled “🏆 Challenge 2: Streak Counter”Calculate and display each user’s longest consecutive contribution streak.
What to build:
- Analyze the contribution data day by day
- Find the longest run of consecutive days with at least one contribution
- Display the streak count prominently for each user
- Highlight who has the longer streak
Prompt suggestion:
Add a streak counter feature that analyzes each user’s contribution data to find their longest consecutive contribution streak. Display ”🔥 Longest Streak: X days” for each user below their contribution graph.
🏆 Challenge 3: Battle History
Section titled “🏆 Challenge 3: Battle History”Persist battle results so users can see their previous matchups.
What to build:
- Save each battle result to
localStorage(usernames, totals, winner, timestamp) - Add a “Recent Battles” section below the main battle area
- Show the last 5–10 battles with results
- Add a “Clear History” button
Prompt suggestion:
Save battle results to localStorage after each comparison. Add a “Recent Battles” section that displays the last 10 battles with usernames, contribution totals, the winner, and when the battle happened. Include a “Clear History” button.
🏆 Challenge 4: Sound Effects
Section titled “🏆 Challenge 4: Sound Effects”Add retro arcade sound effects using the Web Audio API — no external files needed.
What to build:
- Coin insert sound when the “Battle!” button is clicked
- Power up sound when results load successfully
- Explosion sound when an error occurs (user not found, API failure)
- A mute/unmute toggle button
Prompt suggestion:
Add retro arcade sound effects using the Web Audio API (no audio files). Play a coin insert sound on battle start, a power-up sound when results load, and an explosion sound on errors. Generate the sounds programmatically with oscillators and gain nodes. Include a mute toggle.
🏆 Challenge 5: Animated Battle Sequence
Section titled “🏆 Challenge 5: Animated Battle Sequence”Build suspense with a dramatic countdown before revealing results.
What to build:
- When “Battle!” is clicked, show a full-screen overlay
- Animate: “3…” → “2…” → “1…” → ”⚡ FIGHT! ⚡”
- Then reveal the contribution graphs with a dramatic entrance
- Use CSS animations or JavaScript timing
Prompt suggestion:
Add an animated battle sequence when the user clicks “Battle!”. Show a countdown overlay: “3…” then “2…” then “1…” then ”⚡ FIGHT! ⚡” with each step lasting about 1 second. After the countdown, reveal the results with a slide-in animation.
🏆 Challenge 6: Contribution Legend
Section titled “🏆 Challenge 6: Contribution Legend”Add a color scale legend that matches the contribution graph’s color palette.
What to build:
- A horizontal legend showing contribution intensity levels
- Labels from “Less” to “More”
- Use the actual color palette from the GitHub contribution API response
- Position it near the contribution graphs
Prompt suggestion:
Add a contribution legend below the graphs showing the color scale from the API’s color palette. Display a row of colored squares ranging from “Less” (lightest) to “More” (darkest), matching the actual contribution level colors returned by the API.
🏆 Challenge 7: Share Results
Section titled “🏆 Challenge 7: Share Results”Let users share their battle results with a single click.
What to build:
- A ”📋 Share Results” button that appears after a battle
- Copies a formatted text summary to the clipboard
- Include usernames, contribution totals, and the winner
- Show a brief “Copied!” confirmation message
Prompt suggestion:
Add a ”📋 Share Results” button that copies a formatted battle summary to the clipboard. The summary should include both usernames, their contribution totals, and who won. Use the Clipboard API and show a brief “Copied to clipboard!” confirmation.
💻 CLI Extras
Section titled “💻 CLI Extras”If you want to explore more of Copilot CLI’s feature set after the core workshop:
- Use
copilot -p "Write a conventional commit message for the current git diff"to generate a one-shot, response-only answer you can paste into Git. - Run
/share fileto save your session as Markdown for later reference. - Use
/sessionand/session planto inspect how the CLI is tracking your current work. - Try
/refineto turn a rough, stream-of-consciousness prompt into a clear one before you send it. - Explore
/chroniclefor session history and insights across your work.
🎊 Congratulations!
Section titled “🎊 Congratulations!”You’ve completed the Mona Mayhem: GitHub Battle workshop! Here’s what you accomplished:
What You Built
Section titled “What You Built”- ✅ A complete multi-page web application from a design specification
- ✅ A landing page with retro arcade theming and responsive layout
- ✅ A battle arena that fetches and compares real GitHub contribution data
- ✅ Interactive contribution graphs with color-coded activity levels
- ✅ Error handling, loading states, and accessibility improvements
- ✅ Responsive design that works across devices
What You Practiced
Section titled “What You Practiced”| Skill | What You Practiced |
|---|---|
| Context Engineering | Giving Copilot the right files, instructions, and constraints |
| Planning | Generating and refining implementation plans before coding |
| Agentic Coding | Delegating multi-file, multi-step work to Copilot |
| Design Iteration | Starting from a visual direction and refining toward a polished result |
| Review Discipline | Inspecting AI-generated changes before you commit them |
| Custom Agents & Instructions | Building specialized personas and always-on, path-scoped project rules |
| Skills | Packaging reusable expertise Copilot loads automatically |
| MCP Servers | Connecting Copilot to GitHub, a real browser, and live documentation |
🚀 Keep Going
Section titled “🚀 Keep Going”- 📺 VS Code YouTube Channel — Tips, tutorials, and what’s new
- 📖 GitHub Copilot Documentation — Official docs and guides
- 💻 GitHub Copilot CLI Docs — Installation, slash commands, and best practices
- 🎓 GitHub Copilot CLI for Beginners — A deeper, chapter-by-chapter course on agents, skills, and MCP
- 🌟 Awesome GitHub Copilot — Community agents, skills, and instruction files
- 🛠️ Copilot Dev Days Workshops — More hands-on workshops like this one
🙏 Thank You!
Section titled “🙏 Thank You!”Thanks for joining this workshop! You’ve experienced how GitHub Copilot can accelerate every phase of development — from planning and design to implementation and polish. The techniques you practiced here apply to any project, any framework, and any scale. Now go build something amazing! 🚀