What is Modern Web Guidance?
Modern Web Guidance is a set of skills from the Chrome team, built with Edge, Firefox and MDN, that keeps coding agents from writing outdated web code. Models trained on years of older examples often reach for legacy JavaScript and CSS patterns even when the browser now has a built-in feature. It sits in the Agent Skills & Plugins category of the Agents & Automation tools and is open-source, licensed Apache-2.0.
Overview
Modern Web Guidance is a set of skills from the Chrome team, built with Edge, Firefox and MDN, that keeps coding agents from writing outdated web code. Models trained on years of older examples often reach for legacy JavaScript and CSS patterns even when the browser now has a built-in feature. This project gives the agent current guidance and browser compatibility data to use instead.
Each skill tells the agent to call the modern-web-guidance CLI. The agent runs search, which matches its query to a guide locally with an offline embedding model and BM25 search, with no network calls or API keys. It then runs retrieve to load that guide's code patterns, gotchas and fallbacks into its context.
The guides cover 250 modern web features and 203 real-world developer use cases across CSS and layout, JavaScript and APIs, and HTML and DOM, plus accessibility, performance, forms and built-in browser AI. The README says the content is token-efficient, with material the models already know pruned out. A legacy-scan command also checks an existing codebase for outdated patterns. Version 1.0.0 was released on 10 November 2026.
What it does
- Offline search and retrieval: guides are matched locally with embeddings and BM25, no API key needed
- 250 modern web features and 203 use cases, from CSS layout to built-in on-device AI
- legacy-scan command that flags legacy patterns in your project
- Token-efficient guides that leave out what models already know
- Install routes for the Vercel skills CLI, the GitHub CLI and Google Antigravity
- Apache-2.0 licensed
Getting started
Installed through an npx wizard or the skills CLI; the CLI commands below are the ones the agent calls for you.
Run the installer
The interactive wizard sets the skills up for your agent.
npx modern-web-guidance@latest installOr install with the skills CLI
npx skills add GoogleChrome/modern-web-guidanceTry the CLI by hand
Search for a guide, then retrieve it by its ID.
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"Scan an existing project
legacy-scan reports legacy patterns in the current folder.
npx modern-web-guidance@latest legacy-scan .Commands and code are distilled from the project's own documentation — always check the official repo for the latest.
When to use it
- Stop an agent from writing 2019-style JavaScript when a native web feature exists
- Check an existing front-end codebase for legacy patterns with legacy-scan
- Give a team the same browser-compatibility guidance across several coding agents
- Get accessibility and performance patterns into agent-written UI code
How Modern Web Guidance compares
Modern Web Guidance alongside other open-source agent skills & plugins tools AI/TLDR tracks, ranked by GitHub stars.
| Tool | Stars | What it does |
|---|---|---|
| Skills for Real Engineers | ★ 321k | Matt Pocock's everyday agent skills for coding agents, covering alignment grilling, planning, code review and research — small, composable and meant to be edited. |
| Superpowers | ★ 316k | A composable skills plugin that installs a spec-first, TDD, subagent-driven development methodology into Claude Code, Codex, Cursor, Gemini CLI and other coding harnesses. |
| ECC | ★ 301k | An installable plugin that adds 68 agents, 286 skills, hooks, rules, memory and an agent-config security scanner to Claude Code, Codex and other coding harnesses. |
| Karpathy Coding Guidelines | ★ 232k | A Claude Code plugin and CLAUDE.md rule set built from Andrej Karpathy's observations on LLM coding pitfalls: think before coding, keep it simple, make surgical changes, and work to verifiable success criteria. |
| Ponytail | ★ 188k | A skill and plugin that makes a coding agent take the laziest correct route — a seven-rung ladder from "does this need to exist?" to "the minimum that works" — while keeping validation, security and accessibility off the chopping block. |
| Caveman | ★ 119k | A skill plus local proxy that shortens an AI coding agent's prose while leaving code, commands and paths untouched — the rule file cuts what the agent writes, the proxy compresses what it reads. |
| Addy’s Agent Skills | ★ 115k | A pack of production engineering skills for AI coding agents, with nine lifecycle slash commands — /spec, /plan, /build, /test, /review, /ship — installable into 70+ agents. |
| Modern Web Guidance | — | Chrome-team skills that steer coding agents toward modern web platform features |