There’s a quiet problem in every AI-assisted web project: your coding agent is probably generating legacy code.
Not because it’s broken. But because it was trained on years of web development patterns where JavaScript solved everything — and by the time native HTML and CSS caught up to those solutions, the training data was already closed. Ask it to build a modal and it’ll probably give you a 40-line JS implementation. Ask it for a tooltip and it’ll look for a library. Ask it for a sticky navigation highlight and it won’t know what CSS Anchor Positioning is.
Google’s Chrome team just published a direct answer to this: Modern Web Guidance.
What it is exactly
Modern Web Guidance is a set of agent skills — structured guides that connect to your AI workflow and redirect the agent toward modern web platform features instead of outdated workarounds.
Think of it as a curated knowledge layer that sits between your prompts and the agent’s output. When you ask it to build an accordion animation, it doesn’t guess — it consults an expert-reviewed guide that tells it to use @starting-style and CSS transitions instead of a JavaScript toggle. When you need a dialog, use the native <dialog> element with closedby support instead of a stack of custom divs.
The skills cover four main areas:
- Accessibility — audit and fix patterns across your app
- Performance — optimize Core Web Vitals, LCP, and INP
- User Experience — responsive components, smooth transitions, modern CSS patterns
- Security — passkeys, WebAuthn, Content Security Policy
It’s currently in early preview, and the Chrome team is actively adding content.
The real problem it solves
The Chrome team is direct about why this exists. AI agents have three specific failure modes for web development:
- They default to old and outdated solutions — JavaScript where CSS would do the job better and with less code.
- They frequently don’t know — or have incorrect information about — the newest web platform features.
- They make recommendations without considering your actual browser support requirements, ignoring the Baseline criteria that matter for your case.
Modern Web Guidance addresses all three. The guides are versioned, expert-reviewed, and kept up-to-date as the web platform evolves.
Installation: pick your agent
It’s model-agnostic. It works with whatever agent you’re already using.
Claude Code (three steps):
# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin:
/plugin install modern-web-guidance@googlechrome
# 3. Reload plugins:
/reload-plugins
Recommended CLI (auto-updates):
npx modern-web-guidance@latest install
Also compatible with: GitHub Copilot CLI, Gemini CLI, Goose, JetBrains WebStorm (via Skill Manager), Antigravity, and npx skills.
How to use it
Once installed, you invoke the skills directly from your agent’s chat. Some examples:
/modern-web-guidance performance
→ Optimize Core Web Vitals, reduce load latency, improve INP.
/modern-web-guidance user-experience
→ Responsive components, CSS transitions, modern layout patterns.
/modern-web-guidance accessibility
→ Full accessibility audit: semantics, focus management, ARIA, keyboard navigation.
Or you can go straight to a specific use case with natural language:
Update legacy modal window implementations to use the <dialog> element and animate them using modern CSS features.
Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning.
Implement a passkey-based login flow using the latest WebAuthn features.
The agent takes the corresponding guide, applies the modern pattern, and generates code that’s actually up-to-date.
Explore before installing
Not ready to install? You can explore the skills library from the CLI before touching your project:
# Search by prompt:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
# Retrieve a specific guide:
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
The search command returns guides with similarity scores, token counts, and the specific web platform features each one uses. The retrieve command dumps the full Markdown of the guide to your terminal. You can evaluate exactly what guidance your agent will receive before installing anything.
Combine it with Chrome DevTools for agents
The Chrome team also documented an interesting workflow: combining Modern Web Guidance with Chrome DevTools for agents. The idea is to run performance audits in real-time and inspect the accessibility tree directly from your agent session, then apply code fixes using the guidance skills immediately. Audit → identify → fix, without leaving your development environment.
Is it worth installing?
If you’re building web UIs with AI assistance — yes, right now.
The gap between what modern CSS and HTML can do natively in 2025 and what AI agents typically generate is real and significant. Features like @starting-style, CSS Anchor Positioning, the Popover API, native <dialog> with closedby, container queries, and transition-behavior are cross-browser and production-ready — but most agents don’t use them by default.
Modern Web Guidance closes that gap. It’s an early preview, so expect more skills soon.
Install it, invoke it once on your next web component, and see what your agent should have been generating all along.
