Modern Web Guidance - Keep coding agents on modern web primitives
Show HN: Get your coding agent off ~2019 JavaScript, onto modern web primitives
Modern Web Guidance is a set of skills that embed web platform expertise, best practices, and browser compatibility data directly into your coding agents. Stewarded by Google Chrome, Microsoft Edge, Mozilla Firefox, and MDN teams, it steers agents away from legacy patterns toward modern solutions. With a CLI that searches guides, retrieves specific advice, and scans codebases for outdated patterns, it covers 250 modern web features and 203 real-world use cases across CSS, HTML, JavaScript, accessibility, and built-in AI. Install via npx modern-web-guidance@latest install.
Modern Web Guidance bridges the gap by returning targeted, expert-curated guidelines directly into your agent's context window, helping models correctly structure APIs they frequently misuse.
- surround
Here's a list of browser features the skills will tell your agent to use that are stable in Chrome but not supported by Firefox and Safari:
CSS @function
CSS calc-size()
CSS interpolate-size
CSS corner-shape
CSS border-shape
CSS flex-wrap: balance
CSS text-fit
CSS text-decoration-skip-spaces
CSS scroll-axis-lock
CSS scroll-target-group
CSS :target-current
CSS scroll-initial-target
CSS container scroll-state queries
scrollsnapchange event
scrollsnapchanging event
HTML focusgroup
Element.startViewTransition()
CSS view-transition-scope
Interest Invokers (interestfor)
LanguageModel (Prompt API)
LanguageDetector
Translator
Summarizer API
Window.fetchLater()
Speculation Rules API
Long Animation Frames API
VisibilityStateEntry
PerformanceSoftNavigation
InteractionContentfulPaint
Connection-Allowlist
CSS url() integrity() modifier
HTML meta name="text-scale"
HTML template for
HTML processing instructions
PasswordCredential
Promise-returning scroll methods
Web App Origin Migration
Local Network Access permissions
Request.targetAddressSpace
beforeinstallprompt event
To be fair, the skills also recommend ~11 features not supported by Chrome itself. And the project does seem concerned with compatibility: "Guiding models to use sensible, lightweight fallbacks."
- simonw
Distribution suggestion: in addition to the npm packages you have right now, set up GitHub Pages to publish a markdown index document of the skills at https://googlechrome.github.io/modern-web-guidance-src/skill... (currently a 404)
That index page should link to plain markdown versions of all of the documents, and should be designed for search with grep to find the right answers.
That way I don't have to install anything at all - provided my agent has the ability to make HTTP requests I can tell it "Look for tips on https://googlechrome.github.io/modern-web-guidance-src/skill..." and it will fetch the index, then navigate to the most relevant documents - no MCP or npm or installation required at all.
- advisedwang
Chrome already has too much power in the browser standards world. The last thing we need is everyone's LLMs to follow Chrome team's guidance on how to do web development. This road leads back to "To view this site, please view in [DOMINANT BROWSER]"
- chalmovsky
Amazing! I'm just writing an article about how Alex Russell's quote about 'React being a legacy technology' got, unfortunately, totally ignored.
And now this just fell in my lap! Some of the arguments I wanted to make seem to be provide here. Didn't have a chance to take a proper look at it, but it looks very promising and nice!
Thank you!
- flossly
I prefer to have my templates in a compiled language: not passing a map of strings to a string with interpolation points, but actually "just code" by which I define HTML builders by combining templates/layouts/components in that same "just code".
Like HtmlFlow (Java/Kotlin) or kotlinx.html.
I pick Tailwind and Alpine.js to go with this approach because: I want to be SSR-first (with small JS-based improvements where they matter most) so NOT and SPA, i want the styling to be close to the HTML code that's being styled (no need to match between CSS definition and usage), and I also prefer to keep my tiny bits of JS close to the HTML it deals with (Alpine makes that easy and provides a clear path for implementing 99% of my JS needs).
Like everyone, LLMs code it for me :) But the result is easy to reason about for myself and my LLM. Little vanilla JS. No jQuery. Mostly just some HTML-bound Alpine instructions. And Tailwind everywhere. This way I can look at one place to see how it works: or CTRL-click my way to it.
- phyzix5761
"Best Practices" are pretty much dead in the AI era. Pretty soon no one is going to read any of the code AI produces and that's a scary thought.
- bakkoting
> If you spot something wrong or weird, give us a holler!
But how? Hopefully filing an issue on the modern-web-guidance-src repo is the right place? Anyway I filed one for using fromBase64 and toBase64 instead of atob and btoa.
But since you're all in on agents anyway you should consider having one look through at least all of the JS, DOM, and HTML spec commits in the last 3-5 years and automatically triaging any that are clear improvements and are not used by agents. Would be pretty straightforward.
---
Btw, I think it would be very helpful to automatically provide versions of this depending on what browsers you're targeting. I don't want to use anything that hasn't been available in all evergreen browsers for at least a year, for example; I think most developers have a similar standard, or at the very least don't want to use the bleeding edge. And while it is _possible_ to get that from your repo, it takes some effort, either writing a script or letting the agent use its own judgement for every feature. That's work you could do on your end and save the rest of us from needing to.
- internet2000
NO THANK YOU. Do not want my agents to contribute to the Chrome monoculture. Chrome is the new IE6.