Modern Web Guidance (MWG): Google Chrome's Gold Standard for Modern Web Implementation

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:

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:

1. Before implementing any web feature.
2. Before building a new component, to see whether a standard pattern already exists.
3. 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.md or AGENTS.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:

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-form prevents wrong autocomplete attributes, and required-field-feedback stops 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

• GoogleChrome/modern-web-guidance on GitHub
• Modern Web Guidance on Chrome for Developers

Have you tried MWG with your coding agent yet? I'd love to hear how it changed the code it writes.