Show HN: Get your coding agent off ~2019 JavaScript, onto modern web primitives
192 points - today at 6:01 PM
Browsers natively handle a lot of what used to take 50 lines of JS (or a dependency): `CSS.highlights` for text range highlighting without <span>s everywhere, `<dialog>` and showModal() give you backdrops and ideal focus management, `field-sizing` to auto-grow textareas as the user types.. (Something yesterday's ftrain post touched on [0])
Models know about some of these by name, but consistently won't default to using the platform-native solution and instead prefer the incumbent <div>+JS based pattern. We started an effort in Chrome to supplement coding agents with this key domain knowledge and we're shipping our 1.0 today, in collaboration with Firefox, MDN, and Edge.
200+ guides (~1.7MB) of curated, hand-crafted implementation best-practices from web experts, updated as the web evolves. (Open source, obv, so.. we'll welcome your bikeshedding ;) Readable versions here: [1]
I've spent the last 9 months obsessing over how to ship this as an agent skill + (Agentic RAG) CLI without blowing up your context window. (Or cedeing activation mechanics to MCP dynamic tool search). The skill description is minmaxed for activating on relevant frontend tasks. The RAG work I'm pretty proud of⦠originally a 500mb native stack down to a ~7MB pure-JS package, ~10ms search on your CPU.
We just introduced a deterministic 'legacy-scan' (trained on 30k github repos) to identify old 'n dusted patterns that your agent can modernize. (92% avg precision on held-out repos.)
People make a lot of claims about what coding agents are good/bad at. We wanted receipts, so we invested heavily in eval infra [2] to help us hill-climb, but also to identify when knowledge is common enough we can prune our guides. (Ofc, some of the things we thought AI didn't know turned out to be wrong :) We run codex/claude/agy against 200 tasks without the skill and then with.. In total ~1,700 playwright/AST-based assertions. Agents go from 55% pass unguided to 92% guided.
Try it out:
DISABLE_TELEMETRY=1 npx modern-web-guidance@latest install
DISABLE_TELEMETRY=1 npx modern-web-guidance@latest search "animate dialog modal"
DISABLE_TELEMETRY=1 npx modern-web-guidance@latest legacy-scan ./src
If you spot something wrong or weird, give us a holler!Longer write-up on the 1.0: https://developer.chrome.com/blog/modern-web-guidance-v1
---
0: https://news.ycombinator.com/item?id=50416456
1: https://developer.chrome.com/docs/modern-web-guidance/guides
Comments
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."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.
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!
The more "legacy code" is getting written everyday the more the web will be forced to remain backwards compatible...
Came up with a good list for my project
This is exactly what I need when I need it. The amount of pull requests I reviewed with a mess of codes that can be switched to 2 lines of modern features made me write such tools myself, only half assed since I have other things to do.
On the other hand, a bit sad: programming nowadays is just arranging a bunch of Markdown files, possibly generated by another bunch of models.
Not so exciting, in the end.
These concepts are new, so no one knows if they are any good. They're not modern -- who knows if they will even be put to use?
"contemporary", "proposed", "suggested", "compatible" are better fit. I wouldn't dare use "advanced" because many APIs and proposals actually regress earlier behavior.
Of course, it's not perfectly implemented the same in every browser, but that's nothing new.
But I'd not inject all this fluff into the wheels of the machine because it'd just take the "average" of these practices which would be just as useless.