CLI Coming Soon
    Back to catalog

    Make Claude Code write modern CSS and JS with Chrome's Modern Web Guidance

    Published · Last updated

    Abstract cover: a long, cluttered code window on the left and a short, clean orange code window on the right, joined by an arrow

    Short answer

    Modern Web Guidance is Google Chrome's set of agent skills that point Claude Code at current HTML, CSS and JavaScript instead of legacy patterns. Version 1.0.0 covers 250 web platform features in 203 use-case guides and adds legacy-scan, a codebase scanner.

    Every fact below comes from the GoogleChrome/modern-web-guidance repository and links to the file and line, checked 2026-11-11.

    What it is

    The README calls it "a set of skills that embed web platform expertise, best practices, and browser compatibility data directly into your coding agents" (README line 7). The reason it exists: "Coding agents often default to older patterns because LLM training data contains vast amounts of legacy code" (README line 36).

    It ships two skill packs (README lines 605 to 606):

    • modern-web-guidance, about 205 tokens: "Comprehensive guidance on modern browser APIs, layouts, and performance."
    • chrome-extensions, about 175 tokens: "Guidance on Manifest V3, background workers, extension APIs, and Chrome Web Store publishing."

    The README lists 250 modern web features and 203 real-world developer use cases. The v1.0.0 release notes give the same numbers: "Version 1.0 ships 203 use-case guides covering 250 web platform features" (v1.0.0 release notes).

    AreaFeatures covered
    CSS and layout140
    HTML and DOM36
    JavaScript and APIs74
    Total250

    The guide folders cover accessibility, built-in AI, CSS, forms, HTML, JavaScript, performance, PWA, security, UI components and behaviors, visual design, WebAssembly and WebMCP (guides folder).

    How Claude Code uses it

    The README describes three steps (README lines 469 to 471):

    1. Claude activates the modern-web-guidance skill when a task is relevant.
    2. Claude runs a search with a short query. The CLI matches it to a guide "using an offline, zero-dependency embedding model and BM25 search engine (no network calls, no API keys)."
    3. Claude runs retrieve on the guide ID, which puts "targeted code patterns, gotchas, and fallbacks directly into its context window."

    When does it fire? The skill's description tells the agent to run it first "for all HTML/CSS and clientside JS tasks", and not for backend, infra or tooling work such as SQL, Docker, Vite or ESLint (SKILL.md lines 4 to 6). After it uses a guide, Claude ends its answer with a "Modern Web Guidance" section that names each guide it applied and why (SKILL.md lines 48 to 50).

    Guides for Origin Trial APIs and "volatile" single-engine features show up in search but are locked on retrieve until you opt in (README line 456). The opt-in lives in a .mwgrc JSON file in your project root, which you can commit for your team (README lines 458 to 465).

    The Claude Code plugin

    The README documents a Claude Code plugin route (README lines 512 to 521). You add this GitHub repo as a plugin marketplace, install the modern-web-guidance plugin from the googlechrome marketplace, turn on auto-update in the plugin menu, then reload plugins. The marketplace name and plugin come from .claude-plugin/marketplace.json, and the plugin manifest lists version 1.0.0 with "Google Chrome" as author (.claude-plugin/plugin.json).

    Know this before you install it: the plugin does not bundle the CLI. Its skill tells Claude to fetch the npm package modern-web-guidance through npx, at the @latest tag, every time it searches or retrieves a guide (SKILL.md line 23, line 36). The skill also tells Claude to ask for network access before the first run in approval-gated tools like Claude Code (SKILL.md line 75). The README explains why: "We use npx to ensure the content doesn't go stale, but the CLI works offline, completely private and local" (README lines 474 to 475). So the plugin runs whatever version npm tags as latest at that moment. Decide whether your team is fine with that.

    legacy-scan: find old patterns in an existing codebase

    Version 1.0.0 adds legacy-scan. Per the release notes, it "statically detects legacy web platform patterns and maps each finding to the guide with the modern replacement. It covers the roughly 20% of guides that have deterministic legacy rules today" (v1.0.0 release notes).

    Inside Claude Code, the skill runs it only when you ask for a broad modernization or a legacy-pattern scan with no specific feature named. It then follows four steps (SKILL.md lines 58 to 70):

    1. Scan the path, with JSON output (line 63).
    2. Verify each finding against its keepWhen / dropWhen rules and drop false positives such as fallbacks, vendor code and lookalikes.
    3. Report the verified findings, noting the scan covers only part of the catalog.
    4. Modernize, if you asked for changes: retrieve each finding's guide, apply the replacement, keep existing libraries as fallbacks where the guide says so, then re-scan.

    A prompt like "scan this repo for legacy web patterns and modernize them" fits that flow. A prompt like "fix the dialog on the settings page" does not trigger legacy-scan, because a specific component is named.

    Setup: why there is no install command here yet

    Version 1.0.0 is the release whose notes introduce legacy-scan, and it came out on November 10, 2026 (v1.0.0 release notes). That is inside our 7-day safety window for new package versions. We will add a pinned install command for version 1.0.0 on or after 2026-11-17.

    We pin exact versions because a hijacked npm release is usually caught within days, and a pinned version cannot change under you.

    If you want it today, the repo README has Google's install steps for Claude Code and other agents. Those steps use the @latest tag.

    Does it help? Google's eval numbers

    Google runs coding agents on real tasks with and without the guidance and publishes the results. The latest Claude Code row in the README, dated Nov 8, uses Opus 5.5: 215 tasks and 1,801 assertions, pass rate 57% without guidance and 88% with it, a 31-point gain (README line 586). These are Google's numbers, not ours, and they were not run on Claude Fable 5.2. Per-agent and per-guide results are on the eval dashboard.

    Telemetry

    Google collects anonymous usage data: install counts, the calling agent's name, guide IDs retrieved and the search queries the agent writes. "Raw user prompts are not collected" (README line 610). To opt out, set DISABLE_TELEMETRY=1 in your shell profile (README lines 613 to 616).

    License and maintainer

    FAQ

    Is Modern Web Guidance made by Google?

    It lives in the GoogleChrome GitHub organization, and the Claude plugin manifest names "Google Chrome" as the author (.claude-plugin/plugin.json). The README says it is "Stewarded by the Google Chrome, Microsoft Edge, Mozilla Firefox, and MDN teams, alongside the web development community" (README line 9).

    Does it send my code or prompts to Google?

    The README says search runs offline with "no network calls, no API keys" (README lines 469 to 471). Google does collect anonymous usage data, including the calling agent name, guide IDs and the search queries the agent writes. "Raw user prompts are not collected" (README line 610). Setting DISABLE_TELEMETRY=1 turns it off (README lines 613 to 616).

    Does it work with React, Vue or Tailwind projects?

    The guides are written in plain HTML, CSS and JavaScript. The skill tells the agent to "adapt them to your framework without dropping the modern feature" and gives React-style examples such as generating per-instance IDs with useId() (SKILL.md lines 81 to 84).

    Will legacy-scan find every outdated pattern?

    No. It covers "roughly 20% of guides that have deterministic legacy rules today" (v1.0.0 release notes). The skill tells Claude to say so when it reports findings (SKILL.md lines 58 to 70).

    Why is there no install command on this page?

    Version 1.0.0 came out on November 10, 2026 (v1.0.0 release notes). We wait 7 days before we publish an install command for a new package version. We will add a pinned command on or after 2026-11-17. The README has Google's own install steps today.

    Related: Claude Code with Claude Fable 5.2: setup and cost and the AY CLAUDE skills catalog.

    Sources

    All checked 2026-11-11. File links point at commit 4dd9683 on main.

    Related guides