技能说明
适用于网站上线前检查、网页体验优化和 Agent 可访问性审计。优先使用真实页面与运行数据，再结合源码定位；不把 Lighthouse 总分当成安全或排名保证。
关于此技能
来自 addyosmani/web-quality-skills 的证据驱动网页质量审计，覆盖性能、无障碍、SEO、最佳实践和 Agent 可用性。
核心能力
多维质量审计
综合性能、Core Web Vitals、WCAG 2.2、SEO、最佳实践与 Agentic Browsing，避免只看总分。
证据优先
优先收集真实页面、Lighthouse/DevTools 和现场数据，再定位源码，区分已测事实与待验证假设。
复测闭环
修复后复跑同条件检查，明确哪些结果已验证，哪些仍需真实用户或人工验证。
适用场景
网站上线前检查
对代表性页面和关键流程做性能、无障碍、SEO 与安全最佳实践的综合审计。
网页体验优化
定位 LCP、INP、CLS、键盘操作、表单标签、抓取和结构化数据等问题。
Agent 可访问性
检查语义结构、可访问名称、状态和可交互区域，帮助浏览型 Agent 稳定理解页面。
使用步骤
- 01
确定审计范围
明确代表性 URL、登录状态、关键流程以及移动端和桌面端范围。
- 02
收集运行证据
优先使用 Lighthouse、浏览器追踪、CrUX 或现场数据，再结合源码和响应头定位问题。
- 03
分级提出修复
按用户影响与证据置信度排序，分别给出性能、无障碍、SEO 和最佳实践建议。
- 04
复测并交付
在相同条件下复跑检查，清楚区分已验证结果与仍需真实用户或人工验证的事项。
常见问题
没有 Chrome DevTools MCP 能用吗？+
可以，技能会退回 Lighthouse CLI、PageSpeed Insights/CrUX、浏览器手工检查和源码分析。
能代替完整安全审计吗？+
不能，它只覆盖网页最佳实践中的一部分安全信号；高分也不等于应用安全。
会保证 SEO 排名吗？+
不会，技能只检查技术 SEO 和可见证据，排名和收录效果仍需搜索引擎数据验证。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/09/07
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
npx skills add https://github.com/addyosmani/web-quality-skills --skill web-quality-audit