O Modern Web Guidance é um conjunto de habilidades que incorpora conhecimento especializado em plataformas da Web, práticas recomendadas e dados de compatibilidade de navegadores diretamente nos seus agentes de programação. Isso ajuda a afastar seus agentes de programação de padrões legados e a direcioná-los para soluções que aproveitam o poder e os recursos da plataforma da Web moderna.
Instalação
O Modern Web Guidance pode ser instalado e usado com qualquer agente de programação que ofereça suporte a habilidades.
CLI modern-web-guidance (recomendado)
O método de instalação recomendado é pela CLI modern-web-guidance criada pela equipe do Chrome. A instalação do Modern Web Guidance pela CLI modern-web-guidance vai ativar as atualizações automáticas. É possível instalar pela CLI modern-web-guidance da seguinte maneira:
npx modern-web-guidance@latest install
Se você estiver desenvolvendo extensões do Chrome, recomendamos o seguinte comando:
npx modern-web-guidance@latest install --choose
Isso executa um assistente interativo para instalar as habilidades de acordo com suas preferências.
Se você preferir instalar o Modern Web Guidance sem usar a CLI modern-web-guidance, consulte as instruções específicas do agente a seguir. No entanto, a maioria dessas opções não é compatível com atualizações automáticas.
Antigravity
Baixe o Antigravity e ative "modern-web-guidance" durante o fluxo de instalação ou na página Configurações, em Personalizações e depois em Criar com plug-ins do Google.
CLI do Antigravity
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
CLI do Gemini
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
JetBrains WebStorm
Você encontra o Modern Web Guidance no Gerenciador de habilidades, disponível em Configurações > Assistente de IA > Habilidades. Selecione uma habilidade para abrir a página de detalhes dela. Para instalar a habilidade, clique no botão Instalar para aplicá-la à instância atual do ambiente de desenvolvimento integrado.
CLI do GitHub
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
claude plugin install modern-web-guidance@claude-plugins-official
CLI do Claude Code
A instalação do Modern Web Guidance para uso com a CLI do Claude Code envolve três etapas:
1. Adicione o marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Instale o plug-in do Marketplace:
/plugin install modern-web-guidance@googlechrome
3. Atualize os plug-ins:
/reload-plugins
Codex
codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome
CLI do Copilot
A instalação do Modern Web Guidance para uso com o Copilot requer duas etapas:
1. Adicione o marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Instale o plug-in do Marketplace:
/plugin install modern-web-guidance@googlechrome
Ganso
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Grok
grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust
Código Kimi
/plugins install https://github.com/GoogleChrome/modern-web-guidance
Explorar antes da instalação
Avalie a biblioteca de guias do Modern Web Guidance antes da instalação pesquisando com uma consulta ou recuperando nossos guias por ID. Para fazer isso, use o comando search da CLI para encontrar o ID do caso de uso usando um comando:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
Isso vai gerar um objeto JSON no terminal:
[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"ui-behaviors","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"ui-behaviors","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"ui-behaviors","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]
Ao ler os valores de description, você pode escolher o id que melhor reflete sua meta e usar o comando retrieve:
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
Nesse caso, o Markdown do guia para o caso de uso animate-to-from-top-layer vai aparecer no terminal. Para outros guias, substitua animate-to-from-top-layer por qualquer ID de guia válido.
Por que usar o Modern Web Guidance?
O Modern Web Guidance oferece um benefício ao desenvolvedor web em relação aos modelos de IA sem assistência por três motivos distintos:
- Os agentes de programação de IA tendem a usar soluções mais antigas e desatualizadas para problemas modernos de desenvolvimento web. Essas soluções geralmente contêm JavaScript para fornecer funcionalidades para problemas que são melhor resolvidos por APIs CSS e HTML modernas.
- Historicamente, os modelos de IA não têm conhecimento ou têm informações incorretas sobre os recursos mais recentes da plataforma da Web.
- Por fim, os modelos de IA tendem a fazer recomendações desatualizadas que não levam em conta os requisitos do projeto ou os critérios de suporte do navegador, em vez de adaptar as orientações aos requisitos Baseline de um determinado projeto.
O Modern Web Guidance resolve essas deficiências e garante que seu fluxo de trabalho de programação assistida por IA tenha as ferramentas para adotar os recursos mais recentes da plataforma da Web primeiro, com fallbacks em mente.
O que há no Modern Web Guidance?
O Modern Web Guidance inclui práticas recomendadas para mais de 100 casos de uso de desenvolvimento web em várias disciplinas principais. Nos bastidores, é uma habilidade de agente que instrui seu agente de programação sobre como chamar a CLI modern-web-guidance para encontrar e recuperar as melhores orientações para seu caso de uso.
- Experiência do usuário: transições de visualização, estilo CSS
scrollbar-colore animações de entrada e saída. - CSS: consultas de contêiner, espaços de cores modernos, como
oklch, layout de subgrade CSS,text-wrape corte de altura de linha de tipografia. - Performance: diagnósticos da Interaction to Next Paint (INP),
scheduler.yieldpara dividir tarefas longas, programação de tarefas em segundo plano e priorização de carregamento de imagens. - Formulários: campos de entrada com dimensionamento automático (
field-sizing: content) e estilos de validação precisos com:user-invalid. - Componentes de interface integrados: controle direto sobre caixas de diálogo, posicionamento de âncora CSS para dicas e
popover. - Acessibilidade: avisos de erro acessíveis e gerenciamento de foco do teclado.
- IA integrada: use modelos de cliente locais no dispositivo (APIs nativas de detecção de idioma, resumo e tradução).
- Chaves de acesso: registro, autenticação e gerenciamento de chaves de acesso.
Estes são alguns dos guias de cada categoria. Para ver todos os guias, acesse a lista completa.
Valor de referência
O Baseline esclarece aos desenvolvedores quais recursos da Web são interoperáveis nos principais mecanismos de navegador. Se um recurso da Web for Baseline, você poderá confiar no nível de compatibilidade do navegador. Os recursos da Web se enquadram em uma das três categorias definidas pelo Baseline:
- Disponibilidade limitada significa que o recurso não é interoperável.
- Recém-disponibilizado significa que o recurso se tornou interoperável nos últimos 30 meses.
- Amplamente disponível significa que o recurso é interoperável há pelo menos 30 meses.
Embora o Baseline seja uma definição para a interoperabilidade de recursos da Web, ele também é um aspecto configurável do seu projeto. Você pode escolher um destino de referência e configurar seu projeto para usá-lo adicionando-o ao arquivo AGENTS.md ou CLAUDE.md, por exemplo:
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance e substitutos de recursos
O Modern Web Guidance usa uma ampla variedade de recursos modernos da Web. Alguns deles podem ser de disponibilidade limitada, enquanto outros podem ser de disponibilidade recente ou ampla. Nos casos em que um recurso não está amplamente disponível, os guias de casos de uso fornecem aos agentes instruções específicas sobre como garantir uma compatibilidade mais ampla em navegadores que não oferecem suporte ao recurso. Em muitos casos, os substitutos são implementados como aprimoramentos progressivos, em que o recurso moderno pode ser usado sempre que houver suporte. Se forem necessários polyfills para navegadores não compatíveis, os agentes sempre serão instruídos a carregá-los de forma condicional para que só gerem um custo quando necessário.
Como a precisão é garantida?
Cada caso de uso no Modern Web Guidance contém um conjunto de avaliações que são calibradas continuamente para garantir uma saída de qualidade.
As avaliações de casos de uso executam uma estrutura de controle de qualidade automatizada para testar o comportamento correto do agente, com o Playwright desempenhando um papel central:
- Para cada guia, um script do Playwright é desenvolvido para testar se os detalhes de implementação do guia foram seguidos. Por exemplo, se
@media (prefers-reduced-motion: reduce)foi observado onde é um requisito. - Esses scripts do Playwright são calibrados continuamente em relação a uma implementação de demonstração de referência "correta" que espera uma taxa de aprovação de 100%. Por outro lado, os scripts verificam uma implementação deliberadamente falha que espera uma taxa de aprovação de 0%.
- Se uma ou ambas as implementações "correta" e deliberadamente falha não produzirem taxas de aprovação de 100% e 0%, respectivamente, um gerador vai tentar novamente de forma automática usando o contexto até que a calibração de 100% seja alcançada.
- Por fim, são aplicadas avaliações de ponta a ponta em um aplicativo de base. Uma dessas avaliações não é guiada, o que é um controle, usando os dados de treinamento padrão sem invocar o Modern Web Guidance para concluir uma tarefa. Outra avaliação (o experimento) aborda a mesma tarefa usando Modern Web Guidance.
Nossas avaliações são executadas várias vezes por semana com modelos e agentes de programação de última geração, o que nos dá uma visão clara do desempenho dos agentes com e sem nossa orientação. Em média, os resultados iniciais mostram uma melhoria de 37 pontos percentuais na adesão às práticas recomendadas modernas quando os agentes usam o Modern Web Guidance. No entanto, os resultados podem variar de acordo com os requisitos do projeto, o modelo, os comandos que você escreve e as ferramentas de programação agêntica que você prefere.
Próximas etapas
Agora você tem uma visão geral do Modern Web Guidance e do potencial que ele tem para facilitar a adoção das práticas recomendadas da Web moderna no seu fluxo de trabalho de programação de IA. Agora você pode conferir os guias fornecidos pelo Modern Web Guidance.