G
GoogleChrome/modern-web-guidance-src
Keep your coding agent up to date with the latest web best practices
View on GitHub ↗Link checked 2026-11-14 · HTTP 200 · opens the vendor's own site
Install & config
Client config (built from the install command this repo gives)
{
"mcpServers": {
"googlechrome-modern-web-guidance-src": {
"command": "npx",
"args": ["modern-web-guidance@latest"]
}
}
}Parsed from the README we fetched on 2026-11-12; we have not executed it.
command/args come from the install command the repository states. When it is ambiguous, the project README wins.
VS Code (.vscode/mcp.json - the key is servers)
{
"servers": {
"googlechrome-modern-web-guidance-src": {
"command": "npx",
"args": ["modern-web-guidance@latest"]
}
}
}Same server, but VS Code keeps it under <code>servers</code>.
Claude Code (command line)
claude mcp add --transport stdio googlechrome-modern-web-guidance-src -- npx modern-web-guidance@latest
Claude Code does not read a config file; add the server with this command.
Key names differ by client: Clients & CLI
- Star count
- 4,651 ★ · GoogleChrome/modern-web-guidance-src · read from the GitHub search API · (checked 2026-11-13 20:00:50)
- Source
- read directly from its GitHub page · type: open-source project
- Harvest history
- first seen 2026-11-13 · last seen 2026-11-14 · seen 2× · listed by 1 sources
- Install
npx modern-web-guidance@latest
FAQ (answers come from our records)
How do I install it?
The repository provides this install command:
npx modern-web-guidance@latest. It comes from the repository itself; we cannot guarantee it runs as-is in your client.Who is it for?
We have no tags recorded for it yet.
Who maintains it?
repository
GoogleChrome/modern-web-guidance-src；first catalogued 2026-11-13；last seen 2026-11-14。There is no official certification or quality rating here — we record sources and dates only.# Modern Web Guidance (Source)
以下摘录自该仓库的 README（片段） · 在 GitHub 读完整 README →
This repo is the source repository for GoogleChrome/modern-web-guidance and includes the code and documentation for authoring, calibrating, and evaluating its contents.
Modern Web Guidance is a set of skills that embed web platform expertise, best practices, and browser compatibility data directly into your coding agents. It helps to steer your coding agents away from legacy patterns, and instead toward solutions that harness the power and capabilities of the modern web platform.
See CONTRIBUTING.md and GOVERNANCE.md for how we work on the project and orientation of the codebase.
Stewarded by the Google Chrome, Microsoft Edge, Mozilla Firefox, and MDN teams, alongside the web development community.
Documentation · Eval Dashboard · Source Code · Report an Issue
## Quickstart
shell
npx modern-web-guidance@latest install
This command runs an interactive wizard to install Modern Web Guidance. See Alternative Installation Methods below.
#### Try it out (without installing)
shell
# Search for relevant guides
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
# Retrieve a guide by ID
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
# Scan a codebase for legacy patterns to modernize
npx modern-web-guidance@latest legacy-scan .
## Why?
Coding agents often default to older patterns because LLM training data contains vast amounts of legacy code. This often leads them to generate bloated JavaScript for tasks that now have native, high-performance web platform solutions.
Even if a model knows an API exists, it often lacks the density of real-world, modern implementation patterns required for production-ready code.
Modern Web Guidance bridges this gap. Our skill's CLI returns targeted, expert-curated guidelines directly into your agent's context window, focusing on:
Modern Browser APIs: Helping models correctly structure APIs they frequently misuse.
Performance & Accessibility: Preferring platform-level APIs that can be optimized by the browser and include built-in accessibility affordances.
Responsible Fallbacks: Guiding models to use sensible, lightweight fallbacks instead of heavy polyfills or legacy libraries.
## What's Included?
We cover the past several years of the web platform's new features, all the way up to the cutting edge. The guides are designed to be token-efficient; we run evals enabling us to prune lowest-common-denominator content that models already know.
### Core Disciplines
🎨 User Experience
Smooth visual states (View Transitions, entry/exit animations, parallax scroll, CSS scrollbar-color ).
📐 CSS Layout
Modern layout systems (container queries, subgrid , modern color spaces like oklch , text-wrap tuning, and line-height trimming).
⚡ Performance
Speed optimizations (instant preloading, Interaction to Next Paint (INP) diagnostics, and scheduling tasks via scheduler.yield ).
📝 Forms & UI
Native components (Anchor Positioning for tooltips, Popover API, dialogs, :user-invalid validation, and auto-sizing fields).
♿ Accessibility
Important considerations (screen reader and keyboard operability, content navigation and discoverability).
🤖 Built-in AI
Local client models (native translation, summarization, and language detection APIs).
Modern Web Guidance is a set of skills that embed web platform expertise, best practices, and browser compatibility data directly into your coding agents. It helps to steer your coding agents away from legacy patterns, and instead toward solutions that harness the power and capabilities of the modern web platform.
See CONTRIBUTING.md and GOVERNANCE.md for how we work on the project and orientation of the codebase.
Stewarded by the Google Chrome, Microsoft Edge, Mozilla Firefox, and MDN teams, alongside the web development community.
Documentation · Eval Dashboard · Source Code · Report an Issue
## Quickstart
shell
npx modern-web-guidance@latest install
This command runs an interactive wizard to install Modern Web Guidance. See Alternative Installation Methods below.
#### Try it out (without installing)
shell
# Search for relevant guides
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
# Retrieve a guide by ID
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
# Scan a codebase for legacy patterns to modernize
npx modern-web-guidance@latest legacy-scan .
## Why?
Coding agents often default to older patterns because LLM training data contains vast amounts of legacy code. This often leads them to generate bloated JavaScript for tasks that now have native, high-performance web platform solutions.
Even if a model knows an API exists, it often lacks the density of real-world, modern implementation patterns required for production-ready code.
Modern Web Guidance bridges this gap. Our skill's CLI returns targeted, expert-curated guidelines directly into your agent's context window, focusing on:
Modern Browser APIs: Helping models correctly structure APIs they frequently misuse.
Performance & Accessibility: Preferring platform-level APIs that can be optimized by the browser and include built-in accessibility affordances.
Responsible Fallbacks: Guiding models to use sensible, lightweight fallbacks instead of heavy polyfills or legacy libraries.
## What's Included?
We cover the past several years of the web platform's new features, all the way up to the cutting edge. The guides are designed to be token-efficient; we run evals enabling us to prune lowest-common-denominator content that models already know.
### Core Disciplines
🎨 User Experience
Smooth visual states (View Transitions, entry/exit animations, parallax scroll, CSS scrollbar-color ).
📐 CSS Layout
Modern layout systems (container queries, subgrid , modern color spaces like oklch , text-wrap tuning, and line-height trimming).
⚡ Performance
Speed optimizations (instant preloading, Interaction to Next Paint (INP) diagnostics, and scheduling tasks via scheduler.yield ).
📝 Forms & UI
Native components (Anchor Positioning for tooltips, Popover API, dialogs, :user-invalid validation, and auto-sizing fields).
♿ Accessibility
Important considerations (screen reader and keyboard operability, content navigation and discoverability).
🤖 Built-in AI
Local client models (native translation, summarization, and language detection APIs).
Listed badge (optional)
Copy this line into the README if you want the listing mark. Optional, and it does not affect being listed.
[](https://anclum.com/en/s/googlechrome-modern-web-guidance-src/)
- Source
- github · https://github.com/GoogleChrome/modern-web-guidance-src
- Traction
- 4,651 ★
- added
- today