新闻详情

新闻详情

首页 / 资讯中心 / 详情

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

发布时间:2026/10/1 2:31:27来源:尧图网络
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),仅供参考
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

Python校园一卡通消费行为分析:从数据清洗到聚类实战 2026/10/1 7:23:59

Python校园一卡通消费行为分析:从数据清洗到聚类实战

简介:面向Python数据分析学习者与校园信息化研究者,这是一套基于Python的学生校园消费行为分析项目源码。项目定位为个人课程大作业,源码经本地编译调试,可稳定运行,评审分达95分以上,难度适中,…

阅读更多 →
springboot项目启动时报错:Exception in thread “main“ java.lang.NoClassDefFoundError: org/slf4j/Logger...... 2026/10/1 7:23:59

springboot项目启动时报错:Exception in thread “main“ java.lang.NoClassDefFoundError: org/slf4j/Logger......

一、错误信息如下: Exception in thread "main" java.lang.NoClassDefFoundError: org/slf4j/Logger at org.apache.logging.slf4j.SLF4JLoggerContext.getLogger(SLF4JLoggerContext.java:39) at org.apache.commons.logging.LogAdapter$Log4jL…

阅读更多 →
深圳24小时自助健身房解决方案实战指南:从架构到部署 2026/10/1 7:23:46

深圳24小时自助健身房解决方案实战指南:从架构到部署

深圳24小时自助健身房解决方案实战指南:从架构到部署 一、需求分析与系统定位 在深圳这样的一线城市,传统健身房受限于营业时间、人力成本和管理痛点,24小时自助模式逐渐成为趋势。一个完整的深圳24小时自助健身房解决方案需要覆盖用户自助入…

阅读更多 →
单片机控制板异常排查六步法:上电无反应与运行死机 2026/10/1 7:23:46

单片机控制板异常排查六步法:上电无反应与运行死机

前几天一个做设备维护的朋友打电话过来,说现场一台控制器又“抽风”了:上电没反应,指示灯不亮,偶尔上电能亮,跑一个多小时就死机,断电重启又能跑一阵。他怀疑主控芯片坏了,换了一片还是老样子。…

阅读更多 →
2026年12款降AI工具大盘点!实测有效,AI率从90%降到17%! 2026/10/1 7:23:46

2026年12款降AI工具大盘点!实测有效,AI率从90%降到17%!

很多平时写文章分享经验的朋友,经常会遇到一个头疼的问题,那就是辛辛苦苦敲出来的文字,很容易被平台判定为AI生成。 为了帮大家解决这个痛点,我花了不少时间,亲测了市面上热门的十几款降AI工具。今天就把这篇实用的干…

阅读更多 →
STM32核心理论:从时钟、中断到外设机制,告别盲目抄例程 2026/10/1 7:23:46

STM32核心理论:从时钟、中断到外设机制,告别盲目抄例程

我见过太多人学 STM32 的方式了——买块开发板,下载个例程,LED 能闪了,蜂鸣器能响了,然后就不知道自己该干什么了。遇到新项目,勉强能改改例程里的参数,一旦要求换个外设、换个通信协议,立刻抓瞎…

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉