Chrome ensina agentes de programação a escrever sem gambiarras: o sucesso nas tarefas sobe de 55% para 92%

Peça ao Claude ou ao Codex para criar uma janela modal e, com grande probabilidade, você receberá um <div> com overlay, gerenciamento manual de foco e um monte de JS. Enquanto isso, o navegador tem há muito tempo o <dialog> com showModal(): o fundo, o foco e o fechamento com Escape funcionam de fábrica. Os modelos conhecem essas coisas, mas por hábito escolhem o padrão mais frequente nos dados de treinamento. A equipe do Chrome decidiu atacar esse problema diretamente.

O que foi lançado

O projeto modern-web-guidance chegou à versão 1.0. Ele foi desenvolvido junto com Firefox, MDN e Edge. Dentro há mais de 200 guias escritos à mão (cerca de 1,7 MB) sobre como resolver tarefas típicas de frontend com os recursos da própria plataforma. Exemplos: CSS.highlights destaca trechos de texto sem uma chuva de <span>, field-sizing estica o textarea conforme a digitação e <dialog> substitui modais caseiros.

Os guias são entregues ao agente como uma skill mais uma CLI com busca RAG agêntica. O autor diz que passou nove meses procurando um jeito de não inflar a janela de contexto e de não depender da mecânica de ativação do MCP. A descrição da skill foi ajustada para que ela seja acionada justamente em tarefas de frontend. A stack de busca pesava inicialmente cerca de 500 MB na versão nativa; agora é JS puro de ~7 MB, e a busca leva cerca de 10 ms em um processador comum.

Números e verificação

Os autores montaram uma infraestrutura de avaliação. Codex, Claude e agy foram executados em 200 tarefas, primeiro sem a skill e depois com ela. São verificadas cerca de 1 700 afirmações com base em Playwright e análise de AST. Sem os guias, 55% das verificações passam; com os guias, 92%.

A avaliação também serve para a tarefa inversa: se o agente já lida bem com um padrão sem dicas, o guia pode ser removido. Segundo o autor, algumas coisas que a equipe considerava ponto fraco dos modelos se mostraram mais conhecidas por eles do que o esperado.

Outra novidade se chama legacy-scan. É um scanner determinístico treinado em 30 mil repositórios do GitHub. Ele encontra padrões obsoletos que o agente pode substituir por modernos. A precisão média em repositórios reservados para validação é de 92%.

Como experimentar

Tudo é instalado via npx:

• npx modern-web-guidance@latest install conecta a skill
• search "animate dialog modal" busca nos guias
• legacy-scan ./src verifica o seu código

A telemetria é desativada com a variável DISABLE_TELEMETRY=1. Vale fazer isso logo de início se você trabalha com código fechado.

Limitações e conclusão

A principal ressalva é que o aumento de 55% para 92% foi medido no benchmark próprio dos autores. As tarefas e verificações foram escolhidas para combinar com os guias, então no seu projeto o ganho pode ser mais modesto. Além disso, as APIs modernas exigem suporte nos navegadores-alvo, e o trabalho do agente ainda precisa ser checado quanto à compatibilidade com o seu público.

A conclusão prática é simples. Se você escreve frontend com ajuda de agentes, instale a skill e rode o legacy-scan no seu código. O primeiro passo reduz o volume de JS desnecessário em novas tarefas; o segundo mostra quantas gambiarras se acumularam. Uma ideia mais geral para quem constrói ferramentas de agentes: um conjunto restrito de conhecimento especializado, entregue de forma compacta e verificável com testes próprios, muitas vezes rende mais do que esperar pela próxima versão do modelo.