web-quality-skills

为什么要用

核心特性

6个skill覆盖Lighthouse + Core Web Vitals矩阵
明确目标：LCP ≤ 2.5秒、INP ≤ 200毫秒、CLS ≤ 0.1
WCAG 2.2可访问性审计
框架无关的建议
在匹配请求时自动激活

实时演示

实际使用效果

web-quality-skill.replay ▶ 就绪

0/0

安装

作者仓库 · Claude Skills 官方文档

使用场景

实战用法： web-quality-skills

修复产品落地页的慢LCP

👤 想要获得绿色CWV的前端工程师 ⏱ ~40 min intermediate

何时使用： CrUX显示LCP为3.8秒，你不知道从哪里开始。

前置条件

目标URL — Live或staging URL——不只是本地

步骤

运行core-web-vitals skill

在https://site.com上使用core-web-vitals skill。重点关注LCP。✓ 已复制

→ LCP元素的诊断（hero图片、web字体、服务器响应）以及具体修复方案
应用修复

应用推荐的优先级提示和图片格式改动。✓ 已复制

→ 具体的HTML改动
重新测量

我如何验证改进效果？✓ 已复制

→ 通过Lighthouse或web-vitals JS引导重新测量

结果： LCP在2.5秒目标以下，并记录修复路径。

注意事项

修复了实验室LCP但没有修复现实LCP（CrUX） — 始终在CrUX中验证，不仅仅是本地Lighthouse

对结账流程运行WCAG 2.2可访问性审计

👤 为可访问性审查做准备的工程师 ⏱ ~45 min intermediate

何时使用： 法务正在询问结账流程的WCAG合规性。

步骤

运行accessibility skill

对我们的结账流程使用accessibility skill。存在哪些WCAG 2.2问题？✓ 已复制

→ 按WCAG成功标准列出的结构化发现及严重程度
优先级排序修复

按修复难度与用户影响分组。✓ 已复制

→ 排序后的待办事项

结果： 一个真实的可访问性待办事项，而不是无法执行的清单。

注意事项

自动化检查只能捕获约30%的问题 — 用纯键盘和屏幕阅读器的手动测试补充

搭配使用： playwright-skill

在营销活动前运行完整的web-quality-audit

👤 即将推动付费流量的团队 ⏱ ~30 min intermediate

何时使用： 大型活动周一开始，你想避免任何不愉快的惊讶。

步骤

运行组合审计

对我们的活动落地页使用web-quality-audit。✓ 已复制

→ 跨越性能、CWV、可访问性、SEO、最佳实践的报告
启动前分类

启动前必须修复的是什么，什么可以等待？✓ 已复制

→ 上线/不上线分类

结果： 一个启动就绪的页面和第二周的待办事项。

注意事项

把每个发现都当作阻碍 — 该skill会优先级排序——信任必修项列表

组合

与其他 MCP 搭配，撬动十倍杠杆

web-quality-skill + chrome-devtools

使用DevTools MCP捕获实时性能追踪，同时skill对其进行解释

通过chrome-devtools捕获性能追踪，然后让performance skill分析它。✓ 已复制

web-quality-skill + playwright-skill

Playwright通过真实用户流程运行网站，web-quality skill对每个步骤评分

使用playwright走过结账流程，在每个步骤捕获指标，然后对每个屏幕运行accessibility-audit。✓ 已复制

web-quality-skill + claude-seo-skill

来自claude-seo的技术SEO + 来自该skill的CWV

运行/seo audit检查链接/模式问题，然后运行web-quality-audit检查CWV。✓ 已复制

工具

此 MCP 暴露的能力

工具	输入参数	何时调用
web-quality-audit	URL	启动前或每季度
performance	URL	页面速度慢
core-web-vitals	URL	CWV失败
accessibility	URL / component	可访问性审查
seo	URL	SEO卫生检查
best-practices	URL	加固审查

成本与限制

运行它的成本

API 配额: 无
每次调用 Token 数: 每次加载skill 2-5k token
费用: 免费——skill是本地的
提示: 一次审计一个URL；批量审计会膨胀上下文。

安全

权限、密钥、影响范围

凭据存储： 无凭据——skill是提示词

数据出站： skill本身无数据出口

故障排查

常见错误与修复

Skill给出通用建议

输入真实的Lighthouse JSON或CrUX记录以获得具体发现。

建议不适用于你的框架

命名框架（'Next.js 15 app router'）以便skill定制建议。

替代方案