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 con navegadores directamente en tus agentes de programación. Ayuda a alejar a tus agentes de programación de los patrones heredados y, en su lugar, los orienta hacia soluciones que aprovechan el poder 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 (recomendado)
El método de instalación recomendado es a través de la CLI de modern-web-guidance que creó 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 instalarla desde la CLI de modern-web-guidance de la siguiente manera:
npx modern-web-guidance@latest install
De manera opcional, si estás desarrollando 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 para cada 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, Build with Google Plugins.
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 y aplícala 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 usarla con la CLI de 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
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 un mensaje:
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":"ui-behaviors","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":"ui-behaviors","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":"ui-behaviors","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á en la terminal la guía de Markdown para el caso de uso de animate-to-from-top-layer. Para otras guías, reemplaza animate-to-from-top-layer por cualquier ID de guía válido.
¿Por qué usar Modern Web Guidance?
Modern Web Guidance ofrece un beneficio al desarrollador web en comparación con los modelos de IA sin asistencia por tres razones distintas:
- Los agentes de IA para programación suelen recurrir de forma predeterminada a 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 han estado al tanto de las funciones más recientes de la plataforma web o tienen información incorrecta sobre ellas.
- Por último, los modelos de IA tienden a 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 nuevas de la plataforma web, teniendo 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 de 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 vistas, diseño de CSS
scrollbar-colory 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 carga de imágenes. - Formularios: Campos de entrada con ajuste de tamaño automático (
field-sizing: content) y estilos de validación precisos con:user-invalid. - Componentes de IU integrados: Control directo sobre los diálogos, posicionamiento de anclaje de CSS para los cuadros de información 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.
Estas son algunas de las guías de cada categoría. Para ver todas las guías, puedes consultar la lista completa de guías.
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 de Baseline, puedes confiar en el nivel de compatibilidad con el navegador. Las funciones web se dividen en una de las tres categorías que define Baseline:
- Disponibilidad limitada significa que la función no es interoperable.
- Disponible recientemente significa que la función se volvió interoperable en los últimos 30 meses.
- Ampliamente disponible significa que la función es interoperable desde hace al menos 30 meses.
Si bien Baseline es una definición para la interoperabilidad de las funciones web, también es un aspecto configurable de tu proyecto. Puedes elegir un objetivo 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 resguardos de funciones
Modern Web Guidance usa una amplia variedad de funciones web modernas. Algunas de estas funciones pueden ser de disponibilidad reciente o amplia de Baseline, pero otras pueden ser de disponibilidad limitada. En los casos en 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 mayor compatibilidad en los navegadores que no admiten la función. En muchos casos, los resguardos 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 de Modern Web Guidance 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 entorno 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 que prueba si se siguieron los detalles de implementación de la guía, por ejemplo, si se observó
@media (prefers-reduced-motion: reduce)donde 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 realizan verificaciones en una implementación con fallas deliberadas que espera una tasa de aprobación del 0%.
- Si alguna de las implementaciones "correctas" o deliberadamente defectuosas, o ambas, no producen tasas de aprobación del 100% y del 0%, respectivamente, un generador vuelve a intentarlo automáticamente usando el contexto hasta que se logre 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 la 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 programación de vanguardia, lo que nos da una idea 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 cuentan con Modern Web Guidance. Sin embargo, los resultados pueden variar según los requisitos de tu proyecto, el modelo, las instrucciones que escribas y tus herramientas de programación de agentes preferidas.
Próximos pasos
Ahora tienes una descripción general de Modern Web Guidance y su potencial 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 guías que proporciona Modern Web Guidance.