在 Agent Skills 这个领域，有一个很明显的分水岭：玩具级和生产级。玩具级的 skill 告诉 Agent"你是一个前端专家，请帮我写 React 代码"。生产级的 skill 告诉 Agent"你在审查一个 Next.js 15 的 PR，使用 App Router，目标是 Lighthouse 90+ 分，请按以下 47 条规则逐项检查"。Agent Skills（78K Star，MIT 协议）就是后者——由 Google Chrome 工程负责人 Addy Osmani 出品的生产级 Agent 技能库。
Addy Osmani 是谁？
如果你是前端开发者，你大概率用过 Addy Osmani 写的东西。他是 Google Chrome 团队的工程负责人，长期专注于 Web 性能优化和开发者工具。他的代表作包括：
- 《Learning JavaScript Design Patterns》— JavaScript 设计模式的经典教材，免费在线阅读
- 《Image Optimization》— Web 图片优化的权威指南
- Lighthouse— Google 的 Web 性能审计工具，他是核心贡献者
- PageSpeed Insights— Google 的页面速度测试工具
- critical— 关键 CSS 提取工具，GitHub 9K+ Star
- workbox— Service Worker 工具库，PWA 的基础设施
Addy 的特点是极度务实。他写的每一个工具、每一篇文章，都是基于 Google 大规模生产环境的实战经验。Agent Skills 也不例外——它不是一个"awesome list"，而是一套经过 Google 工程实践验证的 Agent 技能规范。
生产级 Skills 的标准是什么？
在 Agent Skills 项目里，"生产级"不是营销话术，而是有明确标准的：
- 可验证：每个 skill 都有明确的成功标准，不是模糊的"写好代码"
- 可测试：skill 的输出可以被自动化测试验证
- 可组合：多个 skill 可以组合使用，不会互相冲突
- 版本化：每个 skill 有版本号，breaking change 有明确的迁移指南
- 有上下文：不是泛泛的"最佳实践"，而是针对特定技术栈和场景
举个例子，一个"玩具级"的前端 skill 是这样的：
# 玩具级：太模糊，Agent 无法准确执行
你是一个前端专家。请帮我写高质量的 React 代码。
使用最佳实践，注意性能优化。而 Agent Skills 里的前端 skill 是这样的：
# 生产级：明确、可执行、可验证
## React 19 + Next.js 15 App Router 代码审查
### 性能检查项
- [ ] 组件是否正确使用 `React.memo()` 或 `useMemo` 避免不必要的重渲染
- [ ] 数据获取是否使用 Server Components 而非客户端 useEffect
- [ ] 图片是否使用 `next/image` 并设置了适当的 `sizes` 属性
- [ ] 字体是否使用 `next/font` 实现零布局偏移（CLS = 0）
- [ ] 是否使用了动态导入（`next/dynamic`）拆分大型客户端组件
- [ ] Bundle 大小是否在预算内（首屏 JS < 100KB gzipped）
### 可访问性检查项
- [ ] 所有交互元素是否有适当的 aria 标签
- [ ] 颜色对比度是否达到 WCAG 2.1 AA 标准（4.5:1）
- [ ] 焦点管理是否正确（模态框、路由切换）
- [ ] 键盘导航是否完整（Tab、Enter、Escape）
### 安全检查项
- [ ] 用户输入是否经过 sanitize
- [ ] 是否使用了 Content Security Policy
- [ ] 敏感数据是否只在 Server Components 中处理
- [ ] API Routes 是否验证了请求来源差距一目了然。生产级的 skill 是清单式的——Agent 不需要"理解"最佳实践，只需要逐项检查。
技能分类：五大领域全覆盖
1. 前端（Frontend）
这是 Agent Skills 最强的领域，考虑到 Addy 的背景，这不意外。前端 skills 覆盖了：
- React/Next.js：App Router、Server Components、RSC 优化、状态管理
- 性能优化：Core Web Vitals（LCP、FID、CLS）、Bundle 优化、图片优化
- CSS/Tailwind：响应式设计、Design System、暗色模式
- 可访问性：WCAG 2.1 AA 标准、屏幕阅读器兼容、键盘导航
- PWA：Service Worker、离线缓存、推送通知
2. 后端（Backend）
后端 skills 覆盖了 Node.js/TypeScript 生态：
- API 设计：RESTful 规范、GraphQL schema 设计、错误处理
- 数据库：Prisma/Drizzle ORM 最佳实践、查询优化、迁移策略
- 认证：JWT/Session、OAuth 2.0、RBAC 权限模型
- 缓存：Redis 策略、CDN 配置、HTTP 缓存头
3. 测试（Testing）
测试 skills 是我认为最有价值的部分：
- 单元测试：Vitest/Jest、Mock 策略、覆盖率目标
- E2E 测试：Playwright 最佳实践、Page Object Model、CI 集成
- 可视化测试：Chromatic/Percy、截图对比、跨浏览器测试
- 性能测试：Lighthouse CI、Bundle 大小监控、渲染性能
4. 代码审查（Code Review）
这是 Agent Skills 的杀手级应用。它把 Google 的 code review 实践浓缩成了 Agent 可执行的检查清单：
## 代码审查 Skill 核心规则
### 设计质量
- 代码是否符合 SOLID 原则？
- 是否有不必要的复杂性？（YAGNI）
- 抽象层级是否一致？
### 正确性
- 边界条件是否处理？
- 错误处理是否完整？
- 并发安全是否考虑？
### 可维护性
- 命名是否清晰表达意图？
- 函数长度是否在 20 行以内？
- 注释是否解释了"为什么"而非"是什么"？
### 性能
- 是否有 N+1 查询？
- 是否有不必要的内存分配？
- 是否有可以缓存的重复计算？5. 架构（Architecture）
架构 skills 帮助 Agent 做高层设计决策：
- Monorepo：Turborepo/Nx 配置、包管理、依赖策略
- 微服务 vs 单体：何时拆分、如何通信、数据一致性
- 事件驱动：消息队列选型、Event Sourcing、CQRS
- 可观测性：日志、指标、链路追踪的标准化
跟 agentic-awesome-skills 的区别：质量 vs 数量
这是一个很常见的对比。agentic-awesome-skills（约 12K Star）是一个社区维护的 skills 列表，收录了数百个 skills。Agent Skills（78K Star）是 Addy Osmani 个人维护的精选库，目前有约 80 个 skills。
数量上，agentic-awesome-skills 更多。但质量上，两者不在一个层级：
- agentic-awesome-skills：社区贡献，质量参差不齐。有些 skill 很好，有些就是一句 prompt。没有统一的格式和标准。
- Agent Skills：Addy 亲自审核，每个 skill 都有完整的检查清单、技术栈说明、成功标准。格式统一，质量一致。
这就像 MDN Web Docs 和 W3Schools 的区别。W3Schools 内容更多，但 MDN 更准确、更深入、更权威。在 Agent Skills 这个领域，质量比数量重要得多——一个模糊的 skill 可能导致 Agent 产出错误代码，而一个精确的 skill 可以让 Agent 产出 Google 级别的代码。
如何使用和定制
Agent Skills 的使用非常灵活：
# 克隆仓库
git clone https://github.com/addyosmani/agent-skills.git
cd agent-skills
# 目录结构
agent-skills/
├── frontend/
│ ├── react-app-router.md
│ ├── performance-core-web-vitals.md
│ ├── accessibility-wcag21.md
│ ├── css-tailwind-patterns.md
│ └── pwa-service-worker.md
├── backend/
│ ├── api-restful-design.md
│ ├── database-prisma-patterns.md
│ ├── auth-jwt-oauth.md
│ └── caching-strategies.md
├── testing/
│ ├── unit-vitest-patterns.md
│ ├── e2e-playwright.md
│ ├── visual-chromatic.md
│ └── performance-lighthouse-ci.md
├── review/
│ ├── code-review-general.md
│ ├── code-review-security.md
│ └── code-review-performance.md
├── architecture/
│ ├── monorepo-turborepo.md
│ ├── microservices-patterns.md
│ └── observability-otel.md
└── README.md你可以直接使用，也可以定制。比如，把多个 skill 组合成一个：
# 把 frontend + review 组合成一个"全栈审查"skill
cat frontend/react-app-router.md \
frontend/performance-core-web-vitals.md \
review/code-review-general.md \
> my-fullstack-review.md
# 在 Claude Code 中使用
cp my-fullstack-review.md .claude/skills/fullstack-review.md
# 在 Cursor 中使用
cat my-fullstack-review.md >> .cursorrules
# 在 Hermes Agent 中使用
mkdir -p skills/fullstack-review
cp my-fullstack-review.md skills/fullstack-review/SKILL.mdSkills 设计的最佳实践
从 Agent Skills 项目中，我总结出了几条 skill 设计的最佳实践：
1. 清单优于描述
不要写"请确保代码质量好"，要写"请检查以下 10 项"。Agent 擅长执行清单，不擅长理解抽象概念。
2. 场景化优于通用化
不要写一个"通用 React skill"，要写"Next.js 15 App Router + Tailwind + Prisma 的代码审查 skill"。越具体，Agent 的输出越精确。
3. 可验证优于主观
不要写"代码应该易读"，要写"函数长度不超过 20 行，嵌套层级不超过 3 层"。可量化的标准让 Agent 的输出可预测。
4. 版本化优于静态
技术栈更新很快。React 19 的最佳实践跟 React 18 不一样。skill 需要跟着技术栈版本更新。
对 Agent 工程化的影响
Agent Skills 项目的最大意义，不是那 80 个 skill 文件，而是它定义了 Agent 技能的工程化标准。在它之前，写 Agent skill 是一门"手艺"——靠经验和直觉。在它之后，写 Agent skill 是一门"工程"——有标准、有方法、有验证。
这对整个 Agent 生态的影响是深远的：
- 降低了 skill 编写的门槛：新人可以照着 Agent Skills 的格式写，不用从零摸索
- 提升了 skill 的质量下限：社区有了参照标准，低质量 skill 更容易被识别
- 推动了 Agent 工具链的发展：skill 的工程化需要配套的测试、发布、版本管理工具
- 建立了信任体系：Addy Osmani 的背书让用户敢于在生产环境使用 Agent skills
局限性
公平地说，Agent Skills 也有局限：
- 技术栈偏向：主要覆盖 JavaScript/TypeScript 生态，Python/Go/Rust 的 skill 很少
- 个人维护：Addy 一个人的精力有限，更新速度可能跟不上技术变化
- 场景有限：目前主要覆盖 Web 开发，移动端、嵌入式、数据工程等领域空白
- 没有工具链：相比 Agents Marketplace 的 CLI 工具和适配层，Agent Skills 只是文件
谁应该用 Agent Skills？
这个项目最适合：
- 前端/全栈开发者：这是 Addy 的强项，前端 skills 的质量无出其右
- 追求代码质量的团队：生产级的 code review skills 是团队标准化的利器
- Agent skill 作者：学习如何写出高质量的 skill，Agent Skills 是最好的教材
- 技术领导者：用 Agent Skills 的标准来规范团队的 AI 辅助开发流程
78K Star 证明了一件事：在 Agent 时代，工程质量依然是核心竞争力。Addy Osmani 用一个 GitHub 仓库，为整个行业树立了 Agent 技能的标杆。