/ 目錄 / 演練場 / Addy Osmani Agent Skills
● 社群 addyosmani ⚡ 即開即用

Addy Osmani Agent Skills

作者 addyosmani · addyosmani/agent-skills

程式碼 Agent 的正式工程 skill——效能、無障礙性、資安、除錯——由 Addy Osmani(Google Chrome 團隊、《Learning JavaScript Design Patterns》作者)精心策管。

一套針對 AI 程式碼 Agent 的固執己見、經過實戰驗證的 skill 套件。每個 skill 都編碼了特定的工程實踐(例如 Core Web Vitals 最佳化、axe-core 無障礙性稽核、OWASP 安全預設審查、效能除錯)。Skill 是與 Agent 無關的 Markdown 加上可執行腳本,適用於 Claude Code、Cursor、Codex、Gemini CLI。持續以前端一線實戰經驗更新。

為什麼要用

核心特性

即時演示

實際使用效果

就緒

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

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

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

~/.config/zed/settings.json
{
  "context_servers": {
    "addyosmani-agent-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/addyosmani/agent-skills",
          "~/.claude/skills/addyosmani-agent-skills"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add addyosmani-agent-skills -- git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills

一行命令搞定。用 claude mcp list 驗證,claude mcp remove 移除。

使用場景

實戰用法: Addy Osmani Agent Skills

如何讓 Claude 擔起重任修正 Core Web Vitals 問題

👤 前端工程師、重視效能的團隊 ⏱ ~90 min intermediate

何時使用: PageSpeed 下滑,LCP 超過 2.5 秒,業務端在追問原因。

前置條件
  • 已安裝 Skill — git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills
  • 要稽核的 URL 或版本庫 — 公開 URL 或本地開發伺服器
步驟
  1. 診斷
    Use the perf skill on https://mysite.com. Pull a CrUX report, run a Lighthouse trace, and identify the top 3 LCP and INP culprits.✓ 已複製
    → 含檔案參照的排名問題清單,而非「最佳化圖片」這種籠統建議
  2. 修正
    For the top LCP culprit, apply the fix. For images, prefer fetchpriority + AVIF/WebP fallback. Show diff and rationale.✓ 已複製
    → 程式碼變更 + 預期的前後指標對比
  3. 驗證
    Re-run Lighthouse locally. Compare to previous run.✓ 已複製
    → 數字改善;若無,假設有誤——返回步驟 1

結果: 可測量的 LCP/INP 改善,並留有完整記錄。

注意事項
  • Claude 過度積極地建議大規模框架重寫 — Skill 包含「最小可行變更」規則——若 Agent 偏離,貼回這條規則
搭配使用: filesystem

在 Claude Code 層級稽核頁面的無障礙性問題

👤 開發 B2C 網站的前端開發者 ⏱ ~60 min intermediate

何時使用: 你接手了無障礙性狀態不明的 UI,需要真正的稽核,而非打勾了事。

步驟
  1. 執行套件
    Use the a11y skill on /app/components/. Run axe rules + heuristic checks for focus management and keyboard traps.✓ 已複製
    → 依嚴重性分組的問題;含規則 ID
  2. 分類
    Group issues by component. Rank by user impact, not raw count.✓ 已複製
    → 前 10 個需修正的元件
  3. 修正其中一個
    Pick the highest-impact item. Apply the fix; don't break existing tests.✓ 已複製
    → 修正已發布;測試全部通過

結果: 真正改善無障礙性,而非「我們跑了 axe 就算完成」。

注意事項
  • 自動修正破壞設計意圖(例如強制為只有圖示的按鈕加上可見標籤) — Skill 偏好視覺等效方案,如 aria-label 而非可見標籤

對 TypeScript 程式碼庫進行安全預設審查

👤 沒有專職資安團隊的開發者 ⏱ ~75 min advanced

何時使用: 上線前,你想做一次合理的掃描——不是滲透測試,但比什麼都不做要好。

步驟
  1. 掃描
    Use the security skill. Scan src/ for: hardcoded secrets, unsafe SQL/NoSQL queries, missing rate limits on POST handlers, JWT misuse.✓ 已複製
    → 含檔案:行號與嚴重性的發現表格
  2. 修正前 5 項
    Fix the highest-severity items. Add tests where feasible.✓ 已複製
    → 5 個修正已套用

結果: 不會在基本資安審查中失分的程式碼庫。

注意事項
  • 測試 fixture 出現誤報 — Skill 預設忽略 /tests/ 與 /__fixtures__/——傳入 --include-tests 可覆蓋
搭配使用: github

用結構化除錯 skill 處理迴歸問題

👤 遇到「昨天還好好的」bug 的任何開發者 ⏱ ~60 min intermediate

何時使用: 你已猜了 30 分鐘——切換到結構化根本原因流程。

步驟
  1. 重現
    Use the debug skill. First step: get a minimal reproduction.✓ 已複製
    → 重現步驟 + 一個失敗的測試
  2. 二元搜索
    Bisect git history with the failing test as oracle.✓ 已複製
    → 找出引入問題的 commit
  3. 修正
    Surgical fix — preserve the intended behavior of the offending commit.✓ 已複製
    → 修正已提交並附說明

結果: 有測試支撐的可重現修正,而非憑直覺猜測。

注意事項
  • 問題不在程式碼(而在環境/資料)時,Skill 過度應用 bisect — Skill 依清單優先檢查環境/資料——遵循順序
搭配使用: github

組合

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

addyosmani-agent-skills + github

從 skill 輸出開啟 PR

After perf fixes, open a PR titled 'perf(LCP): -300ms via image priority hints'.✓ 已複製
addyosmani-agent-skills + filesystem

持久化 skill 稽核報告

Save audit reports to /reports/$(date +%F)/ for trend tracking.✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
perf.audit url_or_path 效能迴歸 0
a11y.audit path 上線前無障礙性檢查 0
security.scan path 上線前資安掃描 0
debug.bisect failing_test, search_window 有已知正確基線的迴歸問題 0

成本與限制

運行它的成本

API 配額
不適用——本地 skill
每次呼叫 Token 數
大型審查可能很高;大型程式碼庫可能超過 50k token
費用
免費(MIT)
提示
依路由執行效能/無障礙性稽核,而非一次稽核整個網站,以控制成本

安全

權限、密鑰、影響範圍

最小權限: filesystem-read
憑證儲存:
資料出站: Lighthouse 在本地執行;僅取回被稽核的 URL

故障排查

常見錯誤與修復

Lighthouse 無法執行

安裝 Node 18+ 與 Chrome;Skill 需要兩者都在 PATH 中

驗證: `npx lighthouse https://example.com` 可獨立執行
axe 規則過時

Skill 附帶固定版本的 axe;定期執行 git pull 更新

Bisect 在非確定性測試上無限執行

傳入 --repeat 3,讓每個 commit 測試 3 次——不穩定測試會被過濾

替代方案

Addy Osmani Agent Skills 對比其他方案

替代方案何時用它替代權衡
wshobson/agents你想要廣泛的角色覆蓋(後端 / 資料 / DevOps)wshobson 覆蓋更廣;Addy 的套件在 Web 效能/無障礙性上更深入
Anthropic 官方 skill通用的、官方認可的基礎建構模組較無固定立場;較少從業者實戰打磨

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

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