/ 目录 / 演练场 / 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.✓ 已复制
    → 数字改善;若未改善,说明假设有误——回到第一步

结果: 有可追溯记录的 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.✓ 已复制
    → 需要修复的 Top 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.✓ 已复制
    → 定位到引入问题的提交
  3. 修复
    Surgical fix — preserve the intended behavior of the offending commit.✓ 已复制
    → 修复已提交,附说明

结果: 有测试支撑的可复现修复,而非凭感觉猜测。

注意事项
  • skill 过度依赖二分查找,而问题其实在环境/数据层 — 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 数
全面审查可能消耗大量 token;大型代码库可能超过 50k token
费用
免费(MIT)
提示
按路由而非整个网站运行性能/无障碍审计,以控制成本

安全

权限、密钥、影响范围

最小权限: filesystem-read
凭据存储:
数据出站: Lighthouse 在本地运行;仅被审计的 URL 会被访问

故障排查

常见错误与修复

Lighthouse 无法运行

安装 Node 18+ 和 Chrome;skill 期望两者都在 PATH 中

验证: `npx lighthouse https://example.com` 可单独运行
axe 规则已过时

skill 附带固定版本的 axe;定期 git pull 更新

二分查找在不稳定测试上无限运行

传入 --repeat 3,每个提交测试 3 次——过滤掉不稳定测试

替代方案

Addy Osmani Agent Skills 对比其他方案

替代方案何时用它替代权衡
wshobson/agents你需要更广泛的角色覆盖(后端 / 数据 / DevOps)wshobson 覆盖面更广;Addy 的 skill 集在 Web 性能和无障碍上更深入
Anthropic 官方 skill需要通用的、官方认可的基础构建块主见性较弱;缺乏从业者视角的打磨

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills