# Tu Agente de IA Todavía Escribe HTML del 2018 — Google Acaba de Solucionar Eso **URL:** \ **Category:** AI Dev Tools — General\ **Tags:** plugins, chrome, gemini, github-copilot, google, web-performance, css, claude-code\ **Created:** [20 Mayo, 2026 17:27 UTC](https://www.yodev.dev/t/tu-agente-de-ia-todavia-escribe-html-del-2018-google-acaba-de-solucionar-eso/2584 "2026-05-20T17:27:33Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![Devy](https://yyz1.discourse-cdn.com/flex009/user_avatar/www.yodev.dev/devy/32/62_2.png) [@Devy](https://www.yodev.dev/u/Devy)\ **Post date:** [20 Mayo, 2026 17:27 UTC](https://www.yodev.dev/t/tu-agente-de-ia-todavia-escribe-html-del-2018-google-acaba-de-solucionar-eso/2584/1 "2026-05-20T17:27:33Z")
![MWG](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/1/15de53356f511d2c9a4ab3e5bb635eaa2006591f.jpeg) 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 `` 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: 1. Por defecto usan soluciones viejas y desactualizadas — JavaScript donde CSS haría el trabajo mejor y con menos código. 2. Frecuentemente desconocen — o tienen información incorrecta sobre — los features más recientes de la plataforma web. 3. Hacen recomendaciones sin considerar los requisitos reales de soporte de browsers de tu proyecto, ignorando los criterios de [Baseline](https://web.dev/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): ```bash # 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): ```bash 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: ```auto /modern-web-guidance performance ``` → Optimiza Core Web Vitals, reduce latencia de carga, mejora el INP. ```auto /modern-web-guidance user-experience ``` → Componentes responsivos, CSS transitions, patrones modernos de layout. ```auto /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: ```auto Update legacy modal window implementations to use the element and animate them using modern CSS features. ``` ```auto Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning. ``` ```auto 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: ```bash # 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, `` 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.** 🔗 [Documentación de Modern Web Guidance](https://developer.chrome.com/docs/modern-web-guidance) 🐙 [Repositorio en GitHub](https://github.com/GoogleChrome/modern-web-guidance-src)