/ 目錄 / 演練場 / web-quality-skills
● 社群 addyosmani ⚡ 即開即用

web-quality-skills

作者 addyosmani · addyosmani/web-quality-skills

6 skills encoding 150+ Lighthouse audits and Core Web Vitals patterns — Claude diagnoses and fixes LCP, INP, CLS, and accessibility issues.

A focused skill bundle from addyosmani covering web-quality-audit, performance, core-web-vitals, accessibility (WCAG 2.2), seo, and best-practices. Skills auto-activate on relevant asks (e.g. 'speed up my site' loads the performance skill). Framework-agnostic — works for React, Vue, Svelte, Next, Astro, and plain HTML.

為什麼要用

核心特性

即時演示

實際使用效果

web-quality-skill.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %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。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "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 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "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"。

~/.codeium/windsurf/mcp_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 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "web-quality-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/web-quality-skills",
        "~/.claude/skills/web-quality-skills"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列,而非映射。

~/.config/zed/settings.json
{
  "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 移除。

使用場景

實戰用法: web-quality-skills

Fix a slow LCP on a product landing page

👤 Frontend engineers trying to get a green CWV ⏱ ~40 min intermediate

何時使用: CrUX shows LCP at 3.8s and you don't know where to start.

前置條件
  • Target URL — Live or staging URL — not just local
步驟
  1. Run the core-web-vitals skill
    Use the core-web-vitals skill on https://site.com. Focus on LCP.✓ 已複製
    → Diagnosis of the LCP element (hero image, web font, server response) with specific fix
  2. Apply the fix
    Apply the recommended priority hints and image format change.✓ 已複製
    → Concrete HTML changes
  3. Re-measure
    How do I verify the improvement?✓ 已複製
    → Guided re-measure via Lighthouse or web-vitals JS

結果: LCP under the 2.5s target with a documented fix path.

注意事項
  • Fixing lab LCP but not field LCP (CrUX) — Always verify in CrUX, not just local Lighthouse

Run a WCAG 2.2 accessibility audit on a checkout flow

👤 Engineers preparing for an accessibility review ⏱ ~45 min intermediate

何時使用: Legal is asking about WCAG compliance for the checkout.

步驟
  1. Run the accessibility skill
    Use the accessibility skill on our checkout flow. What WCAG 2.2 issues exist?✓ 已複製
    → Structured findings per WCAG success criterion with severity
  2. Prioritize fixes
    Group by fix-effort vs user impact.✓ 已複製
    → Ordered backlog

結果: A real accessibility backlog, not a checklist you can't act on.

注意事項
  • Automated checks only catch ~30% of issues — Complement with keyboard-only and screen-reader manual testing
搭配使用: playwright-skill

Run the full web-quality-audit before a marketing campaign

👤 Teams about to drive paid traffic ⏱ ~30 min intermediate

何時使用: Big campaign starts Monday and you want no nasty surprises.

步驟
  1. Run the combined audit
    Use web-quality-audit on our campaign landing page.✓ 已複製
    → Report spanning performance, CWV, accessibility, SEO, best-practices
  2. Triage for launch
    What must be fixed before launch vs can wait?✓ 已複製
    → Go/no-go triage

結果: A launch-ready page and a week-2 backlog.

注意事項
  • Treating every finding as blocker — The skill prioritizes — trust the must-fix list

組合

與其他 MCP 搭配,撬動十倍槓桿

web-quality-skill + chrome-devtools

Use DevTools MCP to grab live perf traces while the skill interprets them

Capture a perf trace via chrome-devtools, then have the performance skill analyze it.✓ 已複製
web-quality-skill + playwright-skill

Playwright runs the site through real user flows, web-quality skills score each step

Use playwright to walk through checkout, capture metrics at each step, then accessibility-audit each screen.✓ 已複製
web-quality-skill + claude-seo-skill

Technical SEO from claude-seo + CWV from this skill

Run /seo audit for link/schema issues, then web-quality-audit for CWV.✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
web-quality-audit URL Pre-launch or quarterly 0
performance URL Slow page 0
core-web-vitals URL Failing CWV 0
accessibility URL / component A11y review 0
seo URL SEO hygiene check 0
best-practices URL Hardening review 0

成本與限制

運行它的成本

API 配額
None
每次呼叫 Token 數
2-5k per skill loaded
費用
Free — skill is local
提示
Audit one URL at a time; batch audits balloon context.

安全

權限、密鑰、影響範圍

憑證儲存: No credentials — skill is prompts
資料出站: None from the skill itself

故障排查

常見錯誤與修復

Skill gives generic advice

Feed in a real Lighthouse JSON or CrUX record for specific findings.

Recommendations don't apply to your framework

Name the framework ('Next.js 15 app router') so the skill tailors suggestions.

替代方案

web-quality-skills 對比其他方案

替代方案何時用它替代權衡
Lighthouse CI directlyYou want automated CI gates, not interactive guidanceScalable for CI; less explanatory
claude-seo-skillYou need SEO-first with broader audit surfaceBroader scope but less CWV depth

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills