作者 addyosmani · addyosmani/web-quality-skills
6个skill囊括150+Lighthouse审计和Core Web Vitals模式——Claude诊断并修复LCP、INP、CLS和可访问性问题。
addyosmani打造的精选skill包，涵盖web-quality-audit、performance、core-web-vitals、accessibility（WCAG 2.2）、seo和best-practices。Skill会根据相关请求自动激活（比如说'加快我的网站速度'会加载performance skill）。框架无关——适用于React、Vue、Svelte、Next、Astro和原生HTML。
%APPDATA%\Claude\claude_desktop_config.json{
"mcpServers": {
"web-quality-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/addyosmani/web-quality-skills",
"~/.claude/skills/web-quality-skills"
],
"_inferred": true
}
}
}打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。
{
"mcpServers": {
"web-quality-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/addyosmani/web-quality-skills",
"~/.claude/skills/web-quality-skills"
],
"_inferred": true
}
}
}Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。
{
"mcpServers": {
"web-quality-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/addyosmani/web-quality-skills",
"~/.claude/skills/web-quality-skills"
],
"_inferred": true
}
}
}点击 Cline 侧栏中的 MCP Servers 图标，然后选 "Edit Configuration"。
{
"mcpServers": {
"web-quality-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/addyosmani/web-quality-skills",
"~/.claude/skills/web-quality-skills"
],
"_inferred": true
}
}
}格式与 Claude Desktop 相同。重启 Windsurf 生效。
{
"mcpServers": [
{
"name": "web-quality-skill",
"command": "git",
"args": [
"clone",
"https://github.com/addyosmani/web-quality-skills",
"~/.claude/skills/web-quality-skills"
]
}
]
}Continue 使用服务器对象数组，而非映射。
{
"context_servers": {
"web-quality-skill": {
"command": {
"path": "git",
"args": [
"clone",
"https://github.com/addyosmani/web-quality-skills",
"~/.claude/skills/web-quality-skills"
]
}
}
}
}加入 context_servers。Zed 保存后热重载。
claude mcp add web-quality-skill -- git clone https://github.com/addyosmani/web-quality-skills ~/.claude/skills/web-quality-skills一行命令搞定。用 claude mcp list 验证，claude mcp remove 卸载。
何时使用： CrUX显示LCP为3.8秒，你不知道从哪里开始。
结果： LCP在2.5秒目标以下，并记录修复路径。
何时使用： 法务正在询问结账流程的WCAG合规性。
结果： 一个真实的可访问性待办事项，而不是无法执行的清单。
何时使用： 大型活动周一开始，你想避免任何不愉快的惊讶。
结果： 一个启动就绪的页面和第二周的待办事项。
使用DevTools MCP捕获实时性能追踪，同时skill对其进行解释
Playwright通过真实用户流程运行网站，web-quality skill对每个步骤评分
来自claude-seo的技术SEO + 来自该skill的CWV
| 工具 | 输入参数 | 何时调用 | 成本 |
|---|---|---|---|
| web-quality-audit | URL | 启动前或每季度 | 0 |
| performance | URL | 页面速度慢 | 0 |
| core-web-vitals | URL | CWV失败 | 0 |
| accessibility | URL / component | 可访问性审查 | 0 |
| seo | URL | SEO卫生检查 | 0 |
| best-practices | URL | 加固审查 | 0 |
Skill给出通用建议输入真实的Lighthouse JSON或CrUX记录以获得具体发现。
建议不适用于你的框架命名框架（'Next.js 15 app router'）以便skill定制建议。
| 替代方案 | 何时用它替代 | 权衡 |
|---|---|---|
| 直接使用Lighthouse CI | 你想要自动化CI门，而不是交互指导 | 在CI中可扩展；说明性较少 |
| claude-seo-skill | 你需要SEO优先且更广泛的审计范围 | 范围更广但CWV深度较低 |