How Modern Web Guidance Helps Coding Agents Choose Browser APIs

Google's Chrome team released Modern Web Guidance 1.0 on November 10, 2026, a skill that gives coding agents a searchable library of web-platform guides and browser compatibility data, with Firefox and Edge joining the project. In a test refactoring a notification-settings dialog that used 46 nonblank lines of JavaScript, guided Codex sessions running GPT-5.6 Terra at low reasoning effort cut the rewrite to 15 nonblank JavaScript lines each for current-browser targets, versus 20 and 21 without the guides, by replacing JavaScript showModal() calls with the button's commandfor and command="show-modal" attributes. Under an older-browser requirement back to Safari 18.4, both guided versions kept showModal() and the difference shrank to one line per pair.

Modern Web Guidance is a skill from the Chrome team that gives coding agents a searchable library of web-platform guides and browser compatibility data. The team built it because agents can fall back on familiar JavaScript patterns even when HTML or CSS can handle the same job. The guides help an agent choose an API based on the browsers a project actually supports. Chrome announced the stable 1.0 release on November 10, 2026, with Firefox and Edge joining the project. Chrome’s release announcement https://developer.chrome.com/blog/modern-web-guidance-v1 To use it with a compatible agent such as Codex or Claude Code, run npx modern-web-guidance@latest install from your project directory. Record your browser requirements in the project’s agent instructions, such as AGENTS.md in Codex. You can name minimum browser versions or set a target like Baseline 2025, which covers features that became interoperable across major browsers by the end of that year. Installation and browser targets https://developer.chrome.com/docs/modern-web-guidance/get-started Then give the agent a concrete task, such as simplifying a settings dialog while preserving its keyboard behavior. The skill tells the agent to search for the relevant UI pattern and retrieve a guide before editing. The guide supplies implementation advice and helps the agent decide whether a feature needs a fallback for older browsers. How the guide library works https://developer.chrome.com/docs/modern-web-guidance/get-started whats in modern web guidance What does access to those guides change in a refactor? The test started with a small notification-settings page. Its custom dialog used 46 nonblank lines of JavaScript to open and close the overlay, keep the background inactive, manage keyboard focus, and apply or discard a change. The task was to simplify the code while preserving those behaviors. Within each pair, two fresh Codex sessions got the same prompt, starting files, and browser requirements. Both ran GPT-5.6 Terra at low reasoning effort. One had Modern Web Guidance 1.0 installed. Two pairs targeted Safari 26.2 and newer and set a Baseline 2025 target. The other two required support back to Safari 18.4 and asked for a fallback or a supported alternative when an API was too new. The finished pages went through six scenarios in Chrome 157, Firefox 159, and Playwright WebKit 27.2. The older-target pages also had to pass in Playwright WebKit 18.4. These are specific test environments. The Safari versions describe project requirements, while the WebKit versions describe the test builds. Two guided sessions reached the outer time limit after writing their changes. Their saved pages went through the same checks. Every run chose a native <dialog . Codex reached for that element even with no guidance installed. The change showed up one step later, in how the button opened it. All four unguided versions called showModal from JavaScript. The two guided versions for current browsers handed the opening action to the button itself. The button from the first guided run shows both attributes. <button type="button" id="edit-settings" commandfor="delivery-editor" command="show-modal" Edit delivery</button commandfor names the dialog by ID. command="show-modal" tells the browser what to do when the button is activated. The app still uses JavaScript to restore the saved form value on opening and apply a change on Save. The browser now handles the act of opening the modal. MDN’s Invoker Commands reference https://developer.mozilla.org/en-US/docs/Web/API/Invoker Commands API In the current-browser pairs, the guided code came in at 15 nonblank JavaScript lines each, compared with 20 and 21 without the guides. Those counts cover the entire rewrite, including changes to focus and form handling. Under the older-browser requirement, both guided versions kept showModal . The difference shrank to one line in each pair. In an extra check outside the current-browser target, the buttons that relied on the HTML command did nothing in WebKit 18.4. Safari added support for those commands in 26.2. Browser support for Invoker Commands https://web-platform-dx.github.io/web-features-explorer/features/invoker-commands/ All four unguided versions passed all six scenarios in their test environments. One of the four guided versions did. All eight passed in Chrome and Firefox. In WebKit, three guided versions left focus off Edit delivery after a mouse opening followed by Escape, Cancel, or Save. One of those versions still used showModal . The same symptom appeared with either way of opening the dialog. The effect was easy to reproduce in the first pair. Click Edit delivery , press Escape, then press Enter. In WebKit 27.2, both dialogs closed on Escape. Enter reopened the unguided version, where focus had returned to the button. The guided version stayed closed. Focus had landed on the page’s body. The dialog guide in version 1.0.0 advises against writing focus restoration code and says, “The browser returns it to the invoker.” The logs show all four guided sessions retrieved that guide. The reason Codex kept or removed any particular line remains unknown. Version 1.0.0 dialog guide https://github.com/GoogleChrome/modern-web-guidance/blob/v1.0.0/skills/modern-web-guidance/guides/ui-components/dialog.md L100 The HTML Standard describes a more precise rule. When a modal opens, the browser records the element that was focused immediately beforehand and attempts to restore that focus when the modal closes. In Safari, clicking a button generally leaves it unfocused. The element that opened the dialog and the element that previously held focus can therefore be different. HTML Standard https://html.spec.whatwg.org/multipage/interactive-elements.html show-a-modal-dialog · MDN on clicking and focus https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button clicking and focus The same generated page makes that difference visible. In the WebKit 27.2 probe, opening with Enter from the focused button and closing with Escape returned focus to the button. Opening with a mouse click and closing with Escape left body as the active element in the three affected versions. The passing guided version for the older target kept editSettings.focus in its close handler. It gave the application an explicit destination for focus, as all four unguided versions did. For a pull request like this, make the expected behavior explicit. Open the modal with a click and with the keyboard. After Escape, Cancel, and Save, check that focus lands back on the opener in a browser the project supports. The button should still be ready for the user’s next Enter, even when HTML handled the opening. How Modern Web Guidance Helps Coding Agents Choose Browser APIs https://pub.towardsai.net/how-modern-web-guidance-helps-coding-agents-choose-browser-apis-51ba3ce4edf8 was originally published in Towards AI https://pub.towardsai.net on Medium, where people are continuing the conversation by highlighting and responding to this story.