Modern Web Guidance：让编码代理优先使用现代Web平台API
给编码代理补上现代Web平台经验，少生成遗留写法，直接把指南注入上下文。
GitHub GoogleChrome/modern-web-guidance-src 更新 2026-11-12 分支 main 星标 1.8K 分叉 141
TypeScript Astro 编码代理 现代Web API

🧭 决策指南

为什么现在热： 无法从材料判断

适合，如果你

  • 你的团队使用编码代理生成现代CSS、HTML或JavaScript代码。
    README 的 Why? 章节说明该项目把现代Web平台指南返回到编码代理的上下文中。
  • 你希望代理优先采用原生API而不是重型polyfill或遗留库。
    README 列表项 Modern Browser APIs 与 Responsible Fallbacks 明确提到原生平台API、轻量回退和避免重型polyfill。
  • 你的前端问题涉及250项现代Web特性中的CSS布局能力。
    README 的 The full list 章节写明包含250项特性，其中CSS & Layout有140项。

不适合，如果你

  • 你需要README未提供的Node.js版本、浏览器支持范围或安装前置条件。
    提供的README仅在Quickstart给出npx命令，未说明Node.js版本、浏览器矩阵或其他前置条件。
  • 你必须先依据完整评测结果判断生产可靠性。
    README列出Evals to prove this works well和Recent eval results snapshot章节，但提供材料未包含其内容。
  • 你的项目只依赖遗留库且不使用编码代理生成Web代码。
    README的Why?章节将目标描述为引导coding agents远离legacy patterns并使用现代Web平台能力。

前置条件

  • README的Quickstart提供`npx modern-web-guidance@latest install`，但未说明Node.js或npm版本要求。
  • 项目README说明仓库包含authoring、calibrating和evaluating内容所需的代码与文档。

第一步命令（README 原文）

npx modern-web-guidance@latest install

要注意

  • 不要把250项特性列表当成完整浏览器兼容性矩阵使用。
    README展示了250 modern web features及特性链接，但提供材料未给出完整兼容性矩阵。
  • 安装命令使用latest，README未说明版本锁定或回滚方式。
    Quickstart原文是`npx modern-web-guidance@latest install`，提供材料未包含Updating或Alternative Installation Methods章节内容。
  • CSS布局覆盖140项，但HTML DOM和JavaScript API的细项内容在材料中被省略。
    README明确给出CSS & Layout的140 features，同时标注HTML & DOM和JavaScript & APIs章节因篇幅省略。

材料未说明

  • 未说明支持的Node.js、npm或npx版本。
  • 未说明安装后具体支持哪些编码代理或编辑器。
  • 未提供浏览器兼容性数据的来源、刷新频率和具体展示方式。
  • 未提供Recent eval results snapshot的指标、样本量和结果。
  • 未说明Telemetry & Privacy章节中的遥测开关、数据内容和默认行为。
  • 未说明Available Skill Packs的数量、内容和选择方式。
  • 未说明`.mwgrc`配置项及其默认值。
  • 未说明生产环境中的网络依赖、安装体积和运行时开销。
  • 未说明250项现代Web特性的浏览器版本覆盖范围。

💡 深度解析

6
适合 我需要为现代 CSS、HTML/DOM 和 JavaScript API 编写并校准代理指导，还要用评估结果验证它是否减少遗留实现；这个源代码仓库适合我参与吗？
适合读者： 希望编写、校准并评估编码代理指导内容的 Web 平台专家或浏览器工具工程师

适合，因为这个仓库不是只提供安装包，而是明确包含指导内容的编写、校准和评估代码。

  • README 开头将仓库定义为 Modern Web Guidance 的 source repository，并说明包含 “authoring, calibrating, and evaluating its contents”。
  • README 提供 Eval Dashboard、Source Code、CONTRIBUTING.md 和 GOVERNANCE.md 链接，说明项目为贡献和评估设置了明确入口。
  • 项目洞察指出仓库覆盖约 250 项现代 Web 特性，并通过 eval 验证指导是否改善代理输出。
  • 代码以 TypeScript 为主，另有 JavaScript、CSS、HTML 和 Astro，适合同时处理工具链、内容和展示页面。

但它更适合熟悉 Web 平台规范、兼容性、提示设计和评估方法的贡献者。README 摘要没有给出评估任务格式、评分指标或校准通过标准。

  • README：项目介绍 — “includes the code and documentation for authoring, calibrating, and evaluating its contents”
  • README：链接区 — “Eval Dashboard”“CONTRIBUTING.md”“GOVERNANCE.md”
  • 项目洞察：technical_approach — “围绕约250项现代Web特性组织”
  • 项目数据：TypeScript 3,461,117 bytes，占主要代码量
材料未说明：README 摘要未提供 eval 的任务定义、评分维度、基线代理和统计显著性要求；未说明贡献者运行完整校准与评估流程所需的环境和命令
适合 我使用编码代理开发同时面向 Chrome、Edge 和 Firefox 的前端页面，并希望它在处理 CSS、HTML、DOM 和 JavaScript API 时少生成遗留代码；Modern Web Guidance 适合直接接入吗？
适合读者： 使用编码代理生成前端代码、需要覆盖 Chrome、Edge、Firefox，并希望优先采用现代原生 Web API 的 Web 开发者

适合，因为它正是把现代 Web 平台知识和浏览器兼容性数据注入编码代理上下文的工具，而不是要求你重构应用架构。

  • README 的 “Why?” 说明它会把代理从遗留模式引向现代平台能力，并覆盖性能、可访问性和回退策略。
  • “CSS & Layout”列出 140 项特性；README 还列出 HTML & DOM、JavaScript & APIs 分类，覆盖面与前端任务直接匹配。
  • 项目由 Chrome、Edge、Firefox 和 MDN 团队及社区共同维护，适合需要跨浏览器视角的代码生成。

它不能替代真实的跨浏览器测试、可访问性审计或性能验证；README 也没有承诺所有特性在三个浏览器中具有相同支持状态。

  • README：Why? — “embed web platform expertise, best practices, and browser compatibility data directly into your coding agents”
  • README：Why? — “Performance & Accessibility”与“Responsible Fallbacks”
  • README：CSS & Layout — “140 features”
  • README：项目介绍 — “Stewarded by the Google Chrome, Microsoft Edge, Mozilla Firefox, and MDN teams”
npx modern-web-guidance@latest install
材料未说明：README 摘要未给出每项特性在 Chrome、Edge、Firefox 各版本中的具体支持矩阵；未说明你的具体编码代理如何加载和遵循安装后的 skill
视情况 我需要在企业网络中通过私有 npm 镜像安装并更新编码代理指导，还要满足供应链审计和版本可追溯要求；这个项目适合直接纳入内部工具链吗？
适合读者： 受企业网络、私有 npm 镜像和供应链审计约束，负责内部编码代理安装与更新的工具链工程师

视情况，因为项目提供 npm/npx 快速安装入口，但当前资料不足以证明它已经满足企业镜像、离线部署和版本治理要求。

  • README 的 Quickstart 只有 npx modern-web-guidance@latest install，说明默认路径依赖 npm/npx 和在线安装流程。
  • README 另设 “Alternative Installation Methods”“Updating”以及 “Telemetry & Privacy”章节，表明这些企业采用问题被考虑过，但摘要没有给出具体实现。
  • 项目洞察明确指出，企业网络、私有镜像、供应链审计和离线环境可能增加部署难度。
  • 项目数据只有 1 个 release，最新 release 为 audit-data，不能仅凭此确认稳定的发布和回滚流程。

因此它可以进入技术评估，但不能从现有 README 直接得出“可无条件上线”的结论。需要先确认镜像兼容、离线包获取、遥测行为和版本锁定方式。

  • README：Quickstart — `npx modern-web-guidance@latest install`
  • README：Alternative Installation Methods、Updating、Telemetry & Privacy
  • 项目洞察：common_pitfalls — “企业网络、私有镜像、供应链审计或离线开发环境可能增加部署和更新难度”
  • 项目数据：release_count = 1；latest_release = `audit-data`
npx modern-web-guidance@latest install
材料未说明：README 摘要未说明私有 npm 镜像、离线安装和锁定版本的具体步骤；未说明默认是否发送遥测、如何关闭以及企业审计所需的 SBOM 或签名信息；未说明 `audit-data` 是否为正式稳定发布
视情况 我维护一个必须兼容旧版企业浏览器和部分 WebView 的 Web 项目，同时要求键盘操作和屏幕阅读器可用；如果编码代理安装 Modern Web Guidance，我能否让它默认采用新 CSS 和浏览器 API？
适合读者： 维护需要旧版企业浏览器、WebView 或特殊辅助技术兼容性的企业级 Web 项目负责人

视情况，因为项目强调现代原生能力，但旧版企业浏览器、WebView 和辅助技术的实际支持边界可能使代理推荐的方案需要回退。

  • README 的 “Why?” 明确包含浏览器兼容性数据和 “Responsible Fallbacks”，因此它不是无条件要求使用最新 API。
  • 同一章节强调性能与可访问性，能够为平台级能力和合理回退提供方向。
  • 但项目洞察明确指出，现代 API 的可用性受浏览器版本、WebView 内核、嵌入环境和企业策略影响；安装指导不等于完成跨浏览器、无障碍或运行时验证。

在你的约束下，它更适合作为代理的决策上下文，而不是把新特性设为无条件默认。README 摘要没有给出旧浏览器和具体 WebView 的支持清单。

  • README：Why? — “browser compatibility data”
  • README：Why? — “Responsible Fallbacks: Guiding models to use sensible, lightweight fallbacks”
  • README：Why? — “Performance & Accessibility”
  • 项目洞察：usage_limitations — “现代API的可用性受浏览器版本、操作系统、WebView内核、嵌入环境和企业策略影响”
npx modern-web-guidance@latest install
材料未说明：README 未说明目标旧版浏览器、WebView 版本和辅助技术的逐项兼容性；未说明安装后的配置是否能直接表达企业项目的浏览器支持矩阵
适合 我负责统一团队的现代 CSS、HTML 和 JavaScript 规范，并让多个编码代理减少对重型库、polyfill 和遗留实现的依赖；这个项目能否作为团队级指导层，而不是运行时依赖？
适合读者： 负责统一前端规范、同时维护多个编码代理工作流的前端技术负责人

适合，因为它通过 CLI 和技能内容影响编码代理上下文，主要改变生成阶段的决策，不要求业务项目引入运行时库。

  • README 将项目定义为可直接嵌入 coding agents 的 skills，目标是减少 legacy patterns。
  • “Why?”指出它优先使用浏览器原生、高性能能力，并指导代理采用轻量回退，而非重型 polyfill 或遗留库。
  • 项目洞察说明内容与执行机制分离，CLI、指导内容和评估体系独立于被指导项目的业务代码。
  • README 提供 .mwgrc 项目配置章节，说明存在按项目调整指导行为的入口。

不过它不是 lint、编译器或安全扫描器，团队仍需确认各代理实际读取 skill 的方式。当前项目只有 1 个 release，正式纳入统一工具链前还需核验版本治理。

  • README：项目介绍 — “a set of skills that embed web platform expertise ... directly into your coding agents”
  • README：Why? — “native, high-performance web platform solutions”
  • README：Why? — “sensible, lightweight fallbacks instead of heavy polyfills or legacy libraries”
  • README：Project Configuration — `.mwgrc`
  • 项目数据：release_count = 1
npx modern-web-guidance@latest install
材料未说明：README 摘要未列出所有支持的编码代理及其 skill 加载格式；未说明 `.mwgrc` 可配置的完整字段和团队级分发方式
适合 我维护一个以 TypeScript 为主、同时包含 JavaScript、CSS、HTML 和 Astro 的开发者工具仓库，并想为编码代理提供现代 Web 平台上下文；Modern Web Guidance 与我的技术栈匹配吗？
适合读者： 使用 TypeScript、JavaScript、CSS、HTML 和 Astro 维护前端脚手架及开发者工具的工程团队

适合，但它的价值主要集中在仓库中会生成或审查浏览器端 CSS、HTML、DOM 和 JavaScript 的部分，而不是所有 TypeScript 或 Astro 代码。

  • 项目数据表明主语言是 TypeScript，同时包含 JavaScript、CSS、HTML 和 Astro；Modern Web Guidance 的内容正围绕这些 Web 平台层组织。
  • README 的特性分类包含 CSS & Layout、HTML & DOM、JavaScript & APIs，且 CSS 分类已有 140 项。
  • 项目洞察说明它通过上下文注入工作，不要求引入应用运行时依赖，因此适合作为开发者工具链的辅助层。

如果你的仓库主要是 CLI 内部逻辑、后端代码或 Astro 构建配置，直接收益会较小。README 摘要没有按语言或任务类型提供效果拆分，也没有证明它能改善所有 TypeScript 生成任务。

  • 项目数据：main_language = TypeScript；语言分布包含 JavaScript、CSS、HTML、Astro
  • README：Why? — “CSS & Layout (140 features)”
  • README：后续分类 — “HTML & DOM (36 features)”与“JavaScript & APIs (74 features)”
  • 项目洞察：architectural_strengths — “上下文注入方式对现有编码代理和项目技术栈侵入较低”
npx modern-web-guidance@latest install
材料未说明：README 未说明 Astro 模板、构建配置和 CLI 内部 TypeScript 任务是否有专门指导；未提供按语言分组的评估结果或收益数据

✨ 核心亮点

  • 覆盖250项现代Web特性，含140项CSS与布局特性
  • 用CLI把专家策划指南直接返回编码代理上下文
  • 强调原生API、性能、无障碍与轻量回退方案

🔧 工程化

  • 通过modern-web-guidance CLI向编码代理提供现代Web平台指南
  • README列出CSS布局、HTML DOM和JavaScript API特性体系

⚠️ 风险

  • README未展示浏览器兼容性数据的具体使用方式或覆盖范围
  • 项目只有1个版本和10个贡献者，成熟度证据有限
  • README省略评测结果、遥测隐私和配置章节，关键决策信息不完整

👥 适合谁？

  • 使用编码代理生成TypeScript、JavaScript或CSS的Web团队
  • 希望减少遗留库和重型polyfill的前端开发者