La orientación web moderna 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 programación de los patrones heredados y a acercarlos a soluciones que aprovechan la potencia y las capacidades de la plataforma web moderna.
Instalación
Modern Web Guidance se puede instalar y usar con cualquier agente de programació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 compilada por el equipo de Chrome. Instalar Modern Web Guidance a través de la CLI de modern-web-guidance habilitará 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
Se ejecutará 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, Compila 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 skill, 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
claude plugin install modern-web-guidance@claude-plugins-official
CLI de Claude Code
La instalación de Modern Web Guidance para usar con la CLI de Claude Code requiere 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
Codex
codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome
CLI de Copilot
La instalación de Modern Web Guidance para usar 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
Grok
grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust
Kimi Code
/plugins install https://github.com/GoogleChrome/modern-web-guidance
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}]
Al leer 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 Modern Web Guidance?
La orientación sobre la Web moderna ofrece beneficios a los desarrolladores web en comparación con los modelos de IA no asistidos por tres razones distintas:
- Los agentes de programación con IA suelen recurrir a soluciones más antiguas y desactualizadas para los problemas modernos de desarrollo web. Estas soluciones suelen contener JavaScript para proporcionar funcionalidad a 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.
La guía de la Web moderna aborda estas deficiencias y garantiza 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 Modern Web Guidance?
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 habilidad del agente que le indica a tu agente de programació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 altura de línea 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 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 sugerencias 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, nueva o amplia, pero otros podrían ser de disponibilidad limitada. En los casos en 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 necesitan polyfills 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 un conjunto de evaluaciones que se calibran de forma continua para garantizar un resultado de calidad.
Las evaluaciones de casos de uso ejecutan un arnés de control de calidad automatizado para probar el comportamiento correcto del agente, con Playwright desempeñando un papel central:
- Para cada guía, se desarrolla un script 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 índice 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 básica. Una de estas evaluaciones no está guiada, lo que sirve como control, ya que usa los datos de entrenamiento predeterminados sin invocar la guía de la Web moderna para completar una tarea. Otra evaluación (el experimento) aborda la misma tarea con la guía de la Web moderna.
Nuestras evaluaciones se ejecutan varias veces por semana con modelos y agentes de codificación de vanguardia, lo que nos brinda una imagen clara del rendimiento de 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 agentivas 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 codificación con IA. Ahora puedes leer sobre las disciplinas y los casos de uso que proporciona la guía de la Web moderna.