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

What I Built ## The Problem ## The Solution ## 📸 Visualizing the "Truth" ## Main Features ## Responsive: works on devices with different screen sizes ## Tables with many columns become cards on narrow screens ## HTTP methods and statuses receive semantic colors ## Objects are formatted with better presentation ## Timers are designed for immediate identification ## Tables do not receive timestamps, so the values in the mobile version are displayed as records. ## My Experience with GitHub Copilot CLI ## 1. The "Spec-First" Strategy ## 2. The Golden Prompt ## 3.Problems along the way ## 4. Automating Governance with .github/copilot-instructions.md ## 5. The "Big Refactor" ## Conclusion GitHub Copilot CLI Challenge Submission This is a submission for the GitHub Copilot CLI Challenge I built Vero (Latin/Italian for Truth), a beautiful, simple and visual debugger for the modern web ecosystem. 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. 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. The philosophy was strictly defined before a single line of code was generated: Core (Minimal) + Plugins + Themes. 🎥 Video: Demo 🔗 Repository: github.com/tiagordebarros/vero 📦 JSR Package: jsr.io/@tiagordebarros/vero Table viewed on desktop: The same table viewed as a card on mobile: Table with semantic colors on desktop The same table with semantic colors on mobile devices 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. The colors and length of the bars clearly define the performance of the times. The mobile version displays timestamps within the card. Beautiful table with curves and semantic colors Example of records in a card generated from a table ... and many other features! 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". 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. 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: 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... 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. 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. 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. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: @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. Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: @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. CODE_BLOCK: @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. - 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. - 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. - 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.