Modern Web Guidance: la skill de Google Chrome para que Claude Code escriba HTML, CSS y JS modernos (prueba real)

Modern Web Guidance es la skill que el equipo de Google Chrome publicó para que los agentes de código (Claude Code, Codex, Gemini, Copilot, Cursor) dejen de escribir el HTML, CSS y JavaScript de hace diez años. Antes de programar un modal, un tooltip o un formulario, el agente consulta una CLI local que le devuelve el patrón moderno, los errores típicos, el soporte en navegadores y el respaldo para los que van atrasados. Dicen que la mantienen junto a los equipos de Microsoft Edge, Mozilla Firefox y MDN.

La idea ataca un problema real: los modelos aprendieron de millones de páginas con jQuery, z-index: 9999 y validaciones a mano, así que tienden a repetirlas aunque hoy el navegador lo haga solo. La probamos en Claude Code con el mismo prompt dos veces, con y sin la skill. Con ella usó closedby, popover="hint", interestfor, :user-invalid y light-dark(); sin ella, un <dialog> correcto pero con mucha lógica a mano. También costó el doble, tardó más y trajo un fallo visual copiado de una de sus guías.

Qué es Modern Web Guidance

El repositorio GoogleChrome/modern-web-guidance (revisamos el commit 4dd9683, del 10 de noviembre de 2026, versión 1.0.0 en npm) trae dos skills:

Lo pesado no está en la skill. El SKILL.md solo le dice al agente cuándo y cómo consultar la CLI modern-web-guidance, que se descarga con npx y trae dentro 208 guías repartidas en 17 áreas (las que más tienen: comportamientos de interfaz con 40, rendimiento con 26, componentes y diseño visual con 22 cada una). El README habla de "250 funciones modernas de la web" cubiertas.

La búsqueda es local: un modelo de embeddings pequeño y BM25 empaquetados en la CLI, sin API key ni llamadas a un servidor para buscar. El paquete pesa 16,5 MB descomprimido y no tiene dependencias.

Licencia: Apache-2.0 y CC-BY 4.0, no MIT

• El código (la CLI y los scripts) es Apache-2.0: puedes usarlo, modificarlo y redistribuirlo, también en proyectos comerciales, conservando el aviso de licencia e indicando qué cambiaste.
• Las guías de guides/ son Creative Commons BY 4.0: puedes copiarlas y adaptarlas, incluso para vender algo, siempre que cites la fuente. Parte del texto viene de MDN y de especificaciones del W3C, WHATWG e IETF.

Para tu proyecto no cambia nada: el código que el agente escribe con ayuda de las guías es tuyo.

Cómo instalar Modern Web Guidance en Claude Code

La forma oficial es un asistente interactivo que detecta tus agentes:

npx modern-web-guidance@latest install

Necesitas Node.js 22 o superior. Si prefieres el sistema de plugins de Claude Code:

/plugin marketplace add GoogleChrome/modern-web-guidance
/plugin install modern-web-guidance@googlechrome
/reload-plugins

También hay comandos para Codex (codex plugin marketplace add GoogleChrome/modern-web-guidance), Gemini (gemini-extension.json), Copilot CLI, Cursor, Kimi, Grok y Google Antigravity, y funciona con npx skills add GoogleChrome/modern-web-guidance. Si nunca has instalado una skill, mira primero qué son las skills de Claude Code y cómo se instalan.

Puedes probarla sin instalar nada. Esto es lo que devolvió en nuestra máquina, en 1,7 s:

npx modern-web-guidance@latest search "animate a dialog modal backdrop"
# [{"id":"animate-to-from-top-layer", ...},
#  {"id":"light-dismiss-a-dialog", ...},
#  {"id":"prevent-page-scroll-under-modal-dialog", ...}, ...]

npx modern-web-guidance@latest retrieve "light-dismiss-a-dialog"

retrieve devuelve una guía en Markdown: la implementación (closedby="any" en el <dialog> y abrirlo con showModal()), reglas marcadas como MANDATORY, DO y DO NOT, el soporte real (Chrome 134, Edge 134 y Firefox 141 sí; Safari no) y el script de respaldo para los navegadores sin soporte.

Apaga la telemetría si no la quieres

La CLI envía a Google datos anónimos de uso: cuántas instalaciones hay, qué agente la llama, qué guías recupera y las consultas de búsqueda que escribe el agente (no tu prompt). Para desactivarla, añade esto a tu .bashrc, .zshrc o a las variables de entorno de Windows:

export DISABLE_TELEMETRY=1

Ojo: es una variable con un nombre genérico; si otra herramienta tuya la lee, también la apagarás allí.

Cómo la usa el agente

Su SKILL.md es inusualmente mandón. La descripción dice que es "MANDATORY: Execute FIRST for all HTML/CSS and clientside JS tasks" y lista lo que no debe activarla (SQL, Docker, CI, Vite, tests). El flujo es:

1. Buscar con una consulta de 2 a 5 palabras por cada pieza ("light dismiss dialog", no "cerrar el modal de React al hacer clic fuera"). Sin nombres de framework.
2. Recuperar las guías que encajan, varias a la vez separadas por comas.
3. Comprobar que el código cumple la guía, incluidos los respaldos.
4. Declararlo: terminar la respuesta con una sección ### Modern Web Guidance con una línea por guía aplicada y una cita literal de la regla que siguió.

Ese último paso es útil para revisar: sabes qué decisión viene de una guía y cuál improvisó el modelo.

Por defecto las guías asumen que puedes usar sin respaldo todo lo que es Baseline Widely available (presente en los navegadores principales desde hace más de 30 meses). Para lo más nuevo, la guía obliga a un respaldo. Si tu público usa navegadores concretos, escríbelo en tu CLAUDE.md o AGENTS.md; la propia skill propone algo así:

**Browser Support:** Allow Newly Available features, but only adopt custom
fallback code that adds <= 20 lines and no external dependencies

Las guías de APIs experimentales (Origin Trials) o "volátiles" (de un solo motor y con menos de 3 meses) aparecen en la búsqueda pero no se entregan hasta que lo permites con set-allow-origin-trials o set-allow-volatile-features, que se guardan en un .mwgrc en la raíz del proyecto.

Prueba real: el mismo prompt con y sin la skill

Creamos dos carpetas vacías. En una copiamos la skill en .claude/skills/; en la otra, nada. Lanzamos en las dos Claude Code en modo no interactivo (claude -p, Claude Code 2.1.322, modelo Sonnet 5.5) con este prompt:

Crea un único archivo index.html (HTML, CSS y JS vanilla, sin librerías) para la landing de una cafetería: un botón "Suscríbete" que abre un formulario de correo en una ventana modal que se cierra al hacer clic fuera o con Esc y con una animación de entrada y salida; un botón "?" junto al campo de correo que muestra una pista flotante pegada al botón; validación del correo que solo muestre el error después de que el usuario haya tocado el campo; y modo oscuro automático.

Para dejarle usar la CLI le dimos permiso solo para ese comando: --allowedTools "Bash(npx -y modern-web-guidance@latest *)". Es lo que la propia skill recomienda, nunca un npx * general.

Con la skill, Claude hizo 4 búsquedas ("light dismiss dialog", "anchored popover hint", "form validation touched", "automatic dark mode") y recuperó 9 guías de una vez, unos 100 KB de texto que leyó en tres partes. Esto es lo que salió:

Probamos las dos en Chromium 153 con Playwright: abren, cierran con Esc, cierran con un clic fuera y no tiran errores en la consola.

Dos matices importantes. Primero, sin la skill el resultado ya era bueno: Sonnet 5.5 usó <dialog> nativo, respetó prefers-reduced-motion y no metió librerías. La mejora está en los detalles que no se ven, como delegar en el navegador el cierre y el foco. Segundo, el código con skill no es más corto: los respaldos para Safari y Firefox suman líneas. Lo que ganas es que, cuando esos navegadores se pongan al día, el JavaScript de respaldo deja de ejecutarse solo.

El fallo que heredó de una guía

Al pasar el ratón por el botón "?" de la versión con skill, el diálogo entero se oscurecía y quedaba borroso, con la pista flotando encima:

La causa está en la guía animate-to-from-top-layer. Su ejemplo anima a la vez los diálogos y los popovers, y el fondo oscuro va dentro del mismo selector:

:is(dialog[open], [popover]:popover-open):where(:not([data-closing])) {
  opacity: 1;
  &::backdrop {
    background-color: rgb(0 0 0 / 0.5);
  }
}

Un popover también tiene ::backdrop, así que al abrir la pista aparece un segundo fondo oscuro por encima del diálogo. Claude copió el patrón tal cual. El arreglo es sacar el fondo a una regla solo para diálogos:

:is(dialog[open], [popover]:popover-open):where(:not([data-closing])) {
  opacity: 1;
}

dialog[open]:where(:not([data-closing]))::backdrop {
  background-color: rgb(20 10 4 / 0.55);
  backdrop-filter: blur(3px);
}

Lo comprobamos midiendo el estilo calculado: antes, el ::backdrop de la pista tenía rgba(20, 10, 4, 0.55) y blur(3px); después, transparente y sin filtro. La lección: la skill mejora qué APIs elige el agente, pero sigue haciendo falta mirar el resultado en el navegador. Para eso combina bien con webapp-testing, la skill que prueba tu web con Playwright.

legacy-scan: revisar un proyecto que ya tienes

La CLI trae un tercer comando para proyectos existentes:

npx modern-web-guidance@latest legacy-scan ./mi-proyecto
npx modern-web-guidance@latest legacy-scan ./mi-proyecto --json

Lo pasamos por la carpeta src/ de este blog (Next.js 16): 0 hallazgos en 1,3 s. Después escribimos a propósito una página con todo lo que queríamos que detectara: un modal con jQuery, e.keyCode === 27, overflow: hidden en el body, un tooltip colocado con getBoundingClientRect(), un parallax con el evento scroll, moment(), innerHTML con datos del usuario, un evento unload, JSON.parse(JSON.stringify()), barras de scroll con ::-webkit-scrollbar y un modo oscuro sin color-scheme.

Encontró 4 cosas en 3 guías: las dos reglas ::-webkit-scrollbar (usa scrollbar-color y scrollbar-width), el modo oscuro sin color-scheme y el <script> de jQuery desde un CDN sin integrity. Del resto, nada. No es un fallo escondido: la propia herramienta avisa de que solo tiene reglas para 33 guías, un 20 % del total, y cada hallazgo trae criterios de "mantener" y "descartar" para que el agente filtre falsos positivos. Úsala como primera pasada, no como auditoría completa.

Cuánto cuesta

Las demás herramientas para que un agente escriba mejor frontend también son gratis, así que la diferencia está en los tokens. La forma de gastar menos: no la dejes activa para todo. Si vas a hacer un cambio de texto o de estilos sencillo, la skill no debería saltar (su descripción ya excluye "copy/renames"). Donde paga lo que cuesta es en componentes con muchos estados, como modales, formularios con validación, menús o carruseles, que es donde un agente sin guía mete más JavaScript del necesario.

En cuanto a los resultados, Google publica en el README un panel de evaluación con más de 200 tareas. En su medición del 8 de noviembre de 2026, Claude Code con Opus 5.5 pasó del 57 % al 88 % de aserciones cumplidas con la skill; Codex, del 54 % al 82 %. Son cifras del propio equipo, medidas con sus tests de Playwright sobre sus aplicaciones de ejemplo.

Modern Web Guidance frente a otras skills de frontend

• [Impeccable](/blog/impeccable-skill-diseno-web-claude-code) se ocupa del diseño: tipografía, color, que la web no parezca hecha por una IA. Modern Web Guidance se ocupa de las APIs: con qué HTML, CSS y JS se construye cada pieza. Se complementan.
• frontend-design (de Anthropic) da dirección estética, no datos de compatibilidad entre navegadores.
• webapp-testing no escribe código: lo prueba en un navegador. Es lo que te habría avisado del fallo del popover.

Si quieres ver varias skills trabajando juntas en una web real, en cómo crear una landing page con Claude Code combinando 4 skills está el proceso completo.

Errores frecuentes

El agente no la usa. En modo no interactivo o con permisos estrictos, Claude no puede ejecutar npx y sigue sin la skill sin avisar. Permite el comando concreto: npx -y modern-web-guidance@latest * (o pnpx modern-web-guidance@latest *). En nuestra prueba, Claude intentó primero las 4 búsquedas dentro de un bucle for con una variable; Claude Code lo rechazó porque no podía comprobar el comando antes de ejecutarlo, y Claude repitió las búsquedas una por una.

npx se queda colgado. Sin conexión, prueba npx --offline modern-web-guidance@latest .... En entornos donde ~/.npm es de solo lectura, la skill indica usar NPM_CONFIG_CACHE=/tmp/npm-cache.

En Windows no encuentra npx. Algunos agentes necesitan npx.cmd. La skill lo tiene en cuenta, pero si lo lanzas tú desde un script, usa ese nombre.

El agente mete respaldos que no necesitas. Si tu público usa Chrome (por ejemplo, un panel interno), dilo en tu CLAUDE.md: "Solo Chrome y Edge recientes, sin respaldos". La skill lee esa política y deja de añadirlos.

Tipos de TypeScript en React. Atributos nuevos como popover="hint", interestfor o closedby no están en @types/react. La skill pide pasarlos con un *spread* ({...({ interestfor: id } as any)}) en lugar de quitarlos.

Preguntas frecuentes

¿Modern Web Guidance funciona con React, Next.js o Vue?

Sí. Las guías están en HTML, CSS y JS sin framework, y la skill le dice al agente cómo adaptarlas: usar refs para showModal(), generar ids por instancia con useId() y proteger window en el renderizado en servidor.

¿Envía mi código a Google?

No. La búsqueda es local y la telemetría solo incluye la consulta que escribe el agente, el id de las guías y el nombre del agente. Tu código y tu prompt no salen. Aun así, si trabajas con clientes, pon DISABLE_TELEMETRY=1.

¿Sirve para hacer extensiones de Chrome?

Sí, con la segunda skill, chrome-extensions, que se instala con npx modern-web-guidance@latest install --choose. Cubre Manifest V3, service workers y la publicación en la Chrome Web Store.

¿Puedo usar las guías en un curso o un producto de pago?

Sí, son CC-BY 4.0: puedes copiarlas, traducirlas y venderlas dentro de otra obra si citas a los autores y enlazas la licencia. Ten en cuenta que parte del texto viene de MDN, que también pide atribución.

¿Cómo la actualizo?

Si la instalaste con el asistente: npx modern-web-guidance@latest update. Si la instalaste como plugin, desde /plugin en Claude Code, donde puedes activar la actualización automática.

Conclusión

Modern Web Guidance hace que Claude Code use lo que el navegador ya trae en 2026: closedby, popovers, :user-invalid y light-dark(), con respaldos para Safari y Firefox. Es gratis y local, pero en nuestra prueba duplicó el coste de la tarea y copió un fallo de una de sus guías. Instálala para trabajo de frontend con componentes interactivos, apaga la telemetría si te preocupa y revisa siempre el resultado en el navegador.

Siguiente paso: si nunca has escrito una skill propia, crea la tuya con skill-creator y compárala con y sin ella, como hicimos aquí.