Modern Web Guidance es un conjunto de habilidades que incorporan la experiencia en la plataforma web, las prácticas recomendadas y los datos de compatibilidad del navegador directamente en tus agentes de codificación. Ayuda a alejar a tus agentes de codificación de los patrones heredados y, en cambio, a dirigirlos hacia soluciones que aprovechen la potencia y las capacidades de la plataforma web moderna.
Instalación
Modern Web Guidance se puede instalar y usar con cualquier agente de codificación que admita habilidades.
CLI de modern-web-guidance (recomendada)
El método de instalación recomendado es a través de la CLI de modern-web-guidance creada por el equipo de Chrome. Si instalas Modern Web Guidance a través de la CLI de modern-web-guidance, se habilitarán las actualizaciones automáticas. 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
Esto ejecuta un asistente interactivo para instalar las habilidades según tus preferencias.
Si prefieres instalar Modern Web Guidance sin usar la CLI de modern-web-guidance, consulta las siguientes instrucciones específicas del agente. Ten en cuenta que la mayoría de estas opciones no admiten actualizaciones automáticas.
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, Compilar con complementos de 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 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 requiere tres pasos:
1. Agrega el marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Instala el complemento desde el marketplace:
/plugin install modern-web-guidance@googlechrome
3. Vuelve a cargar los complementos:
/reload-plugins
CLI de Copilot
La instalación de Modern Web Guidance para usar con Copilot requiere dos pasos:
1. Agrega el marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Instala el complemento desde el 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 Modern Web Guidance antes de la instalación. Para ello, realiza una búsqueda con una consulta o recupera 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, el Markdown de la guía para el caso de uso animate-to-from-top-layer se mostrará 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 Modern Web Guidance?
Modern Web Guidance proporciona un beneficio al desarrollador web en comparación con los modelos de IA sin asistencia por tres motivos distintos:
- Los agentes de codificación de IA suelen usar soluciones más antiguas y obsoletas 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 conocían las funciones más recientes de la plataforma web o tenían información incorrecta sobre ellas.
- Por último, los modelos de IA suelen hacer recomendaciones obsoletas 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.
Modern Web Guidance aborda estas deficiencias y garantiza que tu flujo de trabajo de codificación asistido por IA tenga las herramientas para adoptar primero las funciones más recientes de la plataforma web y tener en cuenta las alternativas.
¿Qué incluye Modern Web Guidance?
Modern Web Guidance incluye prácticas recomendadas para más de 100 casos de uso de desarrollo web en varias disciplinas principales. En segundo plano, es una habilidad del agente que le indica a tu agente de codificación cómo llamar a la modern-web-guidance CLI para encontrar y recuperar la mejor orientación para tu caso de uso.
- Experiencia del usuario: Transiciones de vista, estilo
scrollbar-colorde CSS 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 interlineado de 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 carga de imágenes. - Formularios: Campos de entrada de ajuste automático (
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 o más.
Si bien Baseline es una definición para la interoperabilidad de funciones web, también es un aspecto configurable de tu proyecto. Puedes elegir un destino de Baseline 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...>
Modern Web Guidance y alternativas de funciones
Modern Web Guidance usa una amplia variedad de funciones web modernas. Algunas de ellas pueden ser Baseline Recientemente o Ampliamente disponibles, pero otras pueden tener Disponibilidad limitada. En los casos en los que una función no está Ampliamente disponible, las guías de casos de uso proporcionan a los agentes instrucciones específicas sobre cómo 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 necesitan polyfills para los navegadores no compatibles, siempre se 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 Modern Web Guidance contiene un conjunto de evaluaciones que se calibran continuamente para garantizar una salida de calidad.
Las evaluaciones de casos de uso ejecutan un arnés de QA automatizado para probar el comportamiento correcto del agente, y 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 es un requisito. - Estas secuencias de comandos de Playwright se calibran continuamente con una implementación de demostración de referencia "correcta" que espera una tasa de aprobación del 100%. Por otro lado, las secuencias de comandos se comparan con una implementación deliberadamente defectuosa que espera una tasa de aprobación del 0%.
- Si alguna de las implementaciones "correctas" y deliberadamente defectuosas no produce tasas de aprobación del 100% y 0%, respectivamente, un generador vuelve a intentarlo automáticamente con el contexto hasta que se alcanza 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 es un control, y usa los datos de entrenamiento predeterminados sin invocar Modern Web Guidance para completar una tarea. Otra evaluación (el experimento) aborda la misma tarea con Modern Web Guidance.
Nuestras evaluaciones se ejecutan varias veces por semana con modelos y agentes de codificación de estado del arte, 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 resultados iniciales muestran una mejora de 37 puntos porcentuales en el cumplimiento de las prácticas recomendadas modernas cuando los agentes están equipados con Modern Web Guidance. Sin embargo, los resultados pueden variar según los requisitos del proyecto, el modelo, las instrucciones que escribas y las herramientas de codificación de 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 modernas de la Web en tu flujo de trabajo de codificación de IA. Ahora puedes leer sobre las disciplinas y los casos de uso que proporciona Modern Web Guidance.