O Modern Web Guidance é um conjunto de habilidades que incorporam experiência na plataforma da Web, práticas recomendadas e dados de compatibilidade do navegador diretamente nos seus agentes de programação. Ele ajuda a direcionar seus agentes de programação para longe de padrões legados e 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 ativa as atualizações automáticas. É possível instalar na 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. A maioria dessas opções não oferece suporte a atualizações automáticas.
Antigravity
Faça o download do Antigravity e ative "modern-web-guidance" durante o fluxo de instalação ou na página Configurações em Personalizações e 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ê pode encontrar 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 skill, clique no botão Instalar e aplique à 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 leva três etapas:
1. Adicione o marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Instale o plug-in no 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 leva duas etapas:
1. Adicione o marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Instale o plug-in no 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
Kimi Code
/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 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 seu 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":"user-experience","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":"user-experience","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":"user-experience","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 seu objetivo e usar o comando retrieve:
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
Nesse caso, o guia Markdown para o caso de uso animate-to-from-top-layer vai aparecer no terminal. Para outros casos de uso, substitua animate-to-from-top-layer por qualquer ID de caso de uso válido.
Por que usar o Modern Web Guidance?
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 da Web. Essas soluções geralmente contêm JavaScript para fornecer funcionalidade a problemas que são melhor resolvidos por APIs CSS e HTML modernas.
- Historicamente, os modelos de IA não tinham conhecimento ou tinham 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 consideram os requisitos do projeto ou os critérios de suporte do navegador, em vez de adaptar a orientação aos requisitos de Baseline de um determinado projeto.
O Modern Web Guidance resolve essas deficiências e garante que seu fluxo de trabalho de programação com tecnologia de IA tenha as ferramentas para adotar primeiro os recursos mais recentes da plataforma da Web, com alternativas em mente.
O que há na Modern Web Guidance?
O Modern Web Guidance inclui práticas recomendadas para mais de 100 casos de uso de desenvolvimento da Web em várias disciplinas principais. Por baixo dos panos, é uma habilidade do agente que instrui o agente de programação a chamar a CLI modern-web-guidance para encontrar e recuperar a melhor orientação para seu caso de uso.
- Experiência do usuário:transições de visualização, estilização
scrollbar-colordo CSS e animações de entrada e saída. - CSS:consultas de contêiner, espaços de cores modernos, como
oklch, layout de subgrade do CSS,text-wrape corte de altura da linha de tipografia. - Performance:diagnósticos de Interaction to Next Paint (INP),
scheduler.yieldpara dividir tarefas longas, programação de tarefas em segundo plano e priorização do carregamento de imagens. - Formulários:campos de entrada com ajuste automático de tamanho (
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:anúncios de erros acessíveis e gerenciamento do 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 casos de uso de cada disciplina. Para conferir todos os casos de uso, 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 de linha de base, você poderá confiar no nível de compatibilidade do navegador. Os recursos da Web se enquadram em uma das três categorias definidas pela linha de base:
- 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 de interoperabilidade de recursos da Web, ele também é um aspecto configurável do seu projeto. Você pode escolher uma meta de valor de referência e configurar seu projeto para usá-la adicionando-a ao arquivo AGENTS.md ou CLAUDE.md, por exemplo:
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance e substituições de recursos
O Modern Web Guidance usa uma ampla variedade de recursos da Web modernos. Alguns podem ser "Recém-disponível" ou "Disponível para todos", mas outros podem ter "Disponibilidade limitada". Nos casos em que um recurso não está disponível para todos, os guias de caso 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 melhorias progressivas em que o recurso moderno pode ser usado sempre que for compatível. Se forem necessários polyfills para navegadores sem suporte, os agentes sempre serão instruídos a carregá-los condicionalmente para que só haja um custo quando necessário.
Como a acurácia é 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 caso 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 propositalmente falha que espera uma taxa de aprovação de 0%.
- Se uma ou ambas as implementações "corretas" e propositalmente falhas não produzirem taxas de aprovação de 100% e 0%, respectivamente, um gerador vai tentar de novo automaticamente usando o contexto até atingir 100% de calibragem.
- Por fim, são aplicadas avaliações de ponta a ponta em um aplicativo de base. Uma dessas avaliações é não guiada, 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 o 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 ideia clara de como os agentes funcionam com e sem nossa orientação. Em média, os primeiros resultados 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 dependendo dos requisitos do projeto, do modelo, dos comandos que você escreve e das ferramentas de programação autônoma que você prefere.
Próximas etapas
Agora você tem uma visão geral do Modern Web Guidance e do potencial dele 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 ler sobre disciplinas e casos de uso fornecidos pelo Modern Web Guidance.