Pixel Pal: Gamifying the GitHub Copilot CLI Experience 🧙‍♂️⚔️

#devchallenge #githubchallenge #cli #githubcopilot

GitHub Copilot CLI Challenge Submission

What I Built

Pixel Pal is a VS Code extension that turns your coding workflow into an RPG adventure. It creates a visual feedback loop where your "pal" reacts to your development habits in real-time.

But it does more than just look cute—it is designed to gamify the adoption of GitHub Copilot CLI.

Developers often forget to use CLI tools. Pixel Pal sits in your sidebar and watches for specific "Magic Keywords." When you use GitHub Copilot (e.g., typing gh copilot in the terminal or planning AI prompts in comments like // copilot explain), the Pixel Pal casts a Magic Spell and awards you XP.

It turns "asking for help" into a "power move."

Key Features:

🧙‍♂️ AI Detection: Detects copilot or ai keywords in your code/terminal and triggers a "Cast Spell" animation to celebrate using the CLI.
⚔️ Git Combat: Typing git push triggers an "Attack" animation—you aren't just uploading code, you are slaying the backlog!
🏃 Flow State: The pet runs when you type, mirroring your momentum.
🛡️ Save Streaks: Saving your file (Ctrl+S) triggers a Jump animation and celebratory HUD message.
🐛 Error Empathy: If you have syntax errors, the pet looks hurt, encouraging you to fix bugs quickly to "heal" him.

Demo

Here is Pixel Pal in action. Watch how the character reacts to typing, saving, and specifically using Copilot commands.

My Experience with GitHub Copilot CLI

Building Pixel Pal was a meta-experience. I wanted to build a tool for Copilot users, while using Copilot to build it.

I used the GitHub Copilot CLI to help me navigate the complex VS Code Extension API. Specifically, it helped me bridge the gap between the Extension Backend (TypeScript) and the React Webview Frontend.

It generated the initial useEffect logic to handle the message passing system.
It suggested the "Debounce" logic to stop the running animation when I stopped typing.

The CLI allowed me to stay in my terminal workflow without constantly switching to documentation tabs. Pixel Pal is my tribute to that workflow—making the terminal feel like a magical place to build software.

Link to Source Code:
https://github.com/gbollybambam/pixel-pal

Top comments (22)

sam jha • Feb 22

Pixel Pal is such a creative angle for a CLI tool — gamification in the terminal is genuinely underexplored territory. The fact that it has real game mechanics (not just cosmetics) makes it so much more compelling.

I've been building CLI tools in Python lately and one thing I keep running into is: the challenge isn't writing the tool, it's making the UX feel good in the terminal. Rich library helped me a lot with that. Curious if you used any specific library for the pixel rendering, or did you build that from scratch?

Awesome submission!

Gbolahan Olanrewaju • Feb 23

Thanks Sam! Appreciate the kind words and I totally agree on the UX challenges.
I actually tried using a few rendering libraries at first, but they just didn't give me the exact look and feel I wanted. So, I decided to pivot and build it myself!
I used the VS Code Webview API to run a tiny React app in the sidebar. The visual engine is just HTML/CSS using pre-made sprite GIFs and the image-rendering: pixelated CSS rule to maintain that sharp, retro look without blurring.
Rich is an incredible library for Python UX though.
Thanks for the support and for checking it out! X