Modern Web Guidance: hacer que el agente de código use escrituras modernas de la plataforma Web

Para quién

Si un agente de código apila mucho JavaScript anticuado en cuanto aparecen capas, animación o interacción, y tú quieres las capacidades que la plataforma Web actual ya da, este conjunto encaja mejor. Incrusta experiencia de plataforma Web, buenas prácticas y datos de compatibilidad de navegador en el agente de código, para girar las soluciones de patrones viejos hacia la plataforma moderna, no para escribir otro tutorial front-end genérico.

Explicación oficial: los agentes de código suelen caer en patrones viejos porque los datos de entrenamiento tienen mucho código legado, y a menudo generan scripts hinchados para tareas que ya tienen solución nativa de alto rendimiento. Si trabajas en diálogos, animación de capa superior o comprobación de compatibilidad, y aceptas instalar un conjunto con npx, el beneficio es más directo. Quien solo quiere recorrer documentación y no planea cambiar el comportamiento del agente puede ver primero la búsqueda en línea de comandos, sin lanzar el asistente de instalación.

Completa el primer intento en 3 minutos

La entrada oficial de instalación es solo esta:

npx modern-web-guidance@latest install

Arranca un asistente interactivo e instala Modern Web Guidance en tu agente de código. Esto cambia la configuración de skills del agente en esta máquina; no es una consulta de solo lectura. Antes de ejecutar, confirma: esta máquina tiene npx, quieres terminar las elecciones en el asistente, y este es el entorno de agente donde escribir. Lee las indicaciones y luego ejecuta; no pulses Intro en un entorno poco claro.

Tras instalar, una comprobación reversible: pide al agente que revise «cómo animar el fondo de un diálogo» y exige que mire primero las capacidades modernas, no que escriba primero un script largo. Señal de éxito: la respuesta se apoya en soluciones de plataforma y compatibilidad, en vez de apilar por defecto escrituras legado. Si el agente sigue dando solo patrones viejos, para en la comprobación; no lo dejes cambiar archivos del repositorio.

Si aún no estás listo para escribir en el agente, puedes usar primero la misma CLI en búsqueda de solo lectura (siguiente sección). Ese paso no sustituye la instalación; solo confirma que el comando funciona.

Casos de uso

Caso 1: Buscar guías relacionadas por tarea. Ya tienes una necesidad concreta, por ejemplo animar el fondo de un diálogo, pero aún no sabes el nombre de la guía. En el terminal:

npx modern-web-guidance@latest search "animate a dialog modal backdrop"

La página oficial lo marca Search for relevant guides. No escribe cuántas filas vuelven, el orden ni si hay que instalar primero. Solo puedes confirmar: este comando busca guías por palabra clave. Ver entradas de diálogo, fondo y animación basta; no te autoriza a tratar los resultados como un parche final para pegar.

Caso 2: Sacar una guía por ID conocido. Cuando ya viste un identificador como animate-to-from-top-layer, ejecuta:

npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

La página oficial lo marca Retrieve a guide by ID. No explica el inventario completo de IDs ni si retrieve cambia archivos del proyecto. La primera vez, lee la salida solo como cuerpo de guía. Para bajarla a código, pásala a un agente de código que ya tenga la skill para comparar, y prohíbele con claridad cambiar archivos antes de que asientas.

Límites de uso

Esto es una vista previa. El texto oficial dice que el contenido sigue creciendo, y da la bienvenida a contribuciones o comentarios en

https://github.com/GoogleChrome/modern-web-guidance-src

La página no garantiza que las guías cubran toda la plataforma Web ni escribe si los comandos del periodo de vista previa son estables. Si un tema no se encuentra, solo significa que el contenido actual aún no lo tiene; no inventes una «buena práctica equivalente».

El camino de instalación es el asistente interactivo de arriba; búsqueda y extracción son otros dos comandos. No trates search / retrieve como un segundo instalador ni infieras que está ligado a un producto de agente. El texto oficial solo dice coding agents, sin nómina de clientes.

La primera vez, prioriza la búsqueda o una comparación de solo lectura del agente. El asistente escribe skills; retrieve tampoco declara si es solo visualización. Cualquier paso que cambie el repositorio o la configuración debe hacer que el agente recite primero los archivos que va a cambiar; tú confirmas y luego sigues.