🖥️ Vibe Coding: Live Frontend Fixes

Everyone has been through this: you’re staring at a CSS bug—a navbar overlapping the content, a video iframe cut off at the edge, a modal that works on desktop and falls apart on mobile. You describe the problem to the agent, and it dives straight into the code, edits three files, runs the build... and the fix comes out wrong. You describe it again, it edits again, builds again — and now something else is broken.

The traditional AI workflow is backward: it guesses at code changes first and hopes the result turns out right. That's not how a developer works. A developer opens the browser, inspects the element, adjusts the CSS live, sees the result right away — and only then writes the permanent code. Vibe Coding makes your agent work exactly this way.

Before you do it any work, the skill requires the agent to confirm the active repository. It detects the current working directory and asks you clearly whether it's the right project for the session. No Git, no browser, no editing until you confirm. It's a small step that prevents costly damage: changing the wrong project.

With the workspace confirmed, the next move is create the sandbox before any analysis. The agent checks the git status; if there is uncommitted work, it pauses and offers a local backup. With a clean working tree, it asks for a short description of the task and immediately creates and switches to a local branch. You can experiment without fear: the main is never touched.

# 1. Verifica se há trabalho não commitado
git status

# 2. (se sujo) oferece backup local antes de começar
git add . && git commit -m "wip: backup antes do vibe"

# 3. cria a sandbox ANTES de abrir o navegador
git checkout -b vibe/fix-navbar-bleed

Now comes the part that gives the skill its name. The agent identifies the target URL—it could be a local dev server (http://localhost:3000) or a hosted staging/production URL. If it's local, it starts the server in the background; if it's hosted, it skips this step. Then it launches an automated browser visible, NOT headless, on your screen — you watch the automation happen live.

With the page open, the agent inspects the DOM (saving you from copying/pasting HTML) and injects CSS/JS live to test fixes — without editing any project files. It takes screenshots of the changes and shows them to you. Alternatively, it generates a plain JavaScript snippet for you to paste into your own browser's console.

document.querySelector('.navbar')
  .style.position = 'relative';

This is the heart of the skill. They are four mandatory approval gates. The agent literally can’t skip steps: it pauses and waits for your “go ahead” at every critical moment. Your code, your rules. Each gate has a clear boundary, and none lets the next step happen on its own.

With the strategy approved, the agent translates the browser's temporary injection into clean, permanent source code. It removes temporary utility classes, console logs, and hacks used during live testing. Notice the change in vocabulary: it’s "persist in the source", don't hardcode it. Only the final, polished fix becomes code — the git history stays clean, without a dozen failed attempts.

# Em PowerShell (Windows) NÃO encadeie com &&.
# Rode um comando por vez:
git add .
git commit -m "Fix: navbar bleed-through on staging"
git push origin vibe/fix-navbar-bleed

Output example — a complete session

See how the agent handles fixing a cropped video iframe inside a modal—from the repo check to the push, stopping at each gate.

🛠️ Practical exercises