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 clear, the skills document how to use these features to solve common use cases, and then they give your agent a full browser support table for any APIs mentioned that are not Baseline Widely available -- and then your agent can decide whether to use them or not, based on your site's browser support requirements.

In most of these cases a cross-browser fallback is also documented.

"DO use fetchLater()..."

"Your own code MUST call fetchLater() directly..."

https://github.com/GoogleChrome/modern-web-guidance/blob/mai...

But yes, the skills do document compatibility and fallbacks well.

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.

(we could make this clearer though)

We'll make this happen. :)

It feels that something like this would be the holy grail of agents. A small agent that has only the minimum necessary built in knowledge. The rest, it just retrieves on the fly when it needs (+ caching)

It’s like storing pointers/links instead of the contents

But yeah.. big corpus of valuable context × minimal agent footprint = happy place.

https://web-platform-dx.github.io/baseline/

https://github.com/GoogleChrome/modern-web-guidance-src/blob...

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!

So I'll take a 1-line CSS solution over 60 lines of ResizeObserver/setTimeout business. But.. best practices for frontend isn't just the code.. it's ensuring quality UX, that keyboard navigability works, that layout doesn't shift on users.

Browser-specific implementation gotchas tend to take about a decade to iron out for reasons that never have anything to do with code quality. Users are fickle and so are browser vendors, but that's a different topic.

At the end of the day, there's just no escaping lots of manual testing across device and browser combinations if your goal is a polished result and not just something that "works".

AI has done nothing to make this problem go away. If anything, it's made it worse because people don't even want to look at the code now!

I've recently finished a browser game specifically targeting an old iPad Air 1 we had lying around the house.

I had a working version after a weekend, but it took me a month to make it run smoothly on an over 10 years old mobile device. And the most recent browser available is almost 10 years old.

Surprisingly I didn't missed too many "modern" JS features, as these were mostly functional programming oriented which doesn't play well with optimization anyways, and the ES6 was more than enough as a programming platform.

Anyway, what I'm trying to say is that "the best practice" should be making your apps fast and accessible - as much as you can without having to sacrifice something you value - instead of chasing the latest and shiniest.

Don't be a fashion driven developer. :)

This is a misconception. Have your favorite agent summarize this video for you: https://www.youtube.com/live/zcLPGC-tvgk?si=YR68aHlFESD053bh

But the fun part is that all of the proper software engineering practices are aimed at lowering amount of context a developer has to keep in his mind. So it directly applies to agent context. Less verbose code, less tokens to burn, separation of concerns, lower chance agent breaks something unrelated etc.

>This is a misconception. Have your favorite agent *summarize this video for you*: https://www.youtube.com/live/zcLPGC-tvgk?si=YR68aHlFESD053bh

I can't tell if you're joking here

The more "legacy code" is getting written everyday the more the web will be forced to remain backwards compatible...

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.

In short: I 100% understand your disappointment. :) More coming soon like finding cases to update with Promise.withResolvers, the Array iterators, Object.groupBy, URLSearchParams, etc..

There's a plugin for Antigravity that's listed on initial setup (yay bundleware! :) but... yeah if you're using consumer gemini, i'd switch to the Tasks mode because it's more agentic nature helps.

In fact I just did this and it works. :p It regular Gemini, it said it did but kinda liked :) So there it'd be

> Create a perfect HTML contact form with address fields. Check https://developer.chrome.com/docs/modern-web-guidance/guides... — read completely, don't stop at truncation.

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.