【免费下载链接】modern-web-guidance-src项目地址https://gitcode.com/gh_mirrors/mo/modern-web-guidance-src点击查看免费下载Modern Web Guidance是由 Google Chrome 团队主导的开源指南库它为 AI 编程代理提供现代 Web 平台最佳实践涵盖 CSS 布局、表单组件、页面性能优化、Web 安全与无障碍Accessibility的 180 个真实开发场景用例外加 212 个现代浏览器特性条目帮助你的 AI 助手写出更现代、更少祖传代码的前端实现。Modern Web Guidance 性能用例中的优化装饰图片示例用于说明装饰图片的优化交付它解决什么问题为什么 AI 写出的网页代码常常过时AI 编程代理Coding Agent的训练数据里包含海量旧代码因此它们倾向于用陈旧的方案解决本可以原生搞定的问题例如用几百行 JavaScript 实现一个浏览器原生就能完成的弹窗动画加载重量级 polyfill而现代 CSS 属性一行就能实现忽略无障碍与性能基线生成能跑但不好的代码Modern Web Guidance 的思路很直接把专家精选、经过实测校准的指南通过 CLI 检索后注入 AI 的上下文窗口让它优先使用原生 API、合理的降级方案和轻量回退。快速体验无需安装npx modern-web-guidancelatest search animate a dialog modal backdrop180 个真实用例是怎么组织的按 17 个知识域分类全部内容位于 guides/ 目录每个用例一个独立文件夹内含 guide.md指导正文、demo.html黄金示例与expectations.md可测试断言。按目录实测统计各分类的用例数量如下知识域目录用例数代表性场景UI 行为guides/ui-behaviors/44跨文档 View Transitions、视差滚动、物理级缓动性能guides/performance/32拆分长任务、优化 LCP 图片优先级、INP 诊断表单guides/forms/27自动填充地址/支付表单、品牌化 select 样式视觉设计guides/visual-design/27深色模式、等宽文字排版、WebGL 着色器UI 组件guides/ui-components/26导航抽屉、scrollspy 高亮、进度环CSS 布局guides/css/20容器查询、scope、设计令牌响应式安全guides/security/16Passkey 全流程、Trusted Types 防 XSSUI 原子能力guides/ui-atoms/13位置感知 tooltip、滚动进度条HTMLguides/html/11Web Components、Shadow DOM 跨边界样式PWAguides/pwa/9离线加载与更新、Web 应用源迁移JavaScriptguides/js/8Temporal 时间模型、全球日历系统内置 AIguides/built-in-ai/4端侧翻译、摘要、语言检测无障碍guides/accessibility/4错误播报、尊重系统文字缩放WebMCPguides/webmcp/3把表单暴露为 AI 代理可调用工具WASM / 隐私guides/wasm/、guides/privacy/2C/C 编译到 WebAssembly每个用例文件夹长什么样以流体缩放为例一个完整用例包含guide.md —— 给 AI 阅读的操作指南DO / DO NOT 指令 代码片段 回退策略demo.html—— 黄金标准实现评分器要求 100% 通过negative-demo.html—— 反例页面评分器要求 0% 通过expectations.md—— 自然语言断言清单用于自动生成 Playwright 评分器五大核心领域亮点速览 CSS 布局容器查询、:has()、scopeCSS 类是内容最密集的板块之一20 个任务型用例 2 个领域总纲覆盖从响应式排版到设计系统架构fluid-scaling字号、间距随容器宽度平滑缩放替代固定断点style-parent-with-has表单字段失焦后给父级加错误样式size-aware-styling卡片根据自身宽度而非视口切换布局design-token-reactivity密度模式/主题切换时后代组件各自响应⚡ 性能从 LCP 到 INP 的全链路性能类是数量最多的分类32 个围绕 Core Web Vitals 与加载调度展开break-up-long-tasks拆分长任务让浏览器有机会响应用户输入optimize-image-priority提升 LCP 候选图片的加载优先级schedule-tasks-by-priority用 Scheduler API 按优先级排队identify-inp-causes定位拖垮 INP 指标的具体脚本 表单让自动填充和验证原生工作autofill-address-form正确的 autocomplete 取值让地址栏一键填充branded-select-styling品牌化定制 select 的下拉面板而不替换原生控件required-field-feedback必填项错误提示只在用户交互后出现避免页面一打开就红一片 安全Passkey、Trusted Types 与加密passkeysWebAuthn / Passkey 的总纲注册、认证、管理、二次认证共 8 个子用例trusted-types封锁危险 DOM 出口防 DOM 型 XSSclient-side-encryption浏览器内完成含后量子抗性的端到端加密♿ 无障碍屏幕阅读器与系统偏好accessible-error-announcementaria-invalid与视觉:user-invalid状态同步respect-os-text-scale尊重操作系统的文字缩放偏好此外还有端侧 AI 用例translator 本地翻译、summarizer 本地摘要以及面向未来的 WebMCP——把标准 HTML 表单直接暴露为 AI 代理可调用的工具。不只是文档用评测证明指南真的有效Modern Web Guidance 的独特之处在于每条指南都有配套的自动化评测不是拍脑袋的最佳实践。基准应用评测在 src/harness/base-apps/ 下两个真实站点daily-grind博客应用、devtools-times新闻站上进行闭环校准生成的 Playwright 评分器必须对黄金示例 100% 通过、对反例 0% 通过对照实验同一任务分别让 AI无指南与有指南完成测量提升幅度upliftREADME 中的最新评测快照显示接入指南后各模型通过率普遍提升 19~28 个百分点例如 claude_code 从 59% 提升到 87%。如何快速上手两条命令开始使用安装技能npx modern-web-guidancelatest install支持--choose挑选技能包日常检索在 AI 助手遇到前端任务时它会先执行search找到最匹配的指南再用retrieve id取回完整内容注入上下文技术栈与内部机制可以进一步阅读 docs/CONTEXT.md项目架构与gdCLI 流水线、docs/EVALS.md评测框架配置以及 guides/AGENTS.md。如果你正在评估 AI 生成代码的质量这份覆盖 17 个领域、180 个真实场景的指南清单是一个值得逐条对照的现代 Web 开发体检表。赞分享【免费下载链接】modern-web-guidance-src项目地址https://gitcode.com/gh_mirrors/mo/modern-web-guidance-src点击查看免费下载相关推荐Shaft布局系统实战指南Column、Row与嵌套布局的10个技巧Shaft布局系统实战指南Column、Row与嵌套布局的10个技巧 Shaft 是一个用 Swift 编写的跨平台 GUI 框架支持 macOS、LinuTorchCAM安装教程从零开始配置完整AI可视化环境TorchCAM安装教程从零开始配置完整AI可视化环境 TorchCAM是一款专为PyTorch模型设计的类激活图Class Activation Maps人工智能深度学习计算机视觉AI 可解释性moto IAM 服务仿真深度解析180 个 API Action 覆盖全景与源码实现剖析moto IAM 服务仿真深度解析180 个 API Action 覆盖全景与源码实现剖析 本文以 moto 仓库中 docs/docs/services/iMock测试创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
【免费下载链接】modern-web-guidance-src项目地址https://gitcode.com/gh_mirrors/mo/modern-web-guidance-src点击查看免费下载Modern Web Guidance是由 Google Chrome 团队主导的开源指南库它为 AI 编程代理提供现代 Web 平台最佳实践涵盖 CSS 布局、表单组件、页面性能优化、Web 安全与无障碍Accessibility的 180 个真实开发场景用例外加 212 个现代浏览器特性条目帮助你的 AI 助手写出更现代、更少祖传代码的前端实现。Modern Web Guidance 性能用例中的优化装饰图片示例用于说明装饰图片的优化交付它解决什么问题为什么 AI 写出的网页代码常常过时AI 编程代理Coding Agent的训练数据里包含海量旧代码因此它们倾向于用陈旧的方案解决本可以原生搞定的问题例如用几百行 JavaScript 实现一个浏览器原生就能完成的弹窗动画加载重量级 polyfill而现代 CSS 属性一行就能实现忽略无障碍与性能基线生成能跑但不好的代码Modern Web Guidance 的思路很直接把专家精选、经过实测校准的指南通过 CLI 检索后注入 AI 的上下文窗口让它优先使用原生 API、合理的降级方案和轻量回退。快速体验无需安装npx modern-web-guidancelatest search animate a dialog modal backdrop180 个真实用例是怎么组织的按 17 个知识域分类全部内容位于 guides/ 目录每个用例一个独立文件夹内含 guide.md指导正文、demo.html黄金示例与expectations.md可测试断言。按目录实测统计各分类的用例数量如下知识域目录用例数代表性场景UI 行为guides/ui-behaviors/44跨文档 View Transitions、视差滚动、物理级缓动性能guides/performance/32拆分长任务、优化 LCP 图片优先级、INP 诊断表单guides/forms/27自动填充地址/支付表单、品牌化 select 样式视觉设计guides/visual-design/27深色模式、等宽文字排版、WebGL 着色器UI 组件guides/ui-components/26导航抽屉、scrollspy 高亮、进度环CSS 布局guides/css/20容器查询、scope、设计令牌响应式安全guides/security/16Passkey 全流程、Trusted Types 防 XSSUI 原子能力guides/ui-atoms/13位置感知 tooltip、滚动进度条HTMLguides/html/11Web Components、Shadow DOM 跨边界样式PWAguides/pwa/9离线加载与更新、Web 应用源迁移JavaScriptguides/js/8Temporal 时间模型、全球日历系统内置 AIguides/built-in-ai/4端侧翻译、摘要、语言检测无障碍guides/accessibility/4错误播报、尊重系统文字缩放WebMCPguides/webmcp/3把表单暴露为 AI 代理可调用工具WASM / 隐私guides/wasm/、guides/privacy/2C/C 编译到 WebAssembly每个用例文件夹长什么样以流体缩放为例一个完整用例包含guide.md —— 给 AI 阅读的操作指南DO / DO NOT 指令 代码片段 回退策略demo.html—— 黄金标准实现评分器要求 100% 通过negative-demo.html—— 反例页面评分器要求 0% 通过expectations.md—— 自然语言断言清单用于自动生成 Playwright 评分器五大核心领域亮点速览 CSS 布局容器查询、:has()、scopeCSS 类是内容最密集的板块之一20 个任务型用例 2 个领域总纲覆盖从响应式排版到设计系统架构fluid-scaling字号、间距随容器宽度平滑缩放替代固定断点style-parent-with-has表单字段失焦后给父级加错误样式size-aware-styling卡片根据自身宽度而非视口切换布局design-token-reactivity密度模式/主题切换时后代组件各自响应⚡ 性能从 LCP 到 INP 的全链路性能类是数量最多的分类32 个围绕 Core Web Vitals 与加载调度展开break-up-long-tasks拆分长任务让浏览器有机会响应用户输入optimize-image-priority提升 LCP 候选图片的加载优先级schedule-tasks-by-priority用 Scheduler API 按优先级排队identify-inp-causes定位拖垮 INP 指标的具体脚本 表单让自动填充和验证原生工作autofill-address-form正确的 autocomplete 取值让地址栏一键填充branded-select-styling品牌化定制 select 的下拉面板而不替换原生控件required-field-feedback必填项错误提示只在用户交互后出现避免页面一打开就红一片 安全Passkey、Trusted Types 与加密passkeysWebAuthn / Passkey 的总纲注册、认证、管理、二次认证共 8 个子用例trusted-types封锁危险 DOM 出口防 DOM 型 XSSclient-side-encryption浏览器内完成含后量子抗性的端到端加密♿ 无障碍屏幕阅读器与系统偏好accessible-error-announcementaria-invalid与视觉:user-invalid状态同步respect-os-text-scale尊重操作系统的文字缩放偏好此外还有端侧 AI 用例translator 本地翻译、summarizer 本地摘要以及面向未来的 WebMCP——把标准 HTML 表单直接暴露为 AI 代理可调用的工具。不只是文档用评测证明指南真的有效Modern Web Guidance 的独特之处在于每条指南都有配套的自动化评测不是拍脑袋的最佳实践。基准应用评测在 src/harness/base-apps/ 下两个真实站点daily-grind博客应用、devtools-times新闻站上进行闭环校准生成的 Playwright 评分器必须对黄金示例 100% 通过、对反例 0% 通过对照实验同一任务分别让 AI无指南与有指南完成测量提升幅度upliftREADME 中的最新评测快照显示接入指南后各模型通过率普遍提升 19~28 个百分点例如 claude_code 从 59% 提升到 87%。如何快速上手两条命令开始使用安装技能npx modern-web-guidancelatest install支持--choose挑选技能包日常检索在 AI 助手遇到前端任务时它会先执行search找到最匹配的指南再用retrieve id取回完整内容注入上下文技术栈与内部机制可以进一步阅读 docs/CONTEXT.md项目架构与gdCLI 流水线、docs/EVALS.md评测框架配置以及 guides/AGENTS.md。如果你正在评估 AI 生成代码的质量这份覆盖 17 个领域、180 个真实场景的指南清单是一个值得逐条对照的现代 Web 开发体检表。赞分享【免费下载链接】modern-web-guidance-src项目地址https://gitcode.com/gh_mirrors/mo/modern-web-guidance-src点击查看免费下载相关推荐Shaft布局系统实战指南Column、Row与嵌套布局的10个技巧Shaft布局系统实战指南Column、Row与嵌套布局的10个技巧 Shaft 是一个用 Swift 编写的跨平台 GUI 框架支持 macOS、LinuTorchCAM安装教程从零开始配置完整AI可视化环境TorchCAM安装教程从零开始配置完整AI可视化环境 TorchCAM是一款专为PyTorch模型设计的类激活图Class Activation Maps人工智能深度学习计算机视觉AI 可解释性moto IAM 服务仿真深度解析180 个 API Action 覆盖全景与源码实现剖析moto IAM 服务仿真深度解析180 个 API Action 覆盖全景与源码实现剖析 本文以 moto 仓库中 docs/docs/services/iMock测试创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
