TL;DR: Modern Web Guidance (MWG) is an official skill pack + CLI from the Google Chrome team that embeds web platform best practices and browser compatibility data directly into the workflow of developers and AI coding agents. It's not about content strategy. It's about writing modern web code the right way.
1. What Is Modern Web Guidance?
Modern Web Guidance (MWG) is a curated collection of technical implementation guides for modern web features, maintained in the GoogleChrome/modern-web-guidance repository. It was introduced at Google I/O 2026, released under the Apache 2.0 license, and is backed by the Google Chrome team, the Microsoft Edge team, and the web developer community.
Its core goal: stop developers (and especially AI coding agents) from generating outdated JavaScript patterns and hacky workarounds, and steer them toward native HTML/CSS APIs that are secure, performant, and match your browser support target.
2. Installation
The recommended path is the interactive wizard:
npx modern-web-guidance@latest install
Or install it for a specific agent:
| Agent / Tool | Command |
|---|---|
| Claude Code |
/plugin marketplace add GoogleChrome/modern-web-guidance → /plugin install modern-web-guidance@googlechrome → /reload-plugins
|
| GitHub Copilot CLI |
/plugin marketplace add GoogleChrome/modern-web-guidance → /plugin install modern-web-guidance@googlechrome
|
| 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 |
| Vercel Skills | npx skills add GoogleChrome/modern-web-guidance |
The npm package is self-contained with no extra dependencies, which keeps latency low and reduces supply-chain risk.
3. Core CLI Commands
# Search for relevant guides
npx -y modern-web-guidance@latest search "<query>" --skill-version <version>
# Retrieve the full guide (comma-separate multiple IDs)
npx -y modern-web-guidance@latest retrieve "<id>"
# List every available guide
npx -y modern-web-guidance@latest list
Windows tip: if npx fails, use npx.cmd instead.
4. When You Should Use It
Check MWG at these three moments:
- Before implementing any web feature.
- Before building a new component, to see whether a standard pattern already exists.
- Whenever you're tempted to write an ad-hoc solution or pull in a heavy dependency you don't really need.
5. The Three-Step Workflow
Step 1: Search
Use action-oriented queries (describe what you want to achieve, not just a feature name):
npx -y modern-web-guidance@latest search "optimize largest contentful paint image loading" --skill-version 2026_05_16-c5e7870
The output is JSON containing id, description, category, featuresUsed, and similarity. If every similarity score is low (< 0.5) or the result is empty, treat it as not relevant and browse manually with list.
Step 2: Retrieve
Fetch the full guide using an id from the search results:
npx -y modern-web-guidance@latest retrieve "optimize-image-priority"
Step 3: Adapt
Guides are framework-agnostic. Adapt the code samples to your stack (React, Vue, vanilla JS, etc.), and always check the fallback and browser support sections before shipping.
6. How the Guides Work
- Framework-agnostic: you adapt them to your stack.
- Baseline-aware: every guide states its browser support status using Baseline. With no explicit config, MWG defaults to Baseline Widely Available. If a feature isn't there yet, follow the guide's fallback recommendation, unless your project has its own browser support policy (e.g. "Safari 17.4+" or "no polyfills").
-
Declare your Baseline target in
CLAUDE.mdorAGENTS.md, for example: This project's Baseline target is Baseline 2024. That lets your agent use newer features while still generating fallbacks for older browsers. - Treat it as your project's preferred standard: don't ignore it, and don't make up what it says.
7. What's Covered
MWG ships 100+ expert-verified use cases spanning more than a hundred web platform features, grouped into these categories:
| Category | What's inside |
|---|---|
| accessibility | Semantic HTML, focus management, ARIA, form accessibility |
| built-in-ai | On-device browser AI: Prompt API, Summarizer, Translator, Language Detector |
| canvas | WebGL shaders, exporting media from canvas, HTML in 3D scenes |
| css | Scrollbar styling, dark mode, clip-path, container-based styling |
| css-layout | Flexbox, grid, subgrid, container queries, anchor positioning, fluid scaling |
| datetime | Duration math, time zones, recurring intervals, non-Gregorian calendars |
| forms | Autofill (address/payment/sign-in), custom select, validation after interaction |
| html | Dialog/Popover/Details APIs, invoker commands, resource prioritization |
| motion | View transitions, physics-based easing, cross-document transitions |
| overlays | Dialogs, popovers, tooltips, navigation drawers, context menus |
| passkeys | WebAuthn: registration, authentication, passkey management |
| performance | Core Web Vitals (LCP, INP, CLS), long tasks, image/script priority |
| privacy | Data minimization, third-party audits, security headers |
| scroll | Scroll-snap, parallax, scrollytelling, infinite scroll UX |
| security | XSS, CSP, cookies, Cross-Origin Isolation |
| typography | Stable font fallbacks, text balancing, precise alignment |
| webmcp | Exposing client-side functions as tools for AI agents (Web Model Context Protocol) |
There's also a separate skill for Chrome Extensions (Manifest V3), which you can select with npx modern-web-guidance@latest install --choose.
8. Why Use It
- No reinventing the wheel: technical patterns (accessibility, performance, form validation, and more) are already curated by the Chrome team.
-
Fewer common bugs: guides cover the edge cases people usually miss. For example,
autofill-address-formprevents wrongautocompleteattributes, andrequired-field-feedbackstops errors from showing before the user has even interacted. - Lighter bundles: it pushes you toward native browser features instead of large libraries.
- Cross-browser safety: every guide lists its Baseline status and fallbacks.
- Consistency across projects and teams: one shared standard instead of everyone's personal style.
- Measurable impact: Google's internal benchmark showed roughly a 37 percentage point improvement in agents' adherence to web best practices when equipped with MWG.
9. What Goes Wrong Without It
- Repeated ad-hoc solutions: every developer or agent solves the same problem (custom select, dialog, form validation) differently, which makes the codebase inconsistent and hard to maintain.
-
Dependency bloat: installing a big library when the browser already has a native API (e.g. a dialog library when
<dialog>does the job). - Missing native features: falling behind on more efficient, safer APIs (Popover API, View Transitions, on-device Prompt API) that are already Baseline.
- Accessibility and security regressions: critical details like ARIA, focus management, CSP, XSS prevention, and autofill attributes slip through quick testing but hurt real users.
- Ignored fallbacks: cutting-edge features without fallbacks break on older Safari or minority browsers, and you only find out when users complain.
10. A Note on Scope: MWG Is Not an SEO Tool
MWG is about code implementation (performance, accessibility, layout, security), not content strategy or SEO/GEO. At the time of writing, it doesn't include a dedicated guide for structured data / schema.org (searches return similarity scores below 0.4). For JSON-LD and schema markup, go straight to schema.org.
11. Keeping It Updated
The examples in this post use version 2026_05_16-c5e7870. The CLI warns you automatically when a newer version is available. See the updating instructions in the repo.
Resources
Have you tried MWG with your coding agent yet? I'd love to hear how it changed the code it writes.
Top comments (0)