Frontends com Vibecoding Capítulo: Conduzir um programa de modernização em ondas Trechos: 6 pedidos prontos para colar no seu agente Leia o LEIA-ME.txt desta pasta antes de usar. A página do capítulo explica a decisão; estes trechos só executam o que a página já decidiu. O primeiro trecho é o pedido que abre o programa inteiro. Os cinco seguintes são as ondas, uma a uma, para quando você quiser conduzir cada rodada separada. ### O que faz: dispara o programa inteiro de modernização, com as cinco ondas em ordem ### Onde entra: no início do projeto, com o repositório anexado ou o endereço do site no ar ### Cuidado: cada onda só começa depois que você aprova a anterior; o agente não decide isso sozinho PROGRAMA DE MODERNIZAÇÃO DE FRONTEND EM 5 ONDAS, para um projeto que JÁ EXISTE. Contexto: anexo o repositório (ou a URL no ar). Quero modernizar de ponta a ponta a stack de frontend, a navegabilidade, os menus, a UX, o sistema visual, o movimento/3D e a performance, tudo a partir DESTA única demanda, executada em CINCO ONDAS complementares e decisivas. Você é o orquestrador. Regras gerais (valem para todas as ondas): - Trabalhe por ondas, na ordem. NÃO pule a Onda 1. Cada onda só começa depois que eu aprovar o resultado da anterior. - Dentro de cada onda, despache vários SUBAGENTES ESPECIALISTAS em paralelo, cada um com um escopo DISJUNTO (dois agentes nunca editam o mesmo arquivo). Para escrita concorrente, use branches ou git worktrees separados e consolide ao fim. - A Onda 1 é 100% READ-ONLY: ninguém altera arquivo. As Ondas 2 a 5 escrevem sempre em branch, com commit pequeno por mudança. - Toda mudança tem antes/depois e critério verificável. MEÇA, não chute: Lighthouse e web-vitals (RUM) no p75, axe-core para a11y. - Preserve o que funciona: zero regressão visual, de a11y ou de performance. Rode os quality gates (tsc, lint, testes, build, Lighthouse CI) ao fim de cada onda; se reprovar, conserte antes de seguir. - Padrão inegociável em tudo: contraste WCAG AA nos dois temas; foco visível; nada comunicado SÓ por cor ou SÓ por movimento; prefers-reduced-motion respeitado com toggle; estado base sempre visível; nenhum valor de cor/tamanho/espaçamento solto (tudo via token). ONDA 1 - DIAGNÓSTICO E MAPA (read-only): agentes paralelos detectam stack/build/render, medem a baseline de Core Web Vitals e de WCAG 2.2, inventariam tokens e componentes e mapeiam rotas e fluxos. Saída: UM relatório com tabela de achados (severidade x esforço x impacto) e um backlog priorizado que alimenta as ondas seguintes. Separe fato medido de inferência. ONDA 2 - UX E NAVEGAÇÃO: agentes paralelos corrigem information scent e microcopy (rótulos que descrevem a ação), arquitetura de informação e fluxos, os estados que faltam (vazio, carregando, erro, sucesso) e os padrões de navegação por contexto (nav semântica vs role=menu de ação, drawer, bottom nav na zona do polegar, command palette, breadcrumbs), mobile-first. Saída: mudanças com antes/depois. ONDA 3 - SISTEMA VISUAL E IDENTIDADE: agentes paralelos normalizam tokens OKLCH + dark mode real, padronizam o set de ícones (mesmo traçado, cor por token, aria), tipografia variable self-host, ilustrações e empty states em SVG com fill próprio, e otimizam imagens (AVIF/WebP via Sharp/Squoosh, dimensões para CLS zero). Tudo amarrado a UM arquivo de tokens. ONDA 4 - MOVIMENTO, 3D E MICROINTERAÇÕES: agentes paralelos adicionam reveal scroll-driven e View Transitions nativos, microinterações com Motion, 3D leve com React Three Fiber/Three.js (com fallback e budget de polígonos/peso/fps) e vetor com Rive/Lottie. Cada animação tem função; estado base visível; anime só transform/opacity; prefers-reduced-motion com toggle. ONDA 5 - PERFORMANCE, ACESSIBILIDADE E DEPLOY: agentes paralelos otimizam CWV na raiz (imagem, fonte, JS, scheduler.yield para INP), zeram violações WCAG no axe-core/Lighthouse corrigindo por TOKENS (e propagando aos irmãos), montam os quality gates encadeados que bloqueiam deploy, e a camada de descoberta (JSON-LD, sitemap só com URLs 200, IndexNow). Saída: pipeline verde e deploy. Ao final de CADA onda entregue: (1) o que mudou e por que; (2) os números antes/depois; (3) os arquivos tocados; (4) o que fica para a próxima onda. Comece pela Onda 1 e espere meu OK para avançar. ### O que faz: faz o diagnóstico e o mapa do projeto, sem alterar nenhum arquivo ### Onde entra: na primeira onda, antes de qualquer mudança ### Cuidado: confira a árvore de trabalho ao fim; qualquer arquivo modificado reprova a rodada ONDA 1 - DIAGNÓSTICO E MAPA (read-only) de um projeto frontend existente. Objetivo: produzir UM retrato fiel do projeto e um backlog priorizado, SEM alterar nenhum arquivo. Despache subagentes especialistas em PARALELO, cada um com escopo disjunto e em modo somente leitura: - Agente STACK: detecte linguagem, framework, bundler, gerenciador de pacotes, versão de cada dependência crítica e o modo de renderização (SSG/SSR/CSR/ilhas). Aponte o que é legado (ex.: Webpack/Babel, CSS-in-JS de runtime) e o que é atual. - Agente PERFORMANCE: meça a baseline de Core Web Vitals com Lighthouse e, se houver dados, RUM (web-vitals) no p75 - LCP, INP, CLS. Liste os 5 maiores ofensores (imagem, fonte, JS, layout shift) com número. - Agente ACESSIBILIDADE: rode axe-core/Pa11y nas telas principais, nos dois temas, e liste violações WCAG 2.2 por critério (contraste, foco, teclado, alvo de toque, nome acessível). - Agente DESIGN: inventarie tokens e componentes; aponte cores/tamanhos/espaçamentos hardcoded, contraste fraco, duplicação e inconsistência visual. - Agente FLUXOS: mapeie rotas, navegação e os fluxos críticos; marque estados ausentes (vazio, carregando, erro) e rótulos/CTAs genéricos. Consolide tudo em UM relatório com: 1. Sumário do projeto (stack, render, tamanho do bundle). 2. Tabela de achados: ID, área, descrição, severidade (alta/média/baixa), esforço (P/M/G) e impacto. 3. Backlog priorizado por impacto/esforço, agrupado pelas ondas 2 a 5. 4. Separe explicitamente FATO MEDIDO de INFERÊNCIA - número vem de ferramenta, não de impressão. NÃO altere nenhum arquivo do projeto nesta onda. A saída é só o relatório. ### O que faz: arruma o caminho que a pessoa percorre: rótulos, fluxos, estados e navegação ### Onde entra: na segunda onda, depois do diagnóstico aprovado ### Cuidado: cor e tipografia não entram aqui; misturar as duas ondas faz repintar duas vezes ONDA 2 - UX E NAVEGAÇÃO de um projeto frontend existente. Use o backlog da Onda 1. Despache subagentes especialistas em PARALELO, escopos disjuntos, escrevendo em branch (commits pequenos): - Agente SCENT/MICROCOPY: troque rótulos e CTAs genéricos (Comece agora, Continuar, Saiba mais, Enviar) por rótulos que descrevem a AÇÃO e o destino (Criar conta grátis, Ver planos, Baixar PDF). Cada item de menu deve dizer o que o usuário encontra ao clicar. Entregue uma tabela: rótulo atual -> proposto -> por que tem mais aroma de informação. - Agente FLUXOS/IA: revise a arquitetura de informação e os caminhos críticos; reduza passos e becos sem saída; proponha o mapa de navegação revisado. - Agente ESTADOS: garanta que TODA tela com dados trata vazio, carregando, erro e sucesso - com mensagem útil e ação de saída. Skeleton com a forma do conteúdo, não spinner solto. - Agente NAVEGAÇÃO: aplique o padrão certo por contexto - navegação de site usa