🖥️ Vibe Coding: correções de frontend ao vivo

Todo mundo já passou por isso: você encara um bug de CSS — uma navbar vazando por cima do conteúdo, um iframe de vídeo cortado na borda, um modal que funciona no desktop e desmonta no mobile. Você descreve o problema para o agente e ele mergulha direto no código, edita três arquivos, roda o build... e a correção sai errada. Você descreve de novo, ele edita de novo, builda de novo — e agora quebrou outra coisa.

O fluxo tradicional de IA é de trás para frente: ele chuta mudanças de código primeiro e torce para o resultado ficar certo. Não é assim que um dev trabalha. Um dev abre o navegador, inspeciona o elemento, ajusta o CSS ao vivo, vê o resultado na hora — e só então escreve o código permanente. O Vibe Coding faz o seu agente trabalhar exatamente assim.

Antes de fazer qualquer trabalho, a skill obriga o agente a confirmar o repositório ativo. Ele detecta o diretório de trabalho atual e te pergunta, em alto e bom som, se é o projeto certo para a sessão. Nada de git, nada de browser, nada de edição até você confirmar. É um passo barato que previne um dano caro: mexer no projeto errado.

Confirmado o workspace, a próxima jogada é criar a sandbox antes de qualquer análise. O agente verifica o git status; se houver trabalho não commitado, ele pausa e oferece um backup local. Com a árvore limpa, pede uma descrição curta da tarefa e imediatamente cria e troca para uma branch local. Você experimenta sem medo: a main nunca é tocada.

# 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

Agora vem a parte que dá nome à skill. O agente identifica a URL alvo — pode ser um dev server local (http://localhost:3000) ou uma URL hospedada de staging/produção. Se for local, ele sobe o servidor em background; se for hospedada, pula esse passo. Então dispara um navegador automatizado visível, NÃO headless, na sua tela — você assiste a automação acontecer ao vivo.

Com a página aberta, o agente inspeciona o DOM (te poupando de copiar/colar HTML) e injeta CSS/JS ao vivo para testar correções — sem editar nenhum arquivo do projeto. Ele tira screenshots dos ajustes e mostra para você. Alternativamente, gera um snippet de JavaScript puro para você colar no console do seu próprio navegador.

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

Esta é a alma da skill. São quatro portões de aprovação obrigatórios. O agente literalmente não consegue pular etapas: ele pausa e espera o seu "pode ir" em cada momento crítico. Seu código, suas regras. Cada portão tem uma fronteira clara e nenhum permite que o próximo aconteça sozinho.

Com a estratégia aprovada, o agente traduz a injeção temporária do navegador em código-fonte limpo e permanente. Ele remove utility classes temporárias, console logs e gambiarras usadas no teste ao vivo. Repare na mudança de vocabulário: é "persistir na fonte", não "hardcodar". Só a correção final e perfeita vira código — o histórico do git fica limpo, sem uma dúzia de tentativas falhas.

# 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

Exemplo de saída — uma sessão completa

Veja como o agente conduz a correção de um iframe de vídeo cortado dentro de um modal — do check de repo ao push, parando em cada portão.

🛠️ Exercícios práticos