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

结果： 有可追溯记录的 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