/ 目錄 / 演練場 / Addy Osmani Agent Skills
← 全部伺服器 ↗ GitHub
● 社群 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。持續以前端一線實戰經驗更新。

▶ 觀看演示 📦 安裝 💡 使用場景

為什麼要用

核心特性

即時演示

實際使用效果

就緒

安裝

作者儲存庫 · Claude Skills 官方文件

使用場景

實戰用法： Addy Osmani Agent Skills

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

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

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

步驟
  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