Modern Web Guidance: Chrome Team Skills That Steer Coding Agents Away From Legacy JavaScript

Google Chrome’s Modern Web Guidance is a stewarded agent skill pack that tells coding agents to reach for native web platform APIs instead of 2019-era JavaScript patterns—and it shipped install paths for Claude Code, Codex, GitHub Copilot, and half a dozen other harnesses on November 10, 2026. The README describes 250 web features, 203 task-specific use-case guides, an offline search / retrieve CLI, and Playwright-backed evals that compare guided vs unguided pass rates. If you run agents on front-end repos, this changes what third-party instructions load into every session—and that is a supply-chain and observability decision, not just a CSS convenience. This post explains the mechanism, what Google logs, and how to install without handing an unreviewed plugin root on your laptop.

explainx.ai’s Addy Osmani agent-skills coverage sits in the same ecosystem trend: more production workflow skills shipping beside agents. Modern Web Guidance is the browser-vendor answer—curated platform text maintained with Chrome, Edge, Firefox, and MDN.

TL;DR

What problem is this solving?

Coding models train on enormous volumes of legacy Stack Overflow and blog code. The README’s framing is direct: agents default to older patterns because that is what density in training data looks like—even when native APIs (Popover, View Transitions, scheduler.yield, Passkeys, Sanitizer) are stable in current browsers.

Modern Web Guidance is meant to inject expert-curated snippets at decision time:

1. The harness activates the modern-web-guidance skill when a task looks web-related.
2. The agent runs modern-web-guidance search "<task>" locally.
3. The agent runs modern-web-guidance retrieve "<guide-id>" to pull a token-pruned guide into context.

The content spans CSS layout, forms, performance, accessibility, built-in AI APIs, security (Trusted Types, sanitization, restrict-outbound-connections), and WebMCP guides for exposing form tools to agents—relevant if you are wiring agentic web surfaces, not only styling cards.

How installation works (per the README)

The quickstart is:

npx modern-web-guidance@latest install

That runs an interactive wizard. The npm package is described as self-contained with no extra dependencies for supply-chain latency and security—still, npx executes published package code on your machine. In enterprise settings, mirror that package or vendor the git tag before wide rollout.

Harness-specific paths documented on November 10 include:

Updates: npx modern-web-guidance@latest update when installed via that path; otherwise follow each harness’s plugin update docs.

Skill packs: modern-web-guidance (~205 tokens activation) and optional chrome-extensions (~175 tokens) for Manifest V3 guidance—select with install --choose.

Offline CLI vs fresh npx content

The README draws an intentional split:

• npx keeps guides from going stale by pulling current package bits.
• search / retrieve run offline with a bundled embedding model and BM25—no API keys, no live retrieval calls for guide text.

You can try retrieval without installing into an agent:

npx modern-web-guidance@latest search "animate a dialog modal backdrop"
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

For security reviewers, that is the right pre-flight: read what the agent would ingest before it becomes persistent plugin configuration.

legacy-scan (npx modern-web-guidance@latest legacy-scan .) walks a tree for patterns the guides classify as legacy. It helps modernization PRs; it is not a replacement for secret scanning or dependency CVE checks.

Telemetry and privacy

Google documents anonymous usage telemetry: installation counts, calling agent name, guide retrieval IDs, and CLI search queries agents generate (example given: "dark mode scrollbar color-scheme"). Raw user prompts are not collected, per the README, with collection logic pointed to modern-web.ts in the source repo.

Opt-out:

export DISABLE_TELEMETRY=1

Add that to the shell profile on machines where even coarse telemetry violates policy. This is separate from whether your coding agent vendor logs prompts; both channels can be active.

Evals: why the Chrome team says it works

The README publishes an eval dashboard (googlechrome.github.io/modern-web-guidance-src/) with unguided vs guided pass rates on real sample apps. Snapshot rows from November 8, 2026 show uplifts such as claude_code (opus-5-5): 57% → 88% (+31pp) on hundreds of assertions—vendor-reported, but it explains why teams might want the skill: fewer bad PRs on platform APIs.

Security readers should still ask: guided uplift on correctness ≠ safe on security. A guide can steer an agent toward correct Popover markup while saying nothing about CSP or subresource integrity on the same page. Use the security guide pack entries when tasks touch untrusted HTML, third-party scripts, or agent-exposed WebMCP tools.

WebMCP and agent-exposed browser tools

The skill tree includes a webmcp discipline with guides such as agentic-forms (declarative WebMCP attributes on HTML forms) and agentic-javascript-tools (imperative registration of client-side tools). That matters for security teams because every WebMCP tool is a callable surface the page exports to an agent—similar in spirit to an MCP server, but bound to the origin you ship. If an agent session can drive those tools, your threat model needs to cover cross-site content, session fixation, and CSRF on form actions the same way it covers MCP stdio servers. Modern Web Guidance teaches how to wire those APIs; it does not audit your connect-src or frame-ancestors headers. Pair the guides with your existing Content Security Policy review, especially when agents start editing production HTML rather than Storybook sandboxes.

Chrome extensions pack

The optional chrome-extensions skill pack (~175 tokens activation) covers Manifest V3, background workers, and store publishing. Extension permissions remain a high-privilege install on developer machines. If agents can scaffold extensions, watch for broad host_permissions, externally_connectable wildcards, and remote code patterns—the same classes of issues security reviewers flag in human-written MV3 migrations.

What developers are saying

Hacker News commenters on the Show HN thread split along predictable lines:

• halflife welcomed the project, noting they already built similar tooling because too many agent PRs ignore two-line modern features.
• phyzix5761 argued "best practices" decay when nobody reads generated code—a process risk more than a API risk.
• simonw suggested publishing a grep-friendly markdown index on GitHub Pages so agents can fetch guides without installing—a distribution pattern security teams may prefer over persistent plugins.

None of these comments change the README’s install model; they frame human review as still mandatory.

What this means if you run AI coding agents

Before you install

1. Read the skill tree under skills/modern-web-guidance/guides/ on GitHub—especially security/ and webmcp/ if agents can touch production HTML.
2. Prefer marketplace installs (Claude Code /plugin install) over opaque copy-paste so AutoUpdate behavior is visible—see Postman’s lesson on installers that self-approve hooks.
3. Pin versions in regulated environments; npx @latest is convenient and mutable.
4. Set DISABLE_TELEMETRY=1 when policy requires it.
5. Run legacy-scan on a throwaway branch first; inspect diffs before merging agent output.

After you install

• Expect agents to cite platform APIs you may not have shipped in production yet—validate browser support matrices yourself; guides include fallbacks but your analytics and user base define acceptable risk. The README’s Safe Adoption of Modern Features section distinguishes additive enhancements (safe to ignore in older browsers) from critical behaviors that need lightweight fallbacks—agents may still pick the wrong category unless you constrain the task prompt.
• When agents file large PRs, diff package.json anyway. Modern Web Guidance aims to reduce jQuery-style dependencies, but nothing stops a model from adding a new npm package in the same change set; keep dependency review in the merge path described in Claude Mythos rediscovering CVEs.
• If agents gain WebMCP attributes on forms, treat that as expanding tool surface toward the browser—overlapping with concerns in MCP security practical guide and Hugging Face on open hub attack pressure.
• Log which plugins each developer enabled; Bay-style enterprise discovery (November 10 launch) is the fleet version of a spreadsheet you can start locally.

Commands to record in your runbook

# Try retrieval without activating the skill pack
npx modern-web-guidance@latest search "trusted types innerHTML"
npx modern-web-guidance@latest retrieve "trusted-types"

# Scan for legacy patterns (stdout review, not auto-fix)
npx modern-web-guidance@latest legacy-scan .

# Claude Code (from README)
# /plugin marketplace add GoogleChrome/modern-web-guidance
# /plugin install modern-web-guidance@googlechrome

What Beam can and cannot do here

Beam is local-first observability for Claude Code, Codex, and similar CLI agents on your machine (how Beam watches). It heuristically scans skill and MCP config files for risky patterns (eleven rules plus MCP version-pin checks) before you trust them—useful after you know where Modern Web Guidance landed on disk.

Beam does not:

• Block npx modern-web-guidance@latest install or Claude Code marketplace adds.
• Verify Google’s telemetry opt-out on your behalf.
• Guarantee every retrieved guide snippet is safe to run without human review.

If workspace policy is enforce with cached rules, PreToolUse hooks can deny some risky Bash or network tool calls on supported agents—that is hook-based, not kernel sandbox, and fail-open when policy cache is missing (policies docs).

How Beam handles this

Beam and Modern Web Guidance solve different problems. Modern Web Guidance improves web API correctness in generated UI code. Beam records what agents execute, flags credential-shaped strings before local storage, and supports deny rules on Claude Code/Codex tool proposals. The overlap is skills supply chain: both assume you should know what instructions entered the agent’s context. Beam is the better fit when your priority is on-device audit trails and hook denies on a developer laptop without a fleet MDM rollout; Modern Web Guidance is the better fit when your priority is fewer legacy React bundles in agent-written front ends. Neither replaces code review or CSP deployment.

Frequently asked questions

What is Modern Web Guidance?

A Chrome-stewarded open-source skill pack that injects modern web platform guides into coding agents via an offline CLI search and retrieve flow documented in the GitHub README.

How do I install it for Claude Code or Codex?

Use the harness-specific plugin commands in that README—Claude Code marketplace install or Codex codex plugin add modern-web-guidance@googlechrome—or run npx modern-web-guidance@latest install for the wizard.

Does the CLI phone home during search?

Guide search and retrieve are offline per the README; optional Google telemetry is separate and can be disabled with DISABLE_TELEMETRY=1.

Is this a security product?

No. It includes security guides, not enforcement. Review content like any third-party skill.

What is legacy-scan?

A CLI subcommand that reports legacy patterns in a directory tree; it does not rotate secrets or patch CVEs.

Can Beam vet this skill?

Beam can scan skill files heuristically if they are on disk in paths your collector covers; it does not auto-vet npm installs.

Related reading

• MCP security: a practical guide
• Postman installer and self-approved Codex hooks
• 0rwx permissions metaphor for agent workflows
• NVIDIA SkillSpector and open skill scanners
• Trail of Bits on regression-hunting agent skills
• Introducing Beam: local-first agent security
• klad agent paint CLI and bundled skills (November 2026)
• AWS Emulator: local offline AWS for coding agents (November 2026)
• Gemini Managed Agents self-hosted sandboxes (November 2026)

Primary sources: GoogleChrome/modern-web-guidance · Eval dashboard · Google Privacy Policy

Install paths, telemetry fields, and eval snapshots reflect the README as of November 10, 2026. Harness plugin UX may change independently.