/ ディレクトリ / プレイグラウンド / web-quality-skills
← 全サーバー ↗ GitHub
● コミュニティ 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

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

実用的な使い方： 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と組み合わせて10倍の力を

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
呼び出しあたりのトークン
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を見る