Modern Web Guidance



Modern Web Guidance é um conjunto de habilidades que incorpora conhecimento especializado sobre a plataforma da Web, práticas recomendadas e dados de compatibilidade de navegadores diretamente nos seus agentes de programação.

Instalar com a CLI modern-web-guidance (recomendado):

npx modern-web-guidance@latest install
Começar Ver no GitHub

Funciona com seu agente de programação de IA preferido

O Modern Web Guidance pode ser usado com seus agentes de programação de IA favoritos, garantindo que você tenha acesso a orientações sobre as práticas recomendadas da Web moderna no seu fluxo de trabalho preferido.
Ver todas as opções de instalação

Instale o Modern Web Guidance no seu projeto usando as habilidades de agente da Vercel:

npx skills add GoogleChrome/modern-web-guidance

Instale o Modern Web Guidance usando os plug-ins do Claude Code:

claude plugin install modern-web-guidance@claude-plugins-official

Instale as habilidades de Modern Web Guidance para a CLI do Copilot:

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome

Instale as habilidades de Modern Web Guidance para a CLI do Antigravity:

agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Assista à sessão Modern Web Guidance no Google I/O para saber mais sobre as habilidades e como elas melhoram seu fluxo de trabalho de desenvolvimento web assistido por IA.
Assista agora

Solicitações para melhorar a experiência do usuário

Teste alguns dos comandos de exemplo a seguir para invocar o Modern Web Guidance no seu fluxo de trabalho de programação assistida por IA para criar novos recursos, modernizar o código legado e acelerar seu app. 
Create an accordion-style stats component that smoothly animates on open and close.
 
Build a tab bar with a sliding highlight that tracks active items using CSS Anchor Positioning.
 
Design a dashboard card that uses container queries to adapt its layout to its own width.
 
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.
 
Implement a starter Content Security Policy (CSP) without breaking my app.
 
Perform a security audit of my site and suggest improvements.
 
Set up my app to begin preloading pages when users hover over important links.
 
My app has lots of long tasks, and its INP is affected. Help me fix it.
 
Help me improve my app's LCP.
Descubra como orientar seus assistentes de programação com IA para produzir códigos da Web interoperáveis e de última geração. Neste codelab introdutório, você vai auditar um app da Web legado e usar a ferramenta Modern Web Guidance para orientar os agentes em direção às práticas recomendadas modernas. Aprenda a definir metas de navegador de referência, otimizar as Core Web Vitals e transformar saídas de IA genéricas em soluções da Web de alto desempenho.
Começar
Combine o Chrome DevTools para agentes com as habilidades do Modern Web Guidance para melhorar seu fluxo de trabalho de desenvolvimento web. Faça auditorias de desempenho em tempo real, inspecione árvores de acessibilidade e capture registros do console. Depois, aplique automaticamente correções precisas de código da Web moderno.
Saiba mais

Saiba como contribuir

Tem ideias sobre como melhorar o Modern Web Guidance? Saiba como contribuir.
Saiba mais