Chrome enseña a los agentes de programación a escribir sin parches: el éxito en tareas sube del 55% al 92%

Pídele a Claude o Codex que haga una ventana modal y, con gran probabilidad, obtendrás un <div> con un overlay, gestión manual del foco y un montón de JS. Mientras tanto, el navegador tiene desde hace tiempo <dialog> con showModal(): el fondo, el foco y el cierre con Escape funcionan de serie. Los modelos conocen estas cosas, pero por costumbre eligen el patrón que más abunda en sus datos de entrenamiento. El equipo de Chrome decidió abordar este problema de frente.

Qué se ha lanzado

El proyecto modern-web-guidance ha llegado a la versión 1.0. Se desarrolló junto con Firefox, MDN y Edge. Contiene más de 200 guías escritas a mano (unos 1,7 MB) sobre cómo resolver tareas típicas de frontend con las capacidades de la propia plataforma. Ejemplos: CSS.highlights resalta fragmentos de texto sin una lluvia de <span>, field-sizing estira el textarea a medida que se escribe y <dialog> sustituye a las modales caseras.

Las guías se entregan al agente como una skill más una CLI con búsqueda RAG agéntica. El autor cuenta que pasó nueve meses buscando la manera de no inflar la ventana de contexto y de no depender de la mecánica de activación de MCP. La descripción de la skill está ajustada para que se active precisamente en tareas de frontend. El stack de búsqueda pesaba al principio unos 500 MB en versión nativa; ahora es JS puro de ~7 MB, y la búsqueda tarda unos 10 ms en un procesador normal.

Cifras y verificación

Los autores montaron una infraestructura de evaluación. Codex, Claude y agy se ejecutaron sobre 200 tareas, primero sin la skill y luego con ella. Se comprueban unas 1 700 afirmaciones con Playwright y análisis de AST. Sin las guías se superan el 55% de las comprobaciones; con las guías, el 92%.

La evaluación también sirve para la tarea inversa: si el agente ya se las arregla con un patrón sin ayuda, la guía se puede eliminar. Según el autor, algunas cosas que el equipo consideraba un punto débil de los modelos resultaron conocerlas mejor de lo esperado.

Otra novedad se llama legacy-scan. Es un escáner determinista entrenado con 30 mil repositorios de GitHub. Encuentra patrones obsoletos que el agente puede sustituir por otros modernos. La precisión media en repositorios reservados para validación es del 92%.

Cómo probarlo

Todo se instala mediante npx:

• npx modern-web-guidance@latest install conecta la skill
• search "animate dialog modal" busca en las guías
• legacy-scan ./src revisa tu código

La telemetría se desactiva con la variable DISABLE_TELEMETRY=1. Conviene hacerlo desde el principio si trabajas con código cerrado.

Limitaciones y conclusión

La principal salvedad es que el aumento del 55% al 92% se midió con el propio benchmark de los autores. Las tareas y las comprobaciones están elegidas para encajar con las guías, así que en tu proyecto la mejora puede ser más modesta. Además, las API modernas requieren soporte en los navegadores objetivo, y hay que seguir comprobando la compatibilidad del trabajo del agente con tu audiencia.

La conclusión práctica es sencilla. Si escribes frontend con ayuda de agentes, instala la skill y pasa legacy-scan por tu código. Con lo primero disminuirá el volumen de JS superfluo en las tareas nuevas; con lo segundo verás cuántos parches se han acumulado. Una idea más general para quienes construyen herramientas de agentes: un conjunto reducido de conocimiento experto, presentado de forma compacta y verificable con tus propias pruebas, suele aportar más que esperar a la próxima versión del modelo.