Glonce

Modern Web Guidance feeds current web APIs to coding agents

toolsThe Glonce editorsHacker News🔥74Glonce rating74Impact55Novelty60Relevance85Surprise45Players50Credibility85
Modern Web Guidance feeds current web APIs to coding agents

Modern Web Guidance is a set of skills, with a command-line tool, published on GitHub under GoogleChrome/modern-web-guidance. Its README says it embeds web platform expertise, best practices and browser compatibility data directly into coding agents, to steer them away from legacy patterns and toward what the modern web platform can do. The project is stewarded by the Google Chrome, Microsoft Edge, Mozilla Firefox and MDN teams, alongside the web development community.

The problem it targets, as the README frames it: coding agents often default to older patterns because LLM training data contains vast amounts of legacy code. That often leads them to generate bloated JavaScript for tasks that now have native, high-performance web platform solutions. Even when a model knows an API exists, the README says, it often lacks the density of real-world, modern implementation patterns needed for production-ready code.

The fix is a skill whose CLI returns targeted, expert-curated guidelines directly into the agent's context window. The README names three focus areas. Modern browser APIs: helping models correctly structure APIs they frequently misuse. Performance and accessibility: preferring platform-level APIs that the browser can optimize and that include built-in accessibility affordances. Responsible fallbacks: guiding models to use sensible, lightweight fallbacks instead of heavy polyfills or legacy libraries. Coverage runs from the past several years of new web platform features up to the cutting edge. The guides are meant to be token-efficient, and the authors say they run evals to prune lowest-common-denominator content that models already know. The README states the collection covers 250 modern web features and 203 real-world developer use cases.

Installation is npx modern-web-guidance@latest install, which starts an interactive wizard. Three commands are shown: search takes a natural-language query (the example is "animate a dialog modal backdrop"), retrieve fetches a guide by ID (the example is "animate-to-from-top-layer"), and legacy-scan . scans a codebase for legacy patterns to modernize. The README also links documentation, an Eval Dashboard, the source code and an issue tracker, and points to an example guide, navigation-drawer.

The README lists the guides, each with a one-line description. Those visible span several areas. Accessibility: accessible-error-announcement (sync aria-invalid with the visual :user-invalid state so screen reader users get error feedback only after interaction), accessible-generated-content, respect-os-text-scale. On-device AI in the browser: language-detection, language-model (the Prompt API, with streaming output, structured JSON responses and multi-turn sessions), summarizer and translator. CSS: css, css-layout (flexbox, grid, subgrid, container queries, anchor positioning, intrinsic sizing), responsive-design, fluid-scaling, size-aware-styling, style-parent-with-has, individual-transform-properties and more. Forms: autofill guides for address, payment, sign-in and sign-up forms, plus slider, switch, sms-otp-form, ime-safe-enter-submit, required-field-feedback and custom select pickers. Web components: custom-elements, shadow-dom, form-associated-custom-elements, prerendering-custom-elements, styling-web-components and accessible-web-components. Dates and times with Temporal, including calculate-event-differentials, capture-location-agnostic-data and coordinate-global-events (binding events to an IANA time zone so they survive daylight saving changes). The list is cut off partway through the Temporal group.

Key facts

  • Modern Web Guidance is a set of skills plus a CLI on GitHub (GoogleChrome/modern-web-guidance) that returns curated web platform guidance into a coding agent's context window.
  • It is stewarded by the Google Chrome, Microsoft Edge, Mozilla Firefox and MDN teams, alongside the web development community.
  • The README says it covers 250 modern web features and 203 real-world developer use cases, and that the guides are pruned using evals to stay token-efficient.
  • Commands include npx modern-web-guidance@latest install (interactive wizard), search, retrieve by guide ID, and legacy-scan . to find legacy patterns in a codebase.
  • Guides visible in the README span accessibility, CSS, forms, web components, on-device AI APIs (Prompt, Summarizer, Translator) and Temporal date handling.

Why it matters

Coding agents learn from code written over many years, so they tend to reproduce old habits, such as heavy JavaScript for jobs the browser now does natively. This project is a direct attempt to correct that from the people who maintain the platform: the Chrome, Edge, Firefox and MDN teams are named as stewards. It also pushes agents toward platform features with built-in accessibility, and toward lightweight fallbacks rather than heavy polyfills or legacy libraries.

Who it affects

Developers who use coding agents to write front-end code, and teams who want generated code to follow current web platform practice. The guides touch accessibility, CSS layout, forms, web components, date and time handling, and the on-device language APIs, so the scope reaches across most everyday front-end work.

How to use it

Run npx modern-web-guidance@latest install and follow the interactive wizard; the README also mentions alternative installation methods. After that, the CLI offers search with a natural-language query, retrieve with a guide ID such as "animate-to-from-top-layer", and legacy-scan . to scan an existing codebase for legacy patterns to modernize. The visible text does not say which coding agents are supported, and it names no licence terms.

How solid is it

The claims about the problem and the approach come from the project's own README, and the stewardship by the four browser and documentation teams is stated there too. The README says evals are used to prune content models already know, but no eval results or numbers appear in the visible text; the Eval Dashboard is only linked. The figures of 250 features and 203 use cases are the README's own, and the text does not say how they map to the number of guides.

Risks and caveats

The effect on the quality of generated code is asserted rather than shown in the visible text, so it needs checking against your own work. The README mentions cutting-edge features, and some of the listed guides rely on newer or on-device APIs; its stated approach is to use lightweight fallbacks where support is missing. No release date or version number is given, and the list of guides is cut off in the source, so the full set is not visible here.

“Coding agents often default to older patterns because LLM training data contains vast amounts of legacy code.”

— Modern Web Guidance README