Modern Web Guidance es una habilidad del agente que aplica las prácticas recomendadas modernas a tu flujo de trabajo de programación asistida por IA. Te ayuda a alejar a tu agente de programación de las soluciones alternativas heredadas para problemas comunes de desarrollo web y, en cambio, a buscar soluciones que deberían usar funciones más nuevas de la plataforma web.
Instalación
Las habilidades de Modern Web Guidance se pueden instalar en una amplia variedad de agentes, lo que te permite conservar tu flujo de trabajo preferido y, al mismo tiempo, aprovechar la orientación que brindan.
CLI de modern-web-guidance (recomendada)
El método de instalación recomendado es a través de la CLI de modern-web-guidance compilada por el equipo de Chrome. Si instalas las habilidades a través de la CLI de modern-web-guidance, se mantendrán actualizadas automáticamente. Puedes instalar desde la CLI de modern-web-guidance de la siguiente manera:
npx modern-web-guidance@latest install
De manera opcional, si desarrollas extensiones de Chrome, te recomendamos el siguiente comando:
npx modern-web-guidance@latest install --choose
Se ejecutará un asistente interactivo para instalar las habilidades según tus preferencias.
Si prefieres usar las habilidades de Modern Web Guidance sin usar la CLI de modern-web-guidance, sigue leyendo para obtener información sobre cómo instalarlas en tu agente preferido.
Antigravity
Descarga Antigravity y habilita "modern-web-guidance" durante el flujo de instalación o desde la página Configuración en Personalizaciones y, luego, Complementos de Build with Google.
CLI de Antigravity
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Gemini CLI
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
JetBrains WebStorm
Puedes encontrar las habilidades de Modern Web Guidance en el Administrador de habilidades, disponible en Configuración > Asistente de IA > Habilidades. Selecciona una habilidad para abrir su página de detalles. Para instalar la habilidad, haz clic en el botón Instalar para aplicarla a la instancia actual del IDE.
CLI de GitHub
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
La instalación de Modern Web Guidance para usar con Claude Code consta de tres pasos:
1. Agrega el mercado:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Instala el complemento desde Marketplace:
/plugin install modern-web-guidance@googlechrome
3. Vuelve a cargar los complementos:
/reload-plugins
CLI de Copilot
La instalación de la guía de la Web moderna para usarla con Copilot requiere dos pasos:
1. Agrega el mercado:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Instala el complemento desde Marketplace:
/plugin install modern-web-guidance@googlechrome
Ganso
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Explora antes de la instalación
Evalúa la biblioteca de guías de habilidades de Modern Web Guidance antes de la instalación buscando con una consulta o recuperando nuestras guías por ID. Para ello, usa el comando search de la CLI para encontrar el ID del caso de uso con una instrucción:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
Esto generará un objeto JSON en tu 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}]
Si lees los valores de description, puedes elegir el id que mejor refleje tu objetivo y usar el comando retrieve.
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
En este caso, se mostrará la guía de Markdown para el caso de uso de animate-to-from-top-layer en la terminal. Para otros casos de uso, reemplaza animate-to-from-top-layer por cualquier ID de caso de uso válido.
¿Por qué usar la guía de la Web moderna?
Las habilidades de Modern Web Guidance brindan beneficios a los desarrolladores web en comparación con los modelos de IA sin asistencia por tres razones distintas:
- Los agentes de programación con IA suelen usar soluciones más antiguas y desactualizadas para los problemas modernos de desarrollo web. Estas soluciones suelen contener JavaScript para proporcionar funcionalidad para problemas que se resuelven mejor con las APIs modernas de CSS y HTML.
- Históricamente, los modelos de IA no han tenido conocimiento de las funciones más recientes de la plataforma web o han tenido información incorrecta sobre ellas.
- Por último, los modelos de IA suelen hacer recomendaciones desactualizadas que no tienen en cuenta los requisitos del proyecto ni los criterios de compatibilidad del navegador, en lugar de adaptar la orientación a los requisitos de Baseline de un proyecto determinado.
Las habilidades de Modern Web Guidance abordan estas deficiencias y garantizan que tu flujo de trabajo de programación asistido por IA tenga las herramientas para adoptar primero las funciones más recientes de la plataforma web, y con alternativas en mente.
¿Qué incluye la guía de la Web moderna?
La guía de la Web moderna incluye prácticas recomendadas para más de 100 casos de uso de desarrollo web en varias disciplinas principales. En segundo plano, es una sola habilidad del agente que le indica a tu agente de codificación cómo llamar a la CLI de modern-web-guidance para encontrar y recuperar la mejor orientación para tu caso de uso.
- Experiencia del usuario: Transiciones de vista, diseño de
scrollbar-colorCSS y animaciones de entrada y salida - CSS: Consultas de contenedores, espacios de color modernos como
oklch, diseño de subcuadrícula de CSS,text-wrapy recorte de la altura de línea de la tipografía. - Rendimiento: Diagnóstico de Interaction to Next Paint (INP),
scheduler.yieldpara dividir tareas largas, programación de tareas en segundo plano y priorización de la carga de imágenes - Formularios: Campos de entrada con ajuste automático de tamaño (
field-sizing: content) y estilos de validación precisos con:user-invalid. - Componentes de IU integrados: Control directo sobre diálogos, posicionamiento de anclaje de CSS para tooltips y
popover. - Accesibilidad: Anuncios de errores accesibles y administración del enfoque del teclado.
- IA integrada: Usa modelos de cliente locales integrados en el dispositivo (APIs nativas de detección de idioma, resumen y traducción).
- Llaves de acceso: Registro, autenticación y administración de llaves de acceso
Estos son algunos de los casos de uso de cada disciplina. Para ver todos los casos de uso, puedes consultar la lista completa de casos de uso.
Modelo de referencia
Baseline brinda claridad a los desarrolladores sobre qué funciones web son interoperables en los principales motores de navegadores. Si una función web es Baseline, puedes confiar en el nivel de compatibilidad del navegador. Las funciones web se dividen en una de las tres categorías definidas por Baseline:
- Disponibilidad limitada significa que la función no es interoperable.
- Recientemente disponible significa que la función se volvió interoperable recientemente en los últimos 30 meses.
- Ampliamente disponible significa que la función ha sido interoperable durante al menos 30 meses.
Si bien Baseline es una definición de interoperabilidad de funciones web, también es un aspecto configurable de tu proyecto. Puedes elegir un destino de referencia y, luego, configurar tu proyecto para que lo use agregándolo a tu archivo AGENTS.md o CLAUDE.md, por ejemplo:
This project's Baseline target is Baseline 2024.
<other project info...>
Orientación sobre la Web moderna y alternativas de funciones
Modern Web Guidance usa una amplia variedad de funciones web modernas. Algunos de estos podrían ser de disponibilidad básica, reciente o amplia, pero otros podrían tener disponibilidad limitada. En los casos en los que una función no está disponible de forma generalizada, las guías de casos de uso proporcionan a los agentes instrucciones específicas para garantizar una compatibilidad más amplia en los navegadores que no admiten la función. En muchos casos, las alternativas se implementan como mejoras progresivas en las que la función moderna se puede usar donde sea compatible. Si se necesita un polyfill para los navegadores no compatibles, siempre se les indica a los agentes que los carguen de forma condicional para que solo generen un costo cuando sea necesario.
¿Cómo se garantiza la precisión?
Cada caso de uso en la guía de la Web moderna contiene una guía, y la mayoría de los casos de uso se calibran de forma continua para dirigir a los agentes de IA hacia resultados de calidad.
Los casos de uso calibrados utilizan un arnés de QA automatizado para probar el comportamiento correcto del agente, en el que Playwright desempeña un papel central:
- Para cada guía, se desarrolla una secuencia de comandos de Playwright para probar si se siguieron los detalles de implementación de la guía, por ejemplo, si se observó
@media (prefers-reduced-motion: reduce)cuando era un requisito. - Estas secuencias de comandos de Playwright se calibran de forma continua en función de una implementación de demostración de referencia "correcta" que espera un índice de aprobación del 100%. En el otro extremo, las secuencias de comandos se comparan con una implementación deliberadamente defectuosa que espera un porcentaje de aprobación del 0%.
- Si alguna de las implementaciones "correctas" y deliberadamente defectuosas no produce tasas de aprobación del 100% y el 0%, respectivamente, un generador vuelve a intentarlo automáticamente con el contexto hasta que se logra una calibración del 100%.
- Por último, se aplican evaluaciones de extremo a extremo en una aplicación base. Una de estas evaluaciones no está guiada, lo que sirve como control, ya que usa los datos de entrenamiento predeterminados sin invocar las habilidades de Modern Web Guidance para completar una tarea. Otra evaluación (el experimento) aborda la misma tarea con las habilidades de orientación para la Web moderna.
Nuestras evaluaciones se ejecutan a diario con modelos y agentes de codificación de vanguardia, lo que nos brinda una imagen clara de qué tan bien se desempeñan los agentes con y sin nuestra orientación. En promedio, los primeros resultados muestran una mejora de 37 puntos porcentuales en el cumplimiento de las prácticas recomendadas modernas cuando los agentes cuentan con la guía de la Web moderna. Sin embargo, los resultados pueden variar según los requisitos del proyecto, el modelo, las instrucciones que escribas y las herramientas de codificación con agentes que prefieras.
Próximos pasos
Ahora tienes una descripción general de Modern Web Guidance y el potencial que tiene para facilitar la adopción de las prácticas recomendadas de la Web moderna en tu flujo de trabajo de programación con IA. Ahora puedes explorar las habilidades y los casos de uso que proporciona la guía de la Web moderna.