How to find and modernize legacy web code with Modern Web Guidance in Claude Code

Modern Web Guidance is a set of coding-agent skills stewarded by the Google Chrome team with the Microsoft Edge, Mozilla Firefox and MDN teams. It steers agents away from the legacy patterns common in training data and toward modern browser features. Version 1.0, released November 10, adds a modernization workflow that finds legacy patterns in your project and helps upgrade them.

1. Install it. Installing through the Chrome team's CLI keeps it updated automatically.

npx modern-web-guidance@latest install

If you already have it, update to 1.0 or later.

npx modern-web-guidance@latest update

Or install it as a Claude Code plugin.

claude plugin install modern-web-guidance@claude-plugins-official

In Codex, run codex plugin marketplace add GoogleChrome/modern-web-guidance, then codex plugin add modern-web-guidance@googlechrome.

1. Ask your agent to check a repository or folder for "legacy patterns" or to "modernize" it. Naming a single component does a regular guide lookup instead.

2. You can also try it before installing.

npx modern-web-guidance@latest legacy-scan .
npx modern-web-guidance@latest search "animate a dialog modal backdrop"

legacy-scan parses HTML, CSS, JavaScript/TypeScript, framework components and package.json locally with AST, DOM and CSS parsers, with no LLM calls or token cost. It checks the roughly 20% of the ~200 guides where legacy code can be spotted deterministically; for the rest, your agent searches and retrieves guides as it works.