5 分钟快速上手 web-quality-skills：一条 npx 命令让 AI 助手免费获得 Lighthouse 网页审计能力
【免费下载链接】web-quality-skillsAgent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.项目地址: https://gitcode.com/gh_mirrors/we/web-quality-skills
web-quality-skills是一个面向 AI 编程助手的开源技能集，它把 Google Lighthouse 审计经验、Core Web Vitals 优化模式和 WCAG 2.2 无障碍标准，打包成 6 个即插即用的Agent Skills。安装后，你只需对 AI 助手说一句“帮我审计这个网站”，它就能免费、自动地执行性能、可访问性、SEO 和最佳实践的全面网页审计——无需付费插件，也无需自己整理规范。
它适合谁？
无论你是 React、Vue、Next.js、Nuxt、Astro 还是纯 HTML 开发者，web-quality-skills 都与框架无关，任何技术栈都能直接受益。它特别适合：
- 🚀 想快速提升 Lighthouse 评分、降低加载时间的前端开发者
- ♿ 需要满足 WCAG 2.2 无障碍合规要求的产品团队
- 🔍 关心搜索引擎排名、想优化 SEO 的站长
- 🤖 正在使用 Claude Code、Codex、Cursor 等 AI 编程助手的工程师
一条 npx 命令安装（最快上手路径）
打开终端，运行下面任意一条命令即可把全部技能装到本地 AI 助手中：
npx skills add addyosmani/web-quality-skills或者使用等价的 add-skill 工具：
npx add-skill addyosmani/web-quality-skills如果不习惯 npx，也可以手动安装：先克隆仓库，再复制技能目录：
git clone https://gitcode.com/gh_mirrors/we/web-quality-skills cp -r skills/* ~/.claude/skills/6 大技能一览：你的 AI 助手会做什么？
安装完成后，所有技能会自动激活——当你的请求命中技能描述里的触发词时，AI 助手就会按 Lighthouse 标准执行检查。以综合审计技能 skills/web-quality-audit/SKILL.md 为例，一次审计覆盖 150+ 项检查：
| 技能 | 覆盖范围 | 触发方式（直接对 AI 说） |
|---|---|---|
| web-quality-audit | 性能 + 无障碍 + SEO + 最佳实践全面审计 | “审计我的网站”“检查网页质量” |
| performance | 加载速度、JS 分包、图片与字体优化 | “让网站变快”“优化性能” |
| core-web-vitals | LCP、INP、CLS 三大核心指标 | “修复 LCP”“降低 CLS” |
| accessibility | WCAG 2.2 合规、键盘导航、读屏支持 | “无障碍审查”“a11y 检查” |
| seo | meta 标签、结构化数据、可抓取性 | “让页面对 SEO 友好” |
| best-practices | HTTPS、安全头、现代 API、代码质量 | “安全审计”“代码质量审查” |
每个技能都配有详细规范和参考文档，例如性能预算细则在 skills/performance/SKILL.md，LCP 深度优化指南在 skills/core-web-vitals/references/LCP.md，WCAG 速查表在 skills/accessibility/references/WCAG.md。审计技能还自带一个只读 HTML 分析脚本 skills/web-quality-audit/scripts/analyze.sh，可对文件目录做快速静态检查并输出结构化 JSON 结果。
审计标准：这些阈值 AI 会帮你盯死
这套技能把行业最佳实践量化成了可执行的“及格线”，AI 助手会严格按以下标准给出问题分级（Critical / High / Medium / Low）和修复建议：
Core Web Vitals 达标线
| 指标 | 良好 | 需改进 | 差 |
|---|---|---|---|
| LCP（最大内容绘制） | ≤ 2.5s | 2.5s – 4.0s | > 4.0s |
| INP（交互到下一帧） | ≤ 200ms | 200ms – 500ms | > 500ms |
| CLS（累积布局偏移） | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
性能预算与 Lighthouse 目标分
| 资源类型 | 预算 |
|---|---|
| 页面总重量 | < 1.5 MB |
| JavaScript（压缩后） | < 300 KB |
| CSS（压缩后） | < 100 KB |
| 首屏图片 | < 500 KB |
| 字体 | < 100 KB |
| 第三方资源 | < 200 KB |
Lighthouse 目标分：性能 ≥ 90、无障碍 100、最佳实践 ≥ 95、SEO ≥ 95。
不同 AI 助手的安装方式
Claude Code 插件方式
在 Claude Code 里执行以下命令，可安装带版本管理的命名空间插件，之后用/plugin update一键更新：
/plugin marketplace add addyosmani/web-quality-skills /plugin install web-quality-skills@addy-web-quality-skillsCodex 插件市场方式
Codex CLI v0.122+ 支持从插件市场直接安装，本地安装与故障排查详见 docs/codex-setup.md：
codex plugin marketplace add addyosmani/web-quality-skills安装后在聊天中用@直接调用技能（如@performance、@accessibility），或直接描述任务让 Codex 自动选择。
上手后的 3 个实用提示 💡
- 从综合审计开始：不确定问题在哪时，先说“audit my site”，web-quality-audit 技能会协调其他技能输出完整报告。
- 按严重度排序修复：技能会按 Critical → High → Medium → Low 分级，优先修复安全漏洞和 Core Web Vitals 失败项。
- 用触发词提高命中率：在请求中加入“LCP”“CLS”“WCAG”“meta tags”等关键词，能让对应技能更准确地被激活。
小结
web-quality-skills 用一条 npx 命令，就把 150+ 次真实 Lighthouse 审计沉淀的经验免费装进了你的 AI 助手。它不绑定任何框架、没有运行时依赖，纯 Markdown 技能加可选脚本，轻量又透明。5 分钟完成安装，从今天起让 AI 助手替你守住网页质量底线。更多项目说明见 README.md，贡献规范参考 AGENTS.md（SKILL.md 保持 500 行以内、详细内容放入 references/ 目录）。
【免费下载链接】web-quality-skillsAgent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.项目地址: https://gitcode.com/gh_mirrors/we/web-quality-skills
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
