企业官网建设流程全解析

web-quality-skills 多平台安装完全教程：Claude Code 插件、Codex 市场与 Cursor 技能配置详解

【免费下载链接】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 是一套基于 Google Lighthouse 与 Core Web Vitals 标准打造的 Web 质量优化 Agent Skills，收录了性能、可访问性、SEO 等 6 大专业技能。本教程带你用最短的步骤，在 Claude Code、Codex、Cursor 等主流 AI 编程助手上完成安装与配置，让你的 AI 编码助手瞬间获得 150+ 次真实 Lighthouse 审计沉淀下来的优化经验。

先认识一下：web-quality-skills 是什么 🤔

它不是传统意义上的软件，而是一组"技能说明书"（Agent Skills）。安装后，AI 助手在写前端代码或审查项目时会自动套用这些规范，覆盖：

最大亮点是框架无关：React、Vue、Angular、Svelte、Next.js、Nuxt、Astro 甚至纯 HTML 都能用。技能详情可查看 skills/web-quality-audit/SKILL.md 与 skills/performance/SKILL.md。

方式一：npx 一键安装（全平台通用）🚀

如果你用 Cursor、OpenCode、Claude Code 或 Codex，最省事的方式是用官方 CLI 工具 add-skill，在项目目录下执行一条命令：

npx add-skill addyosmani/web-quality-skills

工具会自动识别你正在使用的 AI 助手，并把技能安装到对应位置，无需手动配置路径。适合想要"装完即用"的新手。

方式二：Claude Code 插件安装步骤 🧩

Claude Code 支持以带版本、带命名空间的插件形式安装，更新更方便。在 Claude Code 对话框内依次输入：

/plugin marketplace add addyosmani/web-quality-skills /plugin install web-quality-skills@addy-web-quality-skills

安装后，技能会自动加上命名空间前缀（例如/web-quality-skills:performance），后续用/plugin update即可升级。插件读取的正是仓库中的skills/目录，与手动复制不重复。插件元信息定义在 .claude-plugin/plugin.json 与 .claude-plugin/marketplace.json 中。

方式三：Codex 插件市场添加 ⚡

Codex 用户（需 Codex CLI v0.122 及以上）只需一条命令：

codex plugin marketplace add addyosmani/web-quality-skills

执行后，Codex 会自动把仓库克隆到~/.codex/plugins/web-quality-skills/，并在~/.codex/config.toml注册市场，重启 Codex 即可。之后在对话里用@直接调用技能（如@performance、@accessibility），或者直接描述任务让它自动选择。

原理很简单：codex/目录下有一份插件清单 codex/.codex-plugin/plugin.json，并通过codex/skills软链接复用同一份skills/目录，实现"一份技能，两个平台"。完整原理与故障排查见 docs/codex-setup.md。

💡Windows 小贴士：如果软链接在你的机器上不生效，克隆仓库后可将skills目录真实复制到codex/skills（仅本地修改，不要提交）。

方式四：Cursor 与其他工具手动配置 📁

手动安装适合想完全掌控配置的用户，把技能目录复制进 AI 助手的技能位置即可，以 Claude Code 为例：

cp -r skills/* ~/.claude/skills/

在 Cursor 中，可将 SKILL.md 内容添加为项目级规则（Rules），或粘贴到对话上下文让 AI 遵循。仓库中的 AGENTS.md 与 CLAUDE.md 已写明各助手的行为约定，直接引用即可。

安装完成后：一句话验证是否生效 ✅

打开任意 Web 项目，对 AI 助手说：

"Audit this page for web quality issues"（审计这个页面的 Web 质量问题）

如果 AI 开始按 Core Web Vitals 阈值（LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1）逐项检查并给出修复建议，说明技能已成功激活。也可以试试"Optimize performance and fix Core Web Vitals"或"Make this SEO-ready"。

关键路径速查 📂

小结

web-quality-skills 用"一条命令"的门槛，把资深性能工程师的 Lighthouse 优化经验带进你的日常开发：npx 通用安装、Claude Code 插件、Codex 市场三种方式任选其一，几分钟后你的 AI 助手就能输出专业级的性能、无障碍与 SEO 优化建议。挑一种方式装上，立刻开始你的第一次质量审计吧 🎯

【免费下载链接】web-quality-skillsAgent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.项目地址: https://gitcode.com/gh_mirrors/we/web-quality-skills