O Modern Web Guidance é uma habilidade de agente que aplica práticas recomendadas modernas ao fluxo de trabalho de programação assistida por IA. Ele ajuda a direcionar o agente de programação para longe de soluções alternativas legadas para problemas comuns de desenvolvimento da Web e, em vez disso, para soluções que usam recursos mais recentes da plataforma da Web.
Instalação
As habilidades do Modern Web Guidance podem ser instaladas em uma grande variedade de agentes, oferecendo a capacidade de preservar seu fluxo de trabalho preferido, enquanto ainda se beneficia da orientação fornecida.
CLI do modern-web-guidance (recomendado)
O método de instalação recomendado é pela CLI do modern-web-guidance criada pela equipe do Chrome. A instalação das habilidades pela CLI do modern-web-guidance mantém as habilidades atualizadas automaticamente. Você pode instalar na CLI do modern-web-guidance da seguinte maneira:
npx modern-web-guidance@latest install
Opcionalmente, 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 as habilidades do Modern Web Guidance sem usar a CLI do modern-web-guidance, continue lendo para saber como instalá-las no agente de sua preferência.
Antigravity
Faça o download do Antigravity e ative o "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 as habilidades do 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. 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
A instalação do Modern Web Guidance para uso com o Claude Code requer 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. Recarregue os plug-ins:
/reload-plugins
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
Conheça antes da instalação
Avalie a biblioteca de guias de habilidades 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 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 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 será exibido 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?
As habilidades do Modern Web Guidance oferecem um benefício ao desenvolvedor da Web em relação aos modelos de IA não assistidos 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 para problemas que são melhor resolvidos por APIs modernas de CSS e HTML.
- 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 levam em consideração os requisitos do projeto ou os critérios de suporte do navegador, em vez de adaptar a orientação aos requisitos de referência de um determinado projeto.
As habilidades do Modern Web Guidance resolvem essas deficiências e garantem que o fluxo de trabalho de programação assistida por IA tenha as ferramentas para adotar primeiro os recursos mais recentes da plataforma da Web, e com alternativas 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 da Web em várias disciplinas principais. Por baixo dos panos, é uma habilidade de agente única que instrui o agente de programação a chamar a modern-web-guidance CLI para encontrar e recuperar a melhor orientação para seu caso de uso.
- Experiência do usuário:transições de visualização, estilo
scrollbar-colorde CSS e 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 da linha de tipografia. - Desempenho: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 de dimensionamento automático (
field-sizing: content) e estilos de validação precisos com:user-invalid. - Componentes de IU integrados:controle direto sobre caixas de diálogo, posicionamento de âncora CSS para dicas de ferramentas e
popover. - Acessibilidade:anúncios de erros 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 casos de uso de cada disciplina. Para conferir todos os casos de uso, consulte a lista completa.
Valor de referência
O valor de referência oferece clareza aos desenvolvedores sobre quais recursos da Web são interoperáveis nos principais mecanismos de navegador. Se um recurso da Web for de referência, você poderá confiar no nível de compatibilidade do navegador. Os recursos da Web se enquadram em uma das três categorias definidas pelo valor de referência:
- Disponibilidade limitada significa que o recurso não é interoperável.
- Recém-disponível 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 valor de referência seja uma definição para interoperabilidade de recursos da Web, ele também é um aspecto configurável do seu projeto. Você pode escolher um destino de valor 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 alternativas de recursos
O Modern Web Guidance usa uma ampla variedade de recursos modernos da Web. Alguns deles podem ser de valor de referência recém-disponível ou amplamente disponível, mas alguns podem ter disponibilidade limitada. 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, as alternativas são implementadas como melhorias progressivas em que o recurso moderno pode ser usado sempre que for compatível. Se um polyfill for necessário para navegadores não compatíveis, os agentes sempre serão instruídos a carregá-los condicionalmente para que só incorram em um custo quando necessário.
Como a precisão é garantida?
Cada caso de uso no Modern Web Guidance contém um guia, e a maioria dos casos de uso é calibrada continuamente para direcionar os agentes de IA para uma saída de qualidade.
Os casos de uso calibrados usam um harness de QA automatizado para testar o comportamento correto do agente, com 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 quando é 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 com falhas que espera uma taxa de aprovação de 0%.
- Se uma ou ambas as implementações "corretas" e deliberadamente com falhas não produzirem taxas de aprovação de 100% e 0%, respectivamente, um gerador vai tentar novamente usando o contexto até que a calibração de 100% seja alcançada.
- Por fim, as avaliações de ponta a ponta em um aplicativo base são aplicadas. Uma dessas avaliações não é guiada, que é um controle, usando os dados de treinamento padrão sem invocar as habilidades do Modern Web Guidance para concluir uma tarefa. Outra avaliação (o experimento) aborda a mesma tarefa usando as habilidades do Modern Web Guidance.
Nossas avaliações são executadas diariamente com modelos e agentes de programação de ponta, oferecendo uma imagem 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 estão equipados com 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 de agentes preferidas.
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 de práticas recomendadas modernas da Web no fluxo de trabalho de programação de IA. Agora você pode explorar as habilidades e os casos de uso fornecidos pelo Modern Web Guidance.