`modern-web-guidance`: Chrome and Edge team up to stop your agent from coding like it's 2019 (2026)

Your coding agent knows what a <dialog> element is. It just doesn't reach for it. Instead, it hands you a <div> with display: none toggled by JavaScript, a z-index: 9999 container, and a custom Escape-key listener. It learned from billions of lines of web code, most of which was written before the modern web platform existed. modern-web-guidance is the fix.

Released at Google I/O 2026 on May 19, the skill ships 102 web platform features and 128 developer use cases across 8 disciplines via a single npm install. 1 It's a joint project from the Google Chrome and Microsoft Edge teams — two direct browser competitors building the same skill, which tells you something about how pervasive the problem is. 2

MWG + Chrome DevTools for Agents hero image showing terminal interface and code snippets — Announced at Google I/O 2026 as part of the "Agentic Web" infrastructure alongside WebMCP and Chrome DevTools for Agents 3

What it does

The skill injects expert-vetted, Baseline-aware recipes directly into your agent's context window. Each guide covers one modern web API or pattern — when to use it, when to skip it, the correct implementation, and common failure modes — compressed to roughly 1,000–3,000 tokens per use case. 2

The 8 disciplines: User Experience (View Transitions, entry/exit animations), CSS Layout (container queries, subgrid, oklch, anchor positioning), Performance (Speculation Rules, scheduler.yield, INP (Interaction to Next Paint) diagnostics), Forms & UI (Popover API, <dialog>, :user-invalid), Accessibility, Built-in AI (Summarizer, Translator, Language Detector APIs), Passkeys, and Privacy. 1

The search runs offline via a local TensorFlow.js model — no network calls, no API keys. 4 The agent invokes modern-web retrieve <id> when it decides a guide is relevant, pulling targeted context rather than loading 102 guides all at once.

The numbers behind the "37pp" headline

Google runs daily evals using their own Playwright-based harness on the modern-web-guidance-src repo. The April 30 benchmark: Claude Code (Opus 4-6) scored 44% best-practice adherence on 66 vague developer tasks (e.g. "make my images load faster") without MWG, and 81% with it — a +37 percentage-point gain across 516 browser assertions. 4

The most recent snapshot (May 18): Claude Code Opus 4-7 at 52% → 85% (+33pp) across 75 tasks. Antigravity showed the highest single-run uplift: 47% → 91% (+44pp). 4 These are Google's own measurements, not third-party replications — no independent lab has rerun the harness yet. That's worth knowing when you read the marketing copy.

Supported agents and install steps

9 agents are supported: Antigravity (Google's agent platform), Claude Code, Copilot CLI, Gemini CLI, Goose, Cursor, JetBrains WebStorm, GitHub CLI, and Vercel Skills CLI. 5

The universal install wizard handles all of them:

npx modern-web-guidance@latest install

It detects which agents you have and configures the right files (.cursor/rules/, CLAUDE.md, etc.). Pass --choose to select specific skill packs.

Agent-specific alternatives if you prefer:

# Claude Code (plugin marketplace)
/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

# GitHub CLI
gh skill install GoogleChrome/modern-web-guidance

# Vercel Skills
npx skills add GoogleChrome/modern-web-guidance

To update later: npx modern-web-guidance@latest update. You can also search guides without installing:

npx modern-web-guidance@latest search "animate a dialog modal backdrop"
# returns JSON with id, category, tokenCount, similarity

Terminal install wizard showing agent selection options including Antigravity, Codex, Cursor, Gemini CLI, GitHub Copilot, Claude Code — The interactive install wizard auto-detects installed agents 6

Concrete before/after

Thea (dev.to) tested the same prompt — "build a modal with smooth open/close animations" — with and without MWG: 7

	Without MWG	With MWG
Element	`<div>` with JS toggle	`<dialog>`
Animation	Opacity transition on `z-index: 9999`	`@starting-style` + `allow-discrete`
Accessibility	Custom `keydown` listener	Browser-native
Code volume	More JS	Less — browser handles it

For tooltips, the same pattern: custom JS positioning → Popover API + CSS Anchor Positioning, removing "a whole class of JavaScript that used to be needed just to keep tooltips attached to their triggers while scrolling." 7

Kano Takeshi (Ubie) ran a full site audit on kano.codes using modern-web search and modern-web retrieve. MWG confirmed features already in use correctly (oklch(), :has(), Subgrid, invoker commands), suggested font-size-adjust for Japanese font layout shifts, and flagged features to skip with reasons attached — not just a list of new APIs to chase. 6

Tara Ojo Agyemang, one of the MWG authors at Google, described her own View Transitions experience without hedging: "Without guidance, my agent implemented the API incorrectly. It was surprisingly difficult to debug. I had to go and deeply research the API myself just to understand what had gone wrong. When I tried again on a separate project with Modern Web Guidance installed, it implemented it correctly the first time." 8

What the community actually found

Reactions split into two camps within the first week.

The positive case: ScriptWalker ran MWG in production for three days and documented three patterns that produced consistent wins — form refactors that replaced jQuery modals and moment.js with Popover API and Intl.RelativeTimeFormat, scroll-driven animations that degrade gracefully on unsupported browsers, and components that default to correct ARIA roles and prefers-reduced-motion handling. 9

View on X

Loading content card…

The pushback: Accessibility expert Adrian Roselli tested MWG's own showcase prompt — "Create an accordion-style stats component that smoothly animates on open and close" — using Antigravity. The accordion animation didn't work in Firefox despite MWG's explicit promise of progressive enhancement and Baseline support. The generated component also failed WCAG compliance. 10 On top of that, Antigravity added a theme switcher, configuration settings, and Google Fonts calls that weren't in the prompt. Roselli's summary: "The underlying code generation technology can't be trusted to follow the rules and the rules aren't robust enough to blunt that reality." 10

A separate report found the UX "mega skill" has 8 guides, all with broken links, three of which cover scrollbars. 11

The MWG team's own response to Roselli is honest: "LLMs are non-deterministic. Even if we do everything right, there is no guarantee any guideline will be used for any given prompt." 10 That's a fair characterization of the constraint. MWG raises the floor — it does not set a ceiling.

When NOT to use it

Skip MWG if:

Your work has hard accessibility compliance requirements. The Roselli test shows MWG doesn't reliably produce WCAG-conformant output even when the guides exist. If WCAG AA is a legal or contractual requirement, audit every MWG-guided output against a proper checker before shipping.
You're not doing web frontend work. MWG covers browser-side patterns only. Server-side auth, SQL, rate limiting, and key management are all out of scope. 12
You already have a well-maintained deterministic pattern library. Roselli's alternative recommendation: a vetted component library gives you the same output every time. MWG-guided output will vary on each generation.
You want framework-specific guardrails. React/Next.js users should know: dangerouslySetInnerHTML still needs DOMPurify, Next.js CSP requires nonce-based middleware, and next/image can trigger style-src violations. MWG doesn't cover these. 12

One r/vibecoding commenter flagged a lifecycle concern worth noting: if a skill file is always in the prompt, agents treat it as "wallpaper" and stop following it. The recommended pattern is on-demand activation — let the agent invoke modern-web retrieve for specific tasks rather than loading all 128 guides at session start. 12

Key metadata

Field	Value
Package	`modern-web-guidance` v0.0.170
Weekly downloads	40,702 (week of May 19–25, 2026)
GitHub	GoogleChrome/modern-web-guidance — 967 stars
Source repo	GoogleChrome/modern-web-guidance-src — 553 stars, 755 commits
Maintainers	paulirish, rviscomi, hoten, micahjo7 (Google Chrome + Microsoft Edge teams)
License	Apache 2.0 (code), CC-BY 4.0 (documentation)
Status	Early preview — launched May 19, 2026
Telemetry	Anonymous usage stats collected by default; opt out via `DISABLE_TELEMETRY=1`

Cover image: Google Chrome for Developers — Modern Web Guidance official docs

`modern-web-guidance`: Chrome and Edge team up to stop your agent from coding like it's 2019