Hay un problema silencioso en cada proyecto web con asistencia de IA: tu agente de coding probablemente está generando código legacy.
No porque esté roto. Sino porque fue entrenado con años de patrones de desarrollo web donde JavaScript lo resolvía todo — y para cuando el HTML y CSS nativo alcanzaron esas soluciones, los datos de entrenamiento ya estaban cerrados. Pedile que construya un modal y probablemente te dé una implementación de 40 líneas de JS. Pedile un tooltip y va a buscar una librería. Pedile un highlight de navegación sticky y no va a saber qué es CSS Anchor Positioning.
El equipo de Chrome de Google acaba de publicar una respuesta directa a esto: Modern Web Guidance.
Qué es en concreto
Modern Web Guidance es un conjunto de agent skills — guías estructuradas que se conectan a tu flujo de trabajo con IA y redirigen al agente hacia features modernas de la plataforma web en lugar de workarounds desactualizados.
Pensalo como una capa de conocimiento curado que se ubica entre tus prompts y el output del agente. Cuando le pedís que construya una animación de acordeón, no adivina — consulta una guía revisada por expertos que le indica usar @starting-style y CSS transitions en lugar de un toggle en JavaScript. Cuando necesitás un dialog, usa el elemento nativo <dialog> con soporte de closedby en vez de un stack de divs custom.
Las skills cubren cuatro áreas principales:
- Accessibility — auditoría y corrección de patrones en toda tu app
- Performance — optimización de Core Web Vitals, LCP e INP
- User Experience — componentes responsivos, transiciones fluidas, patrones modernos de CSS
- Security — passkeys, WebAuthn, Content Security Policy
Está actualmente en early preview, y el equipo de Chrome está agregando contenido activamente.
El problema real que resuelve
El equipo de Chrome es directo sobre por qué existe esto. Los agentes de IA tienen tres modos de falla específicos para el desarrollo web:
- Por defecto usan soluciones viejas y desactualizadas — JavaScript donde CSS haría el trabajo mejor y con menos código.
- Frecuentemente desconocen — o tienen información incorrecta sobre — los features más recientes de la plataforma web.
- Hacen recomendaciones sin considerar los requisitos reales de soporte de browsers de tu proyecto, ignorando los criterios de Baseline que importan para tu caso.
Modern Web Guidance aborda los tres. Las guías están versionadas, revisadas por expertos y se mantienen actualizadas a medida que la plataforma web evoluciona.
Instalación: elegí tu agente
Es model-agnostic. Funciona con el agente que ya usás.
Claude Code (tres pasos):
# 1. Agregá el marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Instalá el plugin:
/plugin install modern-web-guidance@googlechrome
# 3. Recargá los plugins:
/reload-plugins
CLI recomendado (se actualiza automáticamente):
npx modern-web-guidance@latest install
También compatible con: GitHub Copilot CLI, Gemini CLI, Goose, JetBrains WebStorm (vía Skill Manager), Antigravity y npx skills.
Cómo se usa
Una vez instalado, invocás las skills directamente desde el chat de tu agente. Algunos ejemplos:
/modern-web-guidance performance
→ Optimiza Core Web Vitals, reduce latencia de carga, mejora el INP.
/modern-web-guidance user-experience
→ Componentes responsivos, CSS transitions, patrones modernos de layout.
/modern-web-guidance accessibility
→ Auditoría completa de accesibilidad: semántica, manejo del foco, ARIA, navegación por teclado.
O podés ir directo a un caso de uso específico con lenguaje natural:
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.
Implement a passkey-based login flow using the latest WebAuthn features.
El agente toma la guía correspondiente, aplica el patrón moderno y genera código que está realmente actualizado.
Explorá antes de instalar
¿No estás listo para instalar? Podés explorar la librería de skills desde la CLI antes de tocar tu proyecto:
# Buscá por prompt:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
# Recuperá una guía específica:
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
El comando search devuelve guías con scores de similitud, conteos de tokens y los features específicos de la plataforma web que cada una usa. El comando retrieve vuelca el Markdown completo de la guía en tu terminal. Podés evaluar exactamente qué orientación va a recibir tu agente antes de instalar nada.
Combinalo con Chrome DevTools para agentes
El equipo de Chrome también documentó un workflow interesante: combinar Modern Web Guidance con Chrome DevTools para agentes. La idea es ejecutar auditorías de performance en tiempo real e inspeccionar el árbol de accesibilidad directamente desde tu sesión de agente, y luego aplicar fixes de código usando las skills de guidance de inmediato. Auditar → identificar → corregir, sin salir de tu entorno de desarrollo.
¿Vale la pena instalarlo?
Si construís UIs web con asistencia de IA — sí, de inmediato.
La brecha entre lo que el CSS y HTML modernos pueden hacer nativamente en 2025 y lo que los agentes de IA típicamente generan es real y significativa. Features como @starting-style, CSS Anchor Positioning, la Popover API, <dialog> nativo con closedby, container queries y transition-behavior son cross-browser y están listas para producción — pero la mayoría de los agentes no las usa por defecto.
Modern Web Guidance cierra esa brecha. Es un early preview, así que esperá más skills pronto.
Instalalo, invocalo una vez en tu próximo componente web y fijate lo que tu agente debería haber estado generando todo este tiempo.
