Modern Web Guidance is an agent skill that applies modern best practices to your AI-assisted coding workflow. It helps to steer your coding agent away from legacy workarounds for common web development problems, and instead towards solutions that should use newer web platform features.
Installation
Modern Web Guidance skills can be installed in a wide variety of agents, giving you the ability to preserve your preferred workflow while still benefiting from the guidance they provide.
modern-web-guidance CLI (recommended)
The recommended installation method is through the modern-web-guidance CLI built by the Chrome team. Installing the skills through the modern-web-guidance CLI will automatically keep skills up to date. You can install from the modern-web-guidance CLI like so:
npx modern-web-guidance@latest install
Optionally, if you're developing Chrome extensions, we recommend the following command:
npx modern-web-guidance@latest install --choose
This runs an interactive wizard to install the skills to your preferences.
If you'd prefer to Modern Web Guidance skills without using the modern-web-guidance CLI, read on to learn how to install them for your preferred agent.
Antigravity
Download Antigravity and enable "modern-web-guidance" during the installation flow, or from your Settings page under Customizations then Build with Google Plugins.
Antigravity CLI
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Gemini CLI
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
JetBrains WebStorm
You can find the Modern Web Guidance skills in the Skill Manager, available under Settings > AI Assistant > Skills. Select a skill to open its details page. To install the skill, click the Install button to apply it to current IDE instance.
GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
Installing Modern Web Guidance for use with Claude Code takes three steps:
1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Install the plugin from the marketplace:
/plugin install modern-web-guidance@googlechrome
3. Reload plugins:
/reload-plugins
Copilot CLI
Installing Modern Web Guidance for use with Copilot takes two steps:
1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Install the plugin from the marketplace:
/plugin install modern-web-guidance@googlechrome
Goose
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Explore before installation
Evaluate the Modern Web Guidance skill guide library prior to installation by searching with a query or retrieving our guides by ID. To do this, use the CLI's search command to find the use case ID using a prompt:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
This will output JSON object in your terminal:
[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"user-experience","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"user-experience","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"user-experience","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]
By reading the description values, you can then choose the id that best reflects your goal, and use the retrieve command
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
In this case, the guide Markdown for the animate-to-from-top-layer use case will display in the terminal. For other use cases, replace animate-to-from-top-layer with any valid use case ID.
Why use Modern Web Guidance?
Modern Web Guidance skills provide a benefit to the web developer over unassisted AI models for three distinct reasons:
- AI coding agents tend to default to older, outdated solutions to modern web development problems. These solutions often contain JavaScript to provide functionality for problems that are better solved by modern CSS and HTML APIs.
- AI models historically haven't been aware of—or have incorrect information about—the latest web platform features.
- Finally, AI models tend to make outdated recommendations that don't take project requirements or browser support criteria into account—rather than tailoring guidance to the Baseline requirements of a given project.
Modern Web Guidance skills address these shortcomings, and ensure that your AI-assisted coding workflow has the tools to adopt newer web platform features first—and with fallbacks in mind.
What's in Modern Web Guidance?
Modern Web Guidance includes best practices for over 100 web development use cases across several core disciplines. Under the hood, it's a single agent skill that instructs your coding agent how to call the modern-web-guidance CLI to find and retrieve the best guidance for your use case.
- User experience: View transitions, CSS
scrollbar-colorstyling, and entry and exit animations. - CSS: Container queries, modern color spaces such as
oklch, CSS subgrid layout,text-wrap, and typography line-height trimming. - Performance: Interaction to Next Paint (INP) diagnostics,
scheduler.yieldfor breaking up long tasks, background task scheduling, and image loading prioritization. - Forms: Auto-sizing input fields (
field-sizing: content), and accurate validation styles with:user-invalid. - Built-in UI components: Direct control over dialogs, CSS Anchor Positioning for tooltips, and
popover. - Accessibility: Accessible error announcements, and keyboard focus management.
- Built-in AI: Use local, on-device client models (native Language Detection, Summarization, and Translation APIs).
- Passkeys: Passkey registration, authentication, and management.
These are a few of the use cases from each discipline. To see all use cases, you can view the full list of use cases.
Baseline
Baseline brings clarity around which web features are interoperable in major browser engines to developers. If a web feature is Baseline, you can trust the level of browser compatibility. Web features fall into one of three categories defined by Baseline:
- Limited availability means the feature is not interoperable.
- Newly available means the feature recently became interoperable within the last 30 months.
- Widely available means the feature has been interoperable for at least 30 months or more.
While Baseline is a definition for web feature interoperability, it's also a configurable aspect of your project. You can choose a Baseline target, then configure your project to use it by adding it to your AGENTS.md or CLAUDE.md file, for example:
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance and feature fallbacks
Modern Web Guidance uses a wide array of modern web features. Some of these might be Baseline Newly or Widely available, but some might be Limited availability. In cases where a feature isn't Widely available, use case guides provide agents with specific instructions on how to ensure broader compatibility in browsers that don't support the feature. In many cases, fallbacks are implemented as progressive enhancements where the modern feature is able to be used wherever it's supported. If a polyfill is needed for unsupported browsers, agents are always instructed to load them conditionally so they only incur a cost where necessary.
How is accuracy ensured?
Each use case in Modern Web Guidance contains a guide, and most use cases are continuously calibrated to steer AI agents toward quality output.
Use cases that are calibrated use an automated QA harness to test for correct agent behavior, with Playwright playing a central role:
- For each guide, a Playwright script is developed to test if the guide's implementation details were followed—for example, if
@media (prefers-reduced-motion: reduce)was observed where it's a requirement. - These Playwright scripts continuously calibrate against a "correct" reference demo implementation that expects a 100% pass rate. On the other end, the scripts check against a deliberately flawed implementation that expects a 0% pass rate.
- If either or both of the "correct" and deliberately flawed implementations fail to produce 100% and 0% pass rates, respectively, a generator automatically retries using context until 100% calibration is achieved.
- Finally, end-to-end evaluations on a base application are applied. One of these evals is unguided, which is a control, using the default training data without invoking Modern Web Guidance skills to complete a task. Another eval (the experiment) addresses the same task using Modern Web Guidance skills.
Our evals run daily with state-of-the-art models and coding agents, giving us a clear picture of how well agents perform with and without our guidance. On average, early results show a 37 percentage point improvement in adherence to modern best practices when agents are equipped with Modern Web Guidance. However, your results may vary depending on your project requirements, model, the prompts you write, and your preferred agentic coding tools.
Next steps
Now you have a general overview of Modern Web Guidance, and the potential it has to make it easier to adopt modern web best practices in your AI coding workflow. You can now explore the skills and use cases provided by Modern Web Guidance.