尧图网页设计 
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-skillsweb-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 助手在写前端代码或审查项目时会自动套用这些规范覆盖技能作用触发示例web-quality-audit全站综合质量审计性能无障碍SEO安全帮我审计网站质量performance加载速度与运行时性能优化让网站变快core-web-vitals专攻 LCP、INP、CLS 三大核心指标降低 LCPaccessibilityWCAG 2.2 无障碍合规审查做个无障碍审计seo搜索引擎优化与结构化数据优化 SEObest-practices安全头、现代 API、代码质量安全审计最大亮点是框架无关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-skillsaddy-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。关键路径速查 资料路径项目总览与技能清单README.mdCodex 安装与排障docs/codex-setup.md6 大技能定义skills/LCP 专项参考skills/core-web-vitals/references/LCP.mdWCAG 参考手册skills/accessibility/references/WCAG.md审计脚本skills/web-quality-audit/scripts/AI 助手项目约定AGENTS.md、CLAUDE.md小结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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 web-quality-skills 多平台安装完全教程：Claude Code 插件、Codex 市场与 Cursor 技能配置详解
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-skillsweb-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 助手在写前端代码或审查项目时会自动套用这些规范覆盖技能作用触发示例web-quality-audit全站综合质量审计性能无障碍SEO安全帮我审计网站质量performance加载速度与运行时性能优化让网站变快core-web-vitals专攻 LCP、INP、CLS 三大核心指标降低 LCPaccessibilityWCAG 2.2 无障碍合规审查做个无障碍审计seo搜索引擎优化与结构化数据优化 SEObest-practices安全头、现代 API、代码质量安全审计最大亮点是框架无关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-skillsaddy-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。关键路径速查 资料路径项目总览与技能清单README.mdCodex 安装与排障docs/codex-setup.md6 大技能定义skills/LCP 专项参考skills/core-web-vitals/references/LCP.mdWCAG 参考手册skills/accessibility/references/WCAG.md审计脚本skills/web-quality-audit/scripts/AI 助手项目约定AGENTS.md、CLAUDE.md小结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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考