Chrome apprend aux agents de codage à écrire sans bricolages : le taux de réussite des tâches passe de 55 % à 92 %

Demandez à Claude ou à Codex de créer une fenêtre modale, et vous obtiendrez très probablement un <div> avec un overlay, une gestion manuelle du focus et une pile de JS. Pourtant, le navigateur propose depuis longtemps <dialog> avec showModal() : l'arrière-plan, le focus et la fermeture par Échap fonctionnent d'emblée. Les modèles connaissent ces fonctionnalités, mais choisissent par habitude le schéma le plus présent dans leurs données d'entraînement. L'équipe Chrome s'est attaquée directement à ce problème.

Ce qui a été publié

Le projet modern-web-guidance est sorti en version 1.0. Il a été réalisé avec Firefox, MDN et Edge. Il contient plus de 200 guides rédigés à la main (environ 1,7 Mo) expliquant comment résoudre les tâches front-end courantes avec les moyens de la plateforme. Exemples : CSS.highlights met en évidence des fragments de texte sans multiplier les <span>, field-sizing agrandit un textarea au fil de la saisie, <dialog> remplace les modales faites maison.

Les guides sont fournis à l'agent sous forme de skill, accompagné d'une CLI avec recherche RAG agentique. L'auteur explique avoir cherché pendant neuf mois un moyen de ne pas gonfler la fenêtre de contexte et de ne pas dépendre du mécanisme d'activation de MCP. La description du skill est calibrée pour qu'il s'active précisément sur les tâches front-end. La pile de recherche pesait d'abord environ 500 Mo en version native ; c'est désormais du JS pur d'environ 7 Mo, et une recherche prend environ 10 ms sur un processeur ordinaire.

Chiffres et vérification

Les auteurs ont mis en place une infrastructure d'évaluation. Codex, Claude et agy ont été testés sur 200 tâches, d'abord sans le skill, puis avec. Environ 1 700 assertions sont vérifiées à l'aide de Playwright et d'une analyse d'AST. Sans les guides, 55 % des vérifications passent ; avec les guides, 92 %.

L'évaluation sert aussi pour le cas inverse : si l'agent maîtrise un schéma sans aide, le guide peut être supprimé. Selon l'auteur, certains points que l'équipe considérait comme des faiblesses des modèles se sont révélés mieux connus de ces derniers qu'attendu.

Une autre nouveauté s'appelle legacy-scan. C'est un scanner déterministe, entraîné sur 30 000 dépôts GitHub. Il repère les schémas obsolètes que l'agent peut remplacer par des équivalents modernes. La précision moyenne sur des dépôts mis de côté est de 92 %.

Comment l'essayer

Tout s'installe via npx :

• npx modern-web-guidance@latest install connecte le skill
• search "animate dialog modal" interroge les guides
• legacy-scan ./src analyse votre code

La télémétrie se désactive avec la variable DISABLE_TELEMETRY=1. Mieux vaut le faire d'emblée si vous travaillez sur du code propriétaire.

Limites et conclusion

La principale réserve est que la hausse de 55 % à 92 % a été mesurée sur le benchmark propre aux auteurs. Les tâches et les vérifications sont adaptées aux guides, si bien que le gain sur votre projet peut être plus modeste. De plus, les API modernes nécessitent une prise en charge dans les navigateurs ciblés, et il faut toujours vérifier la compatibilité du code de l'agent avec votre audience.

La conclusion pratique est simple. Si vous écrivez du front-end avec des agents, installez le skill et lancez legacy-scan sur votre code. Dans le premier cas, la quantité de JS superflu dans les nouvelles tâches diminuera ; dans le second, vous verrez combien de bricolages se sont accumulés. Plus largement, pour ceux qui conçoivent des outils agentiques : un ensemble restreint de connaissances expertes, présenté de façon compacte et validé par ses propres tests, apporte souvent davantage que l'attente de la prochaine version du modèle.