Compila con la guía de la Web moderna
Modern Web Guidance es un conjunto de habilidades perdurables y verificadas por expertos que guían a tus agentes de programación de IA en muchos casos de uso comunes para crear experiencias web modernas que sean accesibles, tengan un buen rendimiento y sean seguras.
Instala con la CLI de modern-web-guidance (recomendado):
npx modern-web-guidance@latest install
Funciona con tu agente de programación de IA preferido
Modern Web Guidance se puede usar con tus agentes de programación de IA favoritos, lo que garantiza que tengas acceso a orientación sobre las prácticas recomendadas de la Web moderna en tu flujo de trabajo preferido.
npx skills
Instala Modern Web Guidance en tu proyecto con las habilidades de agente de Vercel:
npx skills add GoogleChrome/modern-web-guidance
Claude Code
Instala las habilidades de Modern Web Guidance para 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 de Copilot
Instala las habilidades de Modern Web Guidance para la CLI de Copilot:
# 1. Add the marketplace: /plugin marketplace add GoogleChrome/modern-web-guidance # 2. Install the plugin /plugin install modern-web-guidance@googlechrome
CLI de Antigravity
Instala las habilidades de orientación web moderna en la CLI de Antigravity:
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Mensajes para mejorar la experiencia del usuario
Prueba algunas de las siguientes instrucciones de ejemplo para invocar orientación web moderna en tu flujo de trabajo de programación asistido por IA y crear funciones nuevas, modernizar código heredado y acelerar tu app.
Crea nuevas experiencias del usuario
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.
Moderniza el código heredado
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.
Mejora la seguridad
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.
Mejora el rendimiento
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.
Usa las habilidades de orientación sobre la Web moderna con las Herramientas para desarrolladores de Chrome para agentes
Combina las Herramientas para desarrolladores de Chrome para agentes con las habilidades de Modern Web Guidance para mejorar tu flujo de trabajo de desarrollo web. Ejecuta auditorías de rendimiento en tiempo real, inspecciona árboles de accesibilidad y captura registros de la consola. Luego, aplica automáticamente correcciones precisas de código web moderno.
Más información sobre cómo contribuir
¿Tienes ideas para mejorar la guía de la Web moderna? Descubre cómo puedes contribuir.