Show HN: Get your coding agent off ~2019 JavaScript, onto modern web primitives

github.com - 204 poäng - 58 kommentarer - 16546 sekunder sedan

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

2: https://googlechrome.github.io/modern-web-guidance-src/

Kommentarer (25)

surround - 6427 sekunder sedan

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 - 13184 sekunder sedan
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 - 12567 sekunder sedan
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 - 7414 sekunder sedan
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!
phyzix5761 - 15032 sekunder sedan
"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.
cadamsdotcom - 11020 sekunder sedan
Planning to give this one a wide berth.
The more "legacy code" is getting written everyday the more the web will be forced to remain backwards compatible...
internet2000 - 5830 sekunder sedan
NO THANK YOU. Do not want my agents to contribute to the Chrome monoculture. Chrome is the new IE6.
halflife - 14087 sekunder sedan
Finally.
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.
pyrolistical - 2809 sekunder sedan
I asked my agent to look at that list and only apply things that work on chrome, Firefox, safari iOS and safari macos
Came up with a good list for my project
fumar - 11488 sekunder sedan
I added this a few months ago and Claude Doctor has not removed it. It must be working and getting use.
codepoet80 - 2476 sekunder sedan
I want the opposite of this. I want compatible code -- which is really hard, when there are so many eras to target. So far AI has done a great job of finding that sweet spot -- why would I want a tool that encourages the agent to write less compatible code?
gabrieledarrigo - 10212 sekunder sedan
That's pretty cool!
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.
dallen33 - 6052 sekunder sedan
Paul Irish?? There's a name I haven't though about in ages! I remember following you on Twitter and your website was full of amazing information. Hope you're doing well!
reedlaw - 11415 sekunder sedan
These skills look better than most, but running my code through the legacy scan only found two issues. So while I still think training beats skills, I'm sure this has its place, especially with weaker models.
mococa - 3745 sekunder sedan
More Chromish on web? No thanks.
adzm - 4857 sekunder sedan
I find this very useful as a human as well
tonymet - 3460 sekunder sedan
I recommend saying "contemporary" or "suggested" for transient proposals like this. Having modern change every few years is ambiguous and cliche .
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.
zeroq - 12054 sekunder sedan
What's the best way to introduce this to a Gemini chat?
j45 - 11039 sekunder sedan
This is a great idea. I think while so much was being built out in the JavaScript ecosystem, awareness about the equivalent feature releases that were done to HTML, CSS, web components, and other technologies didn't keep pace.
Of course, it's not perfectly implemented the same in every browser, but that's nothing new.
theresanagent - 8413 sekunder sedan
[flagged]
k0morebi - 6469 sekunder sedan
[dead]
Cloudtheboi - 10040 sekunder sedan
[flagged]
KallowayThayer - 10796 sekunder sedan
[flagged]
PenguinRevolver - 10550 sekunder sedan
I use Firefox after Chrome decided to become a bit of a pain to use on my powerful computers. I was unsure how bias the skills were for Chrome exclusive features, so I decided to ask ChatGPT to analyse the repo. I liked the answer it gave, so here it is: https://chatgpt.com/share/6af3712a-03cc-83eb-ad1f-66dd11c886...
cyanydeez - 13443 sekunder sedan
I treat all my code as some kind of stochastic machinery. So atleast one stage, I'd just tell an agent to go through and follow the guide.
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.