Crie com o guia da Web moderna
O Modern Web Guidance é um conjunto de habilidades perenes e avaliadas por especialistas que orientam seus agentes de programação de IA em muitos casos de uso comuns para criar experiências modernas na Web acessíveis, eficientes e seguras.
Instalar com a CLI modern-web-guidance (recomendado):
npx modern-web-guidance@latest install
Funciona com seu agente de programação de IA preferido
A orientação da Web moderna pode ser usada com seus agentes de programação de IA favoritos, garantindo que você tenha acesso a orientações sobre práticas recomendadas da Web moderna no seu fluxo de trabalho preferido.
npx skills
Instale o Modern Web Guidance no seu projeto usando as Habilidades do Agente da Vercel:
npx skills add GoogleChrome/modern-web-guidance
Claude Code
Instale as habilidades de orientação da Web moderna para o Claude Code:
# 1. Add the marketplace: /plugin marketplace add GoogleChrome/modern-web-guidance # 2. Install the plugin /plugin install modern-web-guidance@googlechrome # 3. Reload plugins /reload-plugins
CLI do Copilot
Instalar habilidades de orientação da Web moderna 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
CLI do Gemini
Instalar habilidades de orientação da Web moderna na CLI do Gemini:
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Solicitações para melhorar a experiência do usuário
Teste alguns dos comandos de exemplo a seguir para invocar orientações da Web modernas no seu fluxo de trabalho de programação com assistência de IA e criar novos recursos, modernizar códigos legados e acelerar seu app.
Criar novas experiências do usuário
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.
Modernizar código legado
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.
Melhorar a segurança
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.
Melhorar o desempenho
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.
Usar habilidades de orientação da Web moderna com o Chrome DevTools para agentes
Combine o Chrome DevTools para agentes com as habilidades de orientação da Web moderna para melhorar seu fluxo de trabalho de desenvolvimento da Web. Execute auditorias de desempenho em tempo real, inspecione árvores de acessibilidade e capture registros do console. Em seguida, aplique automaticamente correções precisas de código da Web moderno.
Saiba como contribuir
Tem ideias sobre como melhorar as orientações da Web moderna? Saiba como contribuir!