This is a submission for the Google I/O Writing Challenge
There’s a slightly embarrassing problem that almost everyone using AI coding agents has run into: your agent still codes like it’s 2019.
Ask it to build a modal, and it reaches for a <div> with JavaScript click handlers and messy z-index hacks. Ask it to build a tooltip, and it creates a whole positioning system from scratch. Ask it to add passkey login, and it starts rebuilding things the browser already handles on its own.
This isn't really the agent's fault. It was trained on the entire history of the web: millions of StackOverflow answers, GitHub repos, and old tutorials from a time when <dialog> didn't exist, the Popover API wasn't even a thing, and container queries sounded like science fiction. AI models don't automatically know what's current. They know what's common.
That gap between what's "common" and what's "current" is exactly what Modern Web Guidance, announced at Google I/O 2026, is trying to fix.
What Is Modern Web Guidance?
Modern Web Guidance is basically a set of skills you add to your AI coding agent. Think of it as a rulebook that helps steer the agent away from outdated patterns and toward features browsers can already handle today.
It's not a linter or another docs site. It works inside your AI agent and helps guide the code it generates.
It launched in early preview on May 19 with over 100 use cases focused on accessibility, performance, and security. It already works with tools like Antigravity, Claude Code, GitHub Copilot CLI, Gemini CLI, and more, with WebStorm support announced for the near future. Setup is simple:
npx modern-web-guidance@latest install
One command, and your agent starts using more modern web patterns by default.
The Problem It's Actually Solving
Before getting into how it works, it's worth talking about why this even matters.
The web platform has changed a lot over the last few years. We got:
- The
<dialog>element (and the ability to animate it with native CSS) - The Popover API: simple, accessible overlays without extra JavaScript
- CSS Anchor Positioning: UI that stays attached to elements without JS math
- Container Queries: components that react to their own size, not the whole page
- View Transitions API: smooth page and UI transitions in just a few lines
- Passkeys / WebAuthn: secure login that the browser handles for you
These aren’t obscure experimental features. They’re widely available, well supported, and better than the patterns they replace. But AI agents still default to the old ones because that’s what they’ve seen the most.
The result? Codebases built with AI assistance often carry five-year-old technical debt, shipped at today’s speed.
Modern Web Guidance tries to fix this. It tells the agent: when the user asks for a modal, use <dialog>. When they ask for a tooltip, use the Popover API and CSS Anchor Positioning. When they ask for a login form, think about passkeys.
Trying It Out
I installed Modern Web Guidance via the CLI and tried a few prompts to see how much it actually changes the output.
Before (without guidance): asking an agent to "build a modal with smooth open/close animations" usually gives you something like this: a <div class="modal-overlay">, display: none toggled with JavaScript, opacity transitions on a z-index: 9999 container, and a document.addEventListener('keydown') for Escape handling.
It works. It’s also the kind of code a senior web developer would flag in a code review and replace.
After (with guidance): the same prompt produces a <dialog> element, animated with @starting-style and allow-discrete. Accessibility? Handled by the browser.
The output is not just cleaner, it's less code doing more things correctly.
I ran a similar test with tooltip/popover UI, and the guidance pushed the agent toward the Popover API with CSS Anchor Positioning. That removes a whole class of JavaScript that used to be needed just to keep tooltips attached to their triggers while scrolling.
The Baseline Integration Is the Clever Part
What makes Modern Web Guidance more interesting than just a list of best practices is its integration with Baseline.
Baseline is a web platform initiative that defines clear tiers of browser support: Newly Available (supported in all major browsers in the last ~30 months) and Widely Available. It gives developers a simple way to know if a feature is safe to use.
Modern Web Guidance ties into this directly. When it suggests a feature, it’s tagged with a Baseline level. If your app needs to support older browsers, it includes the right fallbacks automatically. If you’re building for modern browsers only, it just uses the latest features without hesitation.
This means the guidance isn’t static. As the web platform changes and features move from Newly Available to Widely Available, the skills get updated. You’re not managing rules, you’re just subscribing to them.
An Honest Critique
Modern Web Guidance is genuinely good, but it's worth being clear-eyed about what it is and what it isn't.
It’s still early. It ships with over 100 use cases. The web platform has thousands of patterns and APIs, so this will feel limited pretty quickly if you go into less common areas like advanced WebGL, complex Service Worker setups, or niche CSS layouts. The team is accepting GitHub contributions, which makes sense, but it also means the real value of this tool will depend on community input over the next few months, not just what is shipped at I/O.
It assumes your agent actually follows it. Modern Web Guidance works by adding context to your agent’s session, such as skills, CLAUDE.md files, or similar setups. But how well an agent follows that context vs. ignoring it and falling back to what it learned before can vary a lot. It’s not a strict rule; it’s more like a strong suggestion.
The web standards community is becoming the arbiter of what “modern” means, and that’s more complicated than it sounds. To be fair, this isn’t just a Google project. The repo lists the Google Chrome team, Microsoft Edge team, and the wider web community as co-maintainers. That matters, as it’s closer to a shared platform effort than a single company product.
But that also makes things more interesting, not less. When a cross-browser group defines what “modern web best practices” look like and bakes that into guidance used inside AI tools, it quietly shapes how millions of developers write code.
The guidance is well-intentioned and aligned with standards. But it’s still a curated view of the web, created by a specific set of organizations. It shouldn’t be treated as neutral; it should be understood and questioned like any other opinionated layer.
Should You Install It?
Yes, no hesitation, if you're building anything that runs in the browser with an AI coding agent.
The bigger picture is more interesting, though: Modern Web Guidance is an early sign of what happens when the people who build the web platform also shape how AI writes web code. That feedback loop, from spec authors to agent guidance to shipped code, could help the web actually catch up to what it already supports.
For too long, great web platform features have gone unused because the ecosystem, including AI, keeps reaching for older solutions out of habit. If Modern Web Guidance works as intended, that gap will start closing faster.
And that’s a meaningful thing to ship.
Getting Started
You can install it at developer.chrome.com/docs/modern-web-guidance
# Recommended (auto-updates)
npx modern-web-guidance@latest install
# Claude Code
/plugin marketplace add GoogleChrome/modern-web-guidance
/plugin install modern-web-guidance@googlechrome
/reload-plugins
# Gemini CLI
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
# Antigravity CLI
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
# GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
The source is open on GitHub at github.com/GoogleChrome/modern-web-guidance-src, contributions and feedback are welcome while it's in early preview.
Announced at Google I/O 2026 on May 19, 2026, and currently in early preview.
Top comments (0)