Chrome Teaches Coding Agents to Write Without Hacks: Task Success Rises from 55% to 92%

Ask Claude or Codex to build a modal window, and you will most likely get a <div> with an overlay, manual focus management and a pile of JS. Meanwhile, the browser has long had <dialog> with showModal(): the backdrop, focus handling and closing on Escape all work out of the box. Models know about these things, but out of habit they choose the pattern that appears most often in their training data. The Chrome team decided to tackle this problem head-on.

What Was Released

The modern-web-guidance project has reached version 1.0. It was built together with Firefox, MDN and Edge. Inside are 200+ hand-written guides (about 1.7 MB) on how to solve typical frontend tasks using the platform's own capabilities. Examples: CSS.highlights highlights fragments of text without a scattering of <span> elements, field-sizing stretches a textarea as you type, and <dialog> replaces homemade modals.

The guides are delivered to the agent as a skill plus a CLI with agentic RAG search. The author says he spent nine months looking for a way not to bloat the context window and not to depend on the activation mechanics in MCP. The skill description is tuned so that it triggers specifically on frontend tasks. The search stack originally weighed about 500 MB in native form; now it is pure JS at ~7 MB, and a search takes about 10 ms on an ordinary processor.

Numbers and Verification

The authors built an evaluation infrastructure. Codex, Claude and agy were run on 200 tasks, first without the skill, then with it. About 1,700 assertions are checked using Playwright and AST parsing. Without the guides, 55% of checks pass; with the guides, 92%.

The evaluation is also useful for the reverse task: if an agent handles a certain pattern well without any hints, the guide can be deleted. According to the author, some things the team considered a weak spot for models turned out to be known to them better than expected.

A separate new feature is called legacy-scan. It is a deterministic scanner trained on 30 thousand GitHub repositories. It finds outdated patterns that an agent can replace with modern ones. Average accuracy on held-out repositories is 92%.

How to Try It

Everything is installed via npx:

• npx modern-web-guidance@latest install connects the skill
• search "animate dialog modal" searches the guides
• legacy-scan ./src checks your code

Telemetry is disabled with the DISABLE_TELEMETRY=1 variable. You should do this right away if you work with closed-source code.

Limitations and Takeaway

The main caveat is that the rise from 55% to 92% was measured on the authors' own benchmark. The tasks and checks were chosen to fit the guides, so on your project the gain may be more modest. In addition, modern APIs require support in the target browsers, and you still need to check an agent's output for compatibility with your audience.

The practical takeaway is simple. If you write frontend with the help of agents, install the skill and run legacy-scan over your code. The first will reduce the amount of unnecessary JS in new tasks; the second will show you how many hacks have piled up. A more general point for those building agent tools: a narrow set of expert knowledge, delivered compactly and verified with your own tests, often delivers more than waiting for the next model version.