G
GoogleChrome/modern-web-guidance-src
Keep your coding agent up to date with the latest web best practices
在 GitHub 查看 ↗链接已于 2026-11-14 核查 · HTTP 200 · 打开的是厂商自己的官网
安装与配置
客户端配置（取自该仓库的安装命令）
{
"mcpServers": {
"googlechrome-modern-web-guidance-src": {
"command": "npx",
"args": ["modern-web-guidance@latest"]
}
}
}解析自我们于 2026-11-12 抓取的该仓库 README；我们未执行过。
command/args 来自仓库写明的安装命令；不确定时请以该项目 README 为准。
VS Code（.vscode/mcp.json —— 键名是 servers）
{
"servers": {
"googlechrome-modern-web-guidance-src": {
"command": "npx",
"args": ["modern-web-guidance@latest"]
}
}
}VS Code 顶层键是 <code>servers</code>，其余与上面那份相同。
Claude Code（命令行）
claude mcp add --transport stdio googlechrome-modern-web-guidance-src -- npx modern-web-guidance@latest
Claude Code 不收 JSON 文件，用这条命令直接加。
配置项的键名以你的客户端为准：客户端与 CLI
- ★ 数取值
- 4,651 ★ · GoogleChrome/modern-web-guidance-src · 取自 GitHub 搜索 API · （2026-11-13 20:00:50 核对）
- 来源明细
- 从该仓库的 GitHub 页面直接读取 · 条目类型：开源项目
- 收录与活跃
- 收录于 2026-11-13 · 最近见到 2026-11-14 · 共见到 2 次 · 被 1 个来源列出
- 安装
npx modern-web-guidance@latest
常见问题（答案都来自我们的记录）
怎么安装？
该仓库给出的安装命令是
npx modern-web-guidance@latest。我们的记录里它是仓库自己提供的；不保证在你的客户端上直接可用。它适合谁 / 用来做什么？
我们还没有为它记录标签。
谁维护它、还在更新吗？
仓库
GoogleChrome/modern-web-guidance-src；我们收录于 2026-11-13；最近见到 2026-11-14。这里没有"官方认证"或"质量评级"——我们只记录来源与时间。# 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).
收录徽章（可选）
想把收录标记放进 README 就复制这行，可选，不影响收录。
[](https://anclum.com/zh/s/googlechrome-modern-web-guidance-src/)
- 来源
- github · https://github.com/GoogleChrome/modern-web-guidance-src
- Traction
- 4,651 ★
- 收录于
- 今天