Há um problema silencioso em cada projeto web com assistência de IA: seu agente de coding provavelmente está gerando código legado.
Não porque esteja quebrado. Mas porque foi treinado com anos de padrões de desenvolvimento web onde JavaScript resolvia tudo — e para quando o HTML e CSS nativos alcançaram essas soluções, os dados de treinamento já estavam fechados. Peça que construa um modal e provavelmente vai dar uma implementação de 40 linhas de JS. Peça um tooltip e vai procurar uma biblioteca. Peça um destaque de navegação sticky e não vai saber o que é CSS Anchor Positioning.
O time do Chrome do Google acabou de publicar uma resposta direta a isso: Modern Web Guidance.
O que é exatamente
Modern Web Guidance é um conjunto de agent skills — guias estruturadas que se conectam ao seu fluxo de trabalho com IA e redirecionam o agente para features modernas da plataforma web em vez de workarounds desatualizados.
Pense como uma camada de conhecimento curado que fica entre seus prompts e o output do agente. Quando pede que construa uma animação de accordion, não adivinha — consulta um guia revisado por especialistas que indica usar @starting-style e CSS transitions em vez de um toggle em JavaScript. Quando precisa um dialog, usa o elemento nativo <dialog> com suporte de closedby em vez de um stack de divs customizados.
As skills cobrem quatro áreas principais:
- Accessibility — auditoria e correção de padrões em toda sua app
- Performance — otimização de Core Web Vitals, LCP e INP
- User Experience — componentes responsivos, transições fluidas, padrões modernos de CSS
- Security — passkeys, WebAuthn, Content Security Policy
Está atualmente em early preview, e o time do Chrome está adicionando conteúdo ativamente.
O problema real que resolve
O time do Chrome é direto sobre por que isso existe. Os agentes de IA têm três modos de falha específicos para desenvolvimento web:
- Por padrão usam soluções antigas e desatualizadas — JavaScript onde CSS faria o trabalho melhor e com menos código.
- Frequentemente desconhecem — ou têm informações incorretas sobre — as features mais recentes da plataforma web.
- Fazem recomendações sem considerar os requisitos reais de suporte de browsers do seu projeto, ignorando os critérios de Baseline que importam para seu caso.
Modern Web Guidance aborda os três. Os guias são versionados, revisados por especialistas e se mantêm atualizados conforme a plataforma web evolui.
Instalação: escolha seu agente
É agnóstico em relação ao modelo. Funciona com o agente que você já usa.
Claude Code (três passos):
# 1. Adicione o marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Instale o plugin:
/plugin install modern-web-guidance@googlechrome
# 3. Recarregue os plugins:
/reload-plugins
CLI recomendada (se atualiza automaticamente):
npx modern-web-guidance@latest install
Também compatível com: GitHub Copilot CLI, Gemini CLI, Goose, JetBrains WebStorm (via Skill Manager), Antigravity e npx skills.
Como se usa
Uma vez instalado, invoca as skills diretamente do chat do seu agente. Alguns exemplos:
/modern-web-guidance performance
→ Otimiza Core Web Vitals, reduz latência de carga, melhora o INP.
/modern-web-guidance user-experience
→ Componentes responsivos, CSS transitions, padrões modernos de layout.
/modern-web-guidance accessibility
→ Auditoria completa de acessibilidade: semântica, gerenciamento de foco, ARIA, navegação por teclado.
Ou pode ir direto a um caso de uso específico com linguagem natural:
Update legacy modal window implementations to use the <dialog> element and animate them using modern CSS features.
Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning.
Implement a passkey-based login flow using the latest WebAuthn features.
O agente pega o guia correspondente, aplica o padrão moderno e gera código que realmente está atualizado.
Explore antes de instalar
Não está pronto para instalar? Pode explorar a biblioteca de skills pela CLI antes de tocar no seu projeto:
# Busque por prompt:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
# Recupere um guia específico:
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
O comando search devolve guias com scores de similaridade, contagens de tokens e as features específicas da plataforma web que cada uma usa. O comando retrieve despeja o Markdown completo do guia em seu terminal. Pode avaliar exatamente qual orientação seu agente vai receber antes de instalar qualquer coisa.
Combine com Chrome DevTools para agentes
O time do Chrome também documentou um fluxo de trabalho interessante: combinar Modern Web Guidance com Chrome DevTools para agentes. A ideia é executar auditorias de performance em tempo real e inspecionar a árvore de acessibilidade diretamente da sua sessão de agente, e depois aplicar correções de código usando as skills de guidance imediatamente. Auditar → identificar → corrigir, sem sair do seu ambiente de desenvolvimento.
Vale a pena instalar?
Se constrói UIs web com assistência de IA — sim, imediatamente.
A diferença entre o que CSS e HTML modernos podem fazer nativamente em 2025 e o que os agentes de IA tipicamente geram é real e significativa. Features como @starting-style, CSS Anchor Positioning, a Popover API, <dialog> nativo com closedby, container queries e transition-behavior são cross-browser e estão prontas para produção — mas a maioria dos agentes não as usa por padrão.
Modern Web Guidance fecha essa diferença. É um early preview, então espere mais skills em breve.
Instale, invoque uma vez no seu próximo componente web e veja o que seu agente deveria ter estado gerando todo esse tempo.
