Agent Skills 使用指南

本文档整理了项目中已安装的 25 个 Agent Skills，涵盖安装方式、使用说明，以及在一个 Vue 项目从创建到运维上线的完整生命周期中如何按阶段使用这些 skills。

---

一、安装方式

1.1 安装 openskills CLI

npm install -g openskills

1.2 安装 skills（二选一）

方式 A：在线安装（需要 GitHub 连通）

# 全量安装（跳过交互选择）
openskills install addyosmani/agent-skills -y

# 交互式选择安装
openskills install addyosmani/agent-skills

方式 B：离线手动安装（GitHub 不通时）

# 1. 通过镜像克隆仓库
git clone https://gitclone.com/github.com/addyosmani/agent-skills.git /tmp/agent-skills

# 2. 手动复制到项目
cp -r /tmp/agent-skills/skills/* .claude/skills/

# 3. 同步到 AGENTS.md
openskills sync -y

1.3 AI Agent 调用方式

Skills 安装后会写入项目根目录的 AGENTS.md，AI coding agent（Claude Code、Cursor 等）会自动读取并识别。Agent 可以通过以下命令加载 skill：

npx openskills read <skill-name>          # 单个
npx openskills read skill-one,skill-two   # 多个

也可以在对话中直接描述任务，agent 会根据 AGENTS.md 中的触发条件自动匹配对应的 skill。

---

二、Skills 全景清单

🏗️ 规划与设计（5 个）

Skill	触发场景
spec-driven-development	新项目/新功能启动，需求模糊，需要先确定规格
planning-and-task-breakdown	已有 spec，需要拆解为可执行的任务列表
idea-refine	想法还很模糊，需要发散-收敛思维来打磨
doubt-driven-development	正确性至关重要的决策，高风险操作
interview-me	需求不明确，需要一问一答挖掘真实意图

💻 编码实现（7 个）

Skill	触发场景
incremental-implementation	涉及多文件的变更，避免一次性写太多代码
api-and-interface-design	设计 REST/GraphQL API、模块边界、类型契约
frontend-ui-engineering	构建页面、组件，需要生产级质量
make-interfaces-feel-better	UI 打磨——动画、阴影、边框、排版、微交互
source-driven-development	使用框架/库时需要基于官方文档，避免过时模式
test-driven-development	实现任何逻辑、修复 bug、修改现有行为
context-engineering	开启新会话、agent 输出质量下降、切换任务

🔍 质量保证（4 个）

Skill	触发场景
code-review-and-quality	合并前多维度审查（自己/agent/他人写的代码）
code-simplification	代码能工作但可读性差，需要重构简化
browser-testing-with-devtools	浏览器调试：DOM、控制台、网络、性能、视觉验证
debugging-and-error-recovery	测试失败、构建报错、行为不符预期

🚀 运维与发布（5 个）

Skill	触发场景
ci-cd-and-automation	搭建/修改 CI/CD 流水线、质量门禁
git-workflow-and-versioning	提交、分支、冲突解决、发版、changelog
shipping-and-launch	准备上线：checklist、监控、灰度、回滚策略
observability-and-instrumentation	加日志、指标、追踪、告警
performance-optimization	Core Web Vitals、N+1 查询、性能瓶颈

🔐 安全与治理（4 个）

Skill	触发场景
security-and-hardening	用户输入、认证、数据存储、第三方集成
deprecation-and-migration	废弃旧 API/系统、迁移用户到新实现
documentation-and-adrs	架构决策、API 变更、需要给未来的人留上下文
using-agent-skills	元技能：发现和调用其他 skills

---

三、Vue 项目全生命周期 Skills 使用指南

┌─────────────────────────────────────────────────────────────────────┐
│                     Vue 项目生命周期                                  │
│                                                                      │
│  1.立项  2.设计  3.开发  4.测试  5.审查  6.上线  7.运维              │
│    │       │       │       │       │       │       │                 │
│    ▼       ▼       ▼       ▼       ▼       ▼       ▼                 │
│  每个阶段都有对应的 skills 可以调用                                    │
└─────────────────────────────────────────────────────────────────────┘

---

🎯 阶段一：立项 & 需求分析

目标：从模糊想法到清晰可执行的规格文档。

顺序	Skill	作用
1	interview-me	通过一问一答挖掘真实需求，避免「做出来的不是想要的」
2	idea-refine	发散 → 收敛思维，打磨想法，压力测试假设
3	spec-driven-development	输出正式的规格文档（功能范围、技术栈、UI/UX）
4	doubt-driven-development	对规格中的关键决策做对抗性审查

示例对话流程：

用户：帮我做一个商品管理系统
Agent：（触发 interview-me）
  → "这个系统的主要使用场景是什么？谁会用？"
  → "是移动端还是 PC 端？需要离线能力吗？"
  → "商品数据来源是什么？需要对接哪些后端服务？"
  ...

用户：基于刚才的需求，给我写一份 spec
Agent：（触发 spec-driven-development）
  → 输出功能范围、技术选型、路由设计、数据模型...

---

🎨 阶段二：架构 & UI 设计

目标：确定技术方案、模块边界、UI 设计方向。

顺序	Skill	作用
1	api-and-interface-design	定义前端页面与后端 API 的接口契约（REST/GraphQL）
2	documentation-and-adrs	记录关键架构决策（为什么选这个方案而不是另一个）
3	context-engineering	配置项目的 CLAUDE.md / AGENTS.md，让 agent 理解项目上下文
4	planning-and-task-breakdown	将 spec 拆分为可并行执行的任务列表

示例：

用户：设计一下这个 Vue 项目的路由和 API 层
Agent：（触发 api-and-interface-design）
  → 定义路由结构、页面组件树
  → 定义 API 接口：请求/响应格式、错误码、类型契约
  → 模块边界：composables、stores、utils 的职责划分

用户：为什么选 Pinia 而不是 Vuex？
Agent：（触发 documentation-and-adrs）
  → 记录决策：Vuex 已进入维护模式，Pinia 是官方推荐...

---

💻 阶段三：编码实现

目标：增量、高质量地交付代码。

顺序	Skill	作用
1（每任务）	test-driven-development	每个功能/修复先写测试，再写代码
2（每任务）	source-driven-development	基于 Vue/UniApp 官方文档编码，避免过时模式
3（每任务）	incremental-implementation	一次只改必要的文件，增量提交
4（UI 相关）	frontend-ui-engineering	确保组件可访问、响应式、生产级质量
5（UI 打磨）	make-interfaces-feel-better	动画、阴影、hover 状态、微交互等细节打磨

典型迭代循环：

对于每个任务：
  1. TDD：写测试 → 红灯 → 写代码 → 绿灯 → 重构
  2. source-driven-development：查阅 Vue/UniApp/TDesign 官方文档验证写法
  3. incremental-implementation：只改动必要的文件，立即提交
  4. 如果是 UI 任务：
     frontend-ui-engineering → make-interfaces-feel-better

---

🧪 阶段四：测试 & 调试

目标：发现并修复问题，确保代码质量。

顺序	Skill	作用
1	browser-testing-with-devtools	在真实浏览器中运行，检查 DOM、控制台、网络请求
2	debugging-and-error-recovery	测试失败或行为不符预期时，系统性地定位根因
3	code-review-and-quality	合并前多维度审查：正确性、安全性、可维护性
4	code-simplification	删掉无用的复杂度，提升可读性

示例：

用户：页面加载白屏，帮我看看
Agent：（触发 debugging-and-error-recovery）
  → 1. 复现问题
  → 2. 查看控制台错误
  → 3. 二分法定位代码范围
  → 4. 找到根因（一个未捕获的 Promise 异常）
  → 5. 修复并验证

用户：review 一下我这个 PR
Agent：（触发 code-review-and-quality）
  → correctness / security / performance / maintainability ...
  → 输出分级别的审查意见

---

✅ 阶段五：合并 & 发版

目标：安全地将代码合入主分支并发布。

顺序	Skill	作用
1	code-review-and-quality	最终合并前审查
2	git-workflow-and-versioning	分支管理、冲突解决、版本号选择、changelog
3	ci-cd-and-automation	确保 CI 流水线质量门禁通过

---

🚀 阶段六：上线发布

目标：生产环境平稳上线。

顺序	Skill	作用
1	shipping-and-launch	上线 checklist：功能验证、灰度策略、回滚方案
2	security-and-hardening	最终安全检查：XSS、CSRF、认证、敏感数据
3	observability-and-instrumentation	确保关键路径有日志/指标/告警
4	performance-optimization	上线前性能检查：首屏加载、包体积、关键渲染路径

---

🔄 阶段七：持续运维 & 迭代

目标：线上稳定运行，持续改进。

时机	Skill	作用
线上报错	debugging-and-error-recovery + observability-and-instrumentation	定位问题 + 补全监控
功能废弃	deprecation-and-migration	平滑迁移用户到新方案
性能劣化	performance-optimization	分析瓶颈并优化
新迭代开始	回到阶段一，继续循环

---

四、快速参考速查表

需要做什么？                        →   使用哪个 skill？
────────────────────────────────────────────────────────────────
需求不明确                         → interview-me
想法需要打磨                       → idea-refine
需要写规格文档                     → spec-driven-development
需要拆任务                         → planning-and-task-breakdown
关键决策需要审查                   → doubt-driven-development
设计 API / 模块边界                → api-and-interface-design
记录架构决策                       → documentation-and-adrs
配置 agent 上下文                  → context-engineering
写代码                             → test-driven-development + source-driven-development
多文件改动                         → incremental-implementation
做 UI（页面/组件）                 → frontend-ui-engineering
UI 细节打磨                        → make-interfaces-feel-better
代码审查                           → code-review-and-quality
简化代码                           → code-simplification
浏览器调试                         → browser-testing-with-devtools
排查 bug                           → debugging-and-error-recovery
Git 操作 / 发版                    → git-workflow-and-versioning
CI/CD 配置                         → ci-cd-and-automation
准备上线                           → shipping-and-launch
安全检查                           → security-and-hardening
加监控/日志                        → observability-and-instrumentation
性能优化                           → performance-optimization
废弃旧功能                         → deprecation-and-migration
不知道用哪个 skill                 → using-agent-skills

---

五、更新 Skills

# 列出已安装的 skills
openskills list

# 更新全部 skills
openskills update

# 更新指定 skills
openskills update code-review-and-quality browser-testing-with-devtools

# 移除某个 skill
openskills remove <skill-name>

# 管理 skills（交互式）
openskills manage

# 重新同步到 AGENTS.md
openskills sync -y

# 查看 skill 内容
openskills read code-review-and-quality

---

📅 更新时间：2026-07-24
📦 Skill 来源：addyosmani/agent-skills（24 个） + make-interfaces-feel-better（项目自有）