Building Vero: How I Used Super Context with GitHub Copilot CLI to Create a Premium Visual Debugger

This is a submission for the GitHub Copilot CLI Challenge

What I Built

I built Vero (Latin/Italian for Truth), a beautiful, simple and visual debugger for the modern web ecosystem.

The Problem

We all use console.log. It's the most used debugging tool in the world, yet it hasn't evolved much visually. Reading logs often feels like staring at a wall of monochrome text.

The Solution

Vero is a "Visual Wrapper" for the native console. It doesn't try to reinvent the wheel; it just makes it roll smoother and look better.

Key Features:

• Zero Dependencies: The core is tiny (~80KB unzipped) and pure TypeScript.
• Isomorphic: Runs everywhere JavaScript runs (Deno, Node.js, Bun, Browsers).
• Visual Hierarchy: Uses a custom "Diamond" design system with semantic colors (Amethyst, Emerald, Amber) to make logs scanable.
• Responsive: It detects mobile terminals and automatically switches from Table view to Card view.
• Polymorphic: Same methods as the native console (and other new ones), without breaking the console.

The philosophy was strictly defined before a single line of code was generated: Core (Minimal) + Plugins + Themes.

Demo

🎥 Video: Demo
🔗 Repository: github.com/tiagordebarros/vero
📦 JSR Package: jsr.io/@tiagordebarros/vero

📸 Visualizing the "Truth"

Main Features

Responsive: works on devices with different screen sizes

Log leves - desktop:

Log leves - mobile:

Tables with many columns become cards on narrow screens

Table viewed on desktop:

The same table viewed as a card on mobile:

HTTP methods and statuses receive semantic colors

Table with semantic colors on desktop

The same table with semantic colors on mobile devices

Objects are formatted with better presentation

Objects are presented with “scattered” content, have circular protection, and feature variations in the colors of strings, numbers, booleans, and nulls to facilitate the identification of each value.

Timers are designed for immediate identification

The colors and length of the bars clearly define the performance of the times.

The mobile version displays timestamps within the card.

Tables do not receive timestamps, so the values in the mobile version are displayed as records.

Beautiful table with curves and semantic colors

Example of records in a card generated from a table

... and many other features!

My Experience with GitHub Copilot CLI

When I started this challenge, I had a strict constraint: very limited time. I needed to ship a "Senior Level" open-source library in record time without cutting corners on quality or ethics.

My strategy wasn't to ask Copilot to "write a debugger". That results in generic code. Instead, I developed a strategy I call "Super Context Injection".

1. The "Spec-First" Strategy

Before opening the CLI, I wrote detailed markdown specifications in a specs/ folder:

• specs/architecture.md: Defined the "Universal/Isomorphic" requirement.

• specs/brand-identity.md: Defined the color palette and Unicode glyphs usage.

• specs/roadmap.md: A checklist of features.

2. The Golden Prompt

I used the @workspace command in the Copilot CLI to feed this entire context at the start of every session. This transformed the AI from a "Code Generator" into a "Specialized Team Member".

My Initialization Prompt:

@workspace /newSession
I am starting the Vero Core development. Please read the specs to align your persona:
1. Architecture: specs/architecture.md
2. Design System: specs/brand-identity.md
3. Contribution Rules: CONTRIBUTING.md

Confirm you understand the "Zero Dependency" rule.

3.Problems along the way

It wasn't easy to create an MVP for Vero in such a short time frame. Without the help of Copilot CLI, it would have been impossible. Just to show you a few images of various errors and tests I had to work through with Copilot:

There would be countless mistakes. These were just a taste! I found out about the competition a week ago, and I only had the weekend and a few hours from Monday to Friday.
And with that came many long prompts, even though I had already provided a lot of context. Despite this, the context and detailed information helped to achieve promising results. Human review was just as important. In a way, sometimes Copilot helped me, and sometimes I helped Copilot. We were a team!

Prompts and more prompts...

4. Automating Governance with .github/copilot-instructions.md

This was a game-changer. I created a persistent instruction file that forced the CLI to:

• Always use Conventional Commits (feat, fix, chore).

• Never suggest npm packages for the Core (enforcing the architecture).

• Always use JSDoc with specific tags for the JSR documentation score.

Result? I didn't have to correct the AI's style. It generated production-ready commits like feat: implement responsive table layout automatically.

5. The "Big Refactor"

Midway through, the code became a monolith. I asked the CLI to refactor the project based on the Clean Architecture concept: dividing "Utils" (generic) from "Helpers" (domain-specific). The CLI understood the nuance and moved files to src/formatting/ and src/core/ flawlessly, respecting imports.

Conclusion

GitHub Copilot CLI didn't just write code; it acted as an Architectural Guardian. By feeding it my "Laws" (Zero Deps, Isomorphism), it prevented me from introducing accidental complexity. Vero is now a robust, maintainable project that feels like it was built by a team of ten, but it was just me and the CLI.