Chrome 团队刚开源了一套给编码智能体用的 Skill：Modern Web Guidance。它想解决的问题很具体：模型训练数据里全是老写法，让它写个弹窗、做个提示气泡，它很可能还是上一堆 JavaScript，而不是用浏览器现在已经原生支持的方案。这个项目把现代 Web 平台的最佳实践和浏览器兼容性数据整理成短小的指南，让智能体在写代码时按需去查。
仓库今天冲上趋势榜，当日新增 Star 接近 1900。它由 Chrome、Edge、Firefox 和 MDN 团队一起维护，不是单家浏览器厂商的私货，这也是它值得多看一眼的原因。
它解决什么问题
编码智能体写前端时常见的毛病：就算模型知道某个新 API 存在，也缺少足够多的真实落地写法，最后还是倾向于旧模式，比如手写 JS 做动画、引一个体积不小的 polyfill。
Modern Web Guidance 的做法是把专家写好的指南放进一个 CLI，智能体需要时搜索并取回对应指南，只把相关内容塞进上下文。项目说明里提到，指南会通过评测剔除模型本来就会的内容，尽量省 token。
覆盖范围大致分几块：
- 用户体验：View Transitions、进入/退出动画、滚动视差等
- CSS 布局：容器查询、subgrid、oklch 等色彩空间、text-wrap 调整
- 性能：预加载、INP 诊断、用
scheduler.yield拆分任务 - 表单与 UI 组件：Anchor Positioning 做提示气泡、Popover API、dialog、
:user-invalid校验 - 无障碍：屏幕阅读器与键盘操作
- 内置 AI：浏览器本地的翻译、摘要和语言检测 API
README 里列的特性清单共 250 项，其中 CSS 与布局相关占了 140 项。
怎么用
需要 Node.js 22 或更高版本。最省事的是跑交互式安装向导：
npx modern-web-guidance@latest install
不想安装可以先试用 CLI：
按场景搜索相关指南：
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
按 ID 取回一篇指南：
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
扫描代码库里的过时写法：
npx modern-web-guidance@latest legacy-scan .
其中 legacy-scan 我觉得挺实用，不开智能体也能当作老项目的现代化体检。
也可以走各家工具自己的插件机制。以 Claude Code 为例：
/plugin marketplace add GoogleChrome/modern-web-guidance
/plugin install modern-web-guidance@googlechrome
README 里还给了 Vercel Skills CLI（npx skills add GoogleChrome/modern-web-guidance）、GitHub CLI、Copilot CLI、OpenAI Codex、Antigravity、Kimi Code 和 Grok Build CLI 的安装方式。
Skill 包有两个：modern-web-guidance（约 205 token）和 chrome-extensions（约 175 token，覆盖 Manifest V3、后台 worker、扩展 API 和商店发布），后者用 install --choose 选装。
效果有没有数据
项目自带一套评测：在真实的示例 Web 应用上给智能体布置任务，再用 Playwright 检查实现是否到位，对比有指南和没指南的通过率。README 里贴了 11 月 8 日的一轮结果：
| 智能体 + 模型 | 无指南 → 有指南 |
|---|---|
| antigravity_cli（gemini-4-argon） | 58% → 94% |
| codex_cli（gpt-6.1-sol） | 54% → 82% |
| claude_code（opus-5-5） | 57% → 88% |
这是项目方自己跑的评测，任务也是他们自己设计的，参考价值有，但别当成通用结论。完整数据在项目的 Eval Dashboard 里能看。
适合谁，注意什么
- 经常让智能体写前端的人：装上之后，生成的代码更可能用到原生能力
- 维护老前端项目的人：
legacy-scan可以先扫一遍 - 想了解现代 Web 平台特性的人：指南本身就是一份按场景整理的资料
需要留意的是，项目会收集匿名使用数据，内容包括安装次数、调用它的智能体名称、取回的指南 ID，以及智能体生成的搜索词，装之前最好看一下它的隐私说明。另外 GoogleChrome/modern-web-guidance-src 是源码仓库，用于编写、校准和评测指南，日常安装用的是官方文档里给出的命令或 GoogleChrome/modern-web-guidance 这个分发仓库。
项目信息
- 语言：TypeScript
- License：Apache-2.0
- Star：截至 2026-11-13 约 4100
- npm 包：modern-web-guidance（当前版本 1.0.0）
- GitHub：GitHub - GoogleChrome/modern-web-guidance-src: Keep your coding agent up to date with the latest web best practices · GitHub
- 官方文档：Modern Web Guidance | Chrome for Developers