modern-web-guidance
为AI编码助手注入现代Web平台最佳实践，告别过时代码模式。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：modern-web-guidance。 它的用途是：为AI编码助手注入现代Web平台最佳实践，告别过时代码模式。 完整的 Skill 内容见：https://321skill.com/skills/modern-web-guidance/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
当你让AI助手“创建一个带动画效果的模态对话框”时，它可能会引入过时的JavaScript动画库。此时，Modern Web Guidance技能会引导AI优先考虑使用原生 `dialog` 元素配合CSS `@starting-style` 和 `::backdrop` 伪元素来实现，生成更精简、高性能且具备可访问性的代码。
介绍
现代Web开发日新月异，但AI编码助手（如Claude、Cursor）的训练数据往往滞后，导致其倾向于生成依赖老旧库或复杂JavaScript的过时解决方案，而非利用浏览器原生、高性能的现代API。这带来了性能低下、可访问性差和代码臃肿等问题。
Modern Web Guidance 通过一个CLI工具，将谷歌Chrome团队和微软Edge团队支持的现代Web平台专业知识、最佳实践和兼容性数据，直接注入到你的AI助手上下文中。你可以通过 npx modern-web-guidance@latest search 搜索指南，或 npx modern-web-guidance@latest install 将其作为技能安装，让你的AI助手在生成代码时能优先考虑CSS容器查询、View Transitions、Popover API等现代方案。
它非常适合前端开发、全栈开发以及智能体开发者，尤其是那些希望利用AI生成代码但担心其产出过于陈旧或低效的团队。对于需要确保代码符合现代标准、具备良好性能和可访问性的项目，这个技能能提供关键的引导。
请注意，该项目目前处于预览发布阶段，内容仍在不断丰富中。它主要聚焦于Web前端领域，对于后端逻辑或特定框架（如React内部状态管理）的深度优化可能不是其核心目标。建议将其作为AI编码的“现代性检查器”和“最佳实践指南”来使用，而非替代所有手动代码审查。
核心特点
由浏览器厂商（Google Chrome、Microsoft Edge）直接支持，提供权威、前沿的Web平台指导，专门针对AI编码助手训练数据滞后的问题，提供高密度、经过评估筛选的现代实现模式，而非泛泛的API文档。
注意事项
主要专注于Web前端现代API和最佳实践，不覆盖后端开发、特定UI框架深度集成或非Web平台的技术栈。
常见问题
Modern Web Guidance 和 MDN 文档有什么区别？
它并非替代MDN，而是从MDN及社区最佳实践中提炼出针对AI助手的、token高效的“行动指南”，直接指导AI生成符合现代标准的代码实现。
必须安装才能使用吗？
不需要，可以通过 `npx modern-web-guidance@latest search [关键词]` 直接搜索和检索指南内容，无需安装。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/modern-web-guidance/raw/index.md 读取 modern-web-guidance 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/modern-web-guidance/raw/index.md（查看排版版本）