先搞清楚：Agent Skill 是什么

在讲「怎么找 Skill」之前，先把概念对齐。

Agent Skill 是一份写给 AI 助手的标准操作流程（SOP），通常是一个叫 SKILL.md 的 Markdown 文件，放在项目的技能目录里，例如：

你的项目/
├── .cursor/skills/          # Cursor
├── .agents/skills/          # 部分 Agent 工具（npx skills 默认落这里）
└── .claude/skills/          # Claude Code 等
    └── webapp-testing/
        └── SKILL.md         # 一份 Skill = 一个子目录 + SKILL.md

SKILL.md 里一般写四件事：

内容	作用
何时触发	什么情况下 Agent 应该读这份 SOP
步骤顺序	必须按什么顺序做，避免漏步骤
禁止项	哪些操作绝对不能做
验收标准	怎么判断任务做完了

举个例子：你自己写一份「补测试」的 Skill，里面规定「先读现有测试风格 → 写实现 → 写用例 → 跑 pytest → 贴输出」。以后 Agent 接到「加个函数并保证测试通过」，就会按这份 SOP 执行，而不是每次临场发挥。

社区 Skill 就是别人写好、你通过命令行下载安装的 SOP；自研 Skill 是你为团队项目手写的 SOP。两者可以共存。

下面这张表是本文会用到的其余名词：

概念	一句话解释
Skills CLI	命令行工具 npx skills，用来搜索、安装、更新 Skill，类似 npm 之于 JS 包
find-skills	Vercel 官方 Skill，教 AI 助手按固定流程帮你搜、比、装其他 Skill
skills.sh	开放 Skill 生态的目录站，按安装量排行，每个 Skill 有详情页
安装量	这个 Skill 被装过多少次；选型时优先 1K+，低于 100 需谨慎
发现层 / 能力层	发现层 Skill（如 find-skills）负责找和装；能力层 Skill 负责真正干活

前置环境：本机 Node.js 18+；任意支持 Skill 的 AI 编程工具（Cursor、Windsurf、VS Code + Copilot、Claude Code 等均可）。

---

这篇解决什么问题？

你可能已经遇到过这些场景：

• 「帮我把 React 应用做快一点」——有没有现成的性能优化 SOP？
• 「有没有 Skill 可以做 PR Review？」
• 「飞书文档怎么接进 Agent？」
• 「写 CSDN 技术博客，有没有 Skill 能生成架构图 / 信息图？」 ← 本文实战主线

如果每次都从零写 SKILL.md，等于重复造轮子。更麻烦的是：开放生态里 Skill 数量已经到数万级，在 GitHub 上搜仓库、看 Star，和「这个 Skill 到底好不好用」往往对不上号——单个 Skill 没有独立 Star，Star 是整仓的。

核心问题：如何在海量 Skill 里快速找到对的那个，并安全装上？

核心心智模型：

发现 Skill = 排行榜兜底（skills.sh）+ CLI 精搜（npx skills find）+ 质量三连验（安装量 · 来源 · 仓库）→ 一条命令安装。

find-skills 就是把上面这套流程写进 Agent 的「导购 Skill」——你描述需求，它按流程搜、比、装。

---

动手实践（一）：安装 find-skills 并搜一个能力包

目标（约 10 分钟）：全局安装 find-skills，用 CLI 搜两个场景，按质量规则装一个能力 Skill，再在对话里触发一次「帮我找 Skill」。

步骤 1：安装 find-skills（建议全局）

# 全局安装，所有项目可用；-y 跳过确认
npx skills add vercel-labs/skills --skill find-skills -g -y

装完后，在 AI IDE 里刷新 Skill 列表（或重开项目），确认 find-skills 出现在可用 Skill 中。

若只想给当前项目用，去掉 -g：

cd ~/你的项目目录
npx skills add vercel-labs/skills --skill find-skills -y

步骤 2：不装 Skill 也能搜——CLI 初体验

打开终端，跑两次搜索，感受结果格式：

# 场景 A：前端性能
npx skills find react performance

# 场景 B：测试相关
npx skills find testing

典型输出会列出：包名、安装量、skills.sh 详情链接。例如搜 testing 时，anthropics/skills@webapp-testing 往往排在前面（安装量 10 万级），而小众作者的同名 Skill 可能只有几百次安装——这就是 CLI 搜索的价值：把被大量验证过的选项顶上来。

安装命令格式统一为：

npx skills add <owner/repo> --skill <skill-name>

步骤 3：上 skills.sh 做「排行榜兜底」

浏览器打开 skills.sh，看首页 Leaderboard。

在跑 CLI 之前先看榜，能避免「搜到一个没人用的包就装」：

检查项	建议
安装量	优先 1K+；低于 100 需额外验证
来源	vercel-labs、anthropics、microsoft、github 等官方/知名组织更稳
仓库 Star	点开 GitHub 源仓库；Star 极低的小仓要警惕
与需求匹配	名字像 ≠ 真的能做你要的事，点进详情页看描述

Web 开发里常出现的头部 Skill：

• vercel-labs/agent-skills — React、Next.js、Web 设计（各 10 万+ 安装）
• anthropics/skills — 前端设计、文档处理、Web 测试

步骤 4：按质量规则装一个能力 Skill

假设你经常让 Agent 补 Web 测试，按「安装量 + 官方来源」选 anthropics/skills@webapp-testing：

cd ~/你的项目目录
npx skills add anthropics/skills --skill webapp-testing -y

安装后目录大致如下（路径因 IDE 而异）：

你的项目/
├── .agents/skills/webapp-testing/   # npx skills 常见落点
│   └── SKILL.md
└── ...

打开 SKILL.md，重点看三件事：

1. 何时触发 — 是否覆盖你的使用场景；
2. 步骤顺序 — 用的测试框架（Playwright、Jest 等）是否和你项目一致；
3. 禁止项 — 有没有和你团队规范冲突的操作。

若和社区 Skill 冲突，可以在项目里加一条 Rule（多数 AI IDE 支持 .cursor/rules/ 或等效配置），写明「以本项目 pytest / vitest 为准」，Rule 的优先级通常高于下载来的 Skill。

步骤 5：在对话里触发 find-skills

新开一轮对话，用自然语言提问（无需记命令）：

有没有 Skill 可以帮我在改完前端后做浏览器端到端测试？
请用 find-skills 的流程：先查 skills.sh 排行，再 CLI 搜索，给出 2 个候选和安装命令。

观察 AI 助手是否：

1. 先提排行榜/高安装量候选；
2. 再执行或建议 npx skills find e2e（或类似关键词）；
3. 给出 安装量 + 来源 + 安装命令，而不是只贴一个 GitHub 链接。

若它跳过验证直接推荐小众包，把下文「选型注意什么」里的 checklist 贴进对话，要求按规则重搜。

步骤 6：更新与团队记录

npx skills update    # 更新本机已安装的全部 Skill
npx skills --help    # 查看子命令

建议在项目里建一份简单记录（路径随意，如 docs/installed-skills.md），方便团队同步——后文实战案例会给一份更完整的示例表。

---

动手实践（二）：实战案例——为技术博客找配图 Skill

下面复现一次完整链路：写 CSDN 技术文 → 需要插图 → 用 find-skills 思路搜到配图 Skill → 安装 → 出图 → 嵌入 Markdown。

2.1 明确需求，拆关键词

需求：「生成技术文章插图的 Skill」。

先拆成可搜的关键词，不要只搜一个词——不同 Skill 的命名习惯不同：

轮次	搜索命令	命中方向
1	npx skills find illustration	通用插画类
2	npx skills find diagram	架构图 / 流程图（安装量更高）
3	npx skills find infographic	信息图 / 一图总结
4	npx skills find technical writing	写作 SOP（多半不出图，别误装）

本次 diagram 搜索的典型头部结果（截至实践时）：

Skill	安装量	适合场景
github/awesome-copilot@excalidraw-diagram-generator	27.6K	手绘风 Excalidraw，需再导出 PNG
jimliu/baoyu-skills@baoyu-diagram	12.9K	正文机制图，直接出 SVG
jimliu/baoyu-skills@baoyu-infographic	30.2K	头图 / 信息图，多版式
spillwavesolutions/design-doc-mermaid@design-doc-mermaid	31.7K	Mermaid 设计文档图

同时搜到的 应排除 候选：

Skill	安装量	排除原因
paper-illustration	321	低于 100 阈值需额外验证；偏学术论文
technical-writing 系列	数百～1K	管写作流程，不生成插图
youmind-blog-cover	72	安装量过低

这就是质量三连验的价值：搜索命中了，不等于应该推荐。

2.2 选型结论：机制图 + 信息图各一个

技术博客配图通常要两类图，装两个 Skill 分工最清晰：

图类型	推荐 Skill	输出
正文机制图（流程、架构、对比）	baoyu-diagram	单文件 .svg，可转 PNG
头图 / 一图总结	baoyu-infographic	栅格图（需图像 API 或 IDE 原生生图）

cd ~/你的项目目录
npx skills add jimliu/baoyu-skills --skill baoyu-diagram -y
npx skills add jimliu/baoyu-skills --skill baoyu-infographic -y

安装成功后，Skill 会出现在 .agents/skills/（或你 IDE 对应的 skills 目录），建议把该目录纳入 Git，方便团队复用同一套配图能力。

2.3 用 baoyu-diagram 为本文出图

在对话里 @ baoyu-diagram，描述要画什么。本次为 find-skills 主题生成了两张机制图：

文件	内容
diagram/find-skills/find-skills-workflow.svg	find-skills 发现流程（发现 · 验证 · 安装）
diagram/find-skills/find-skills-ecosystem.svg	Skill 生态三层结构

baoyu-diagram 按暗色技术风输出自包含 SVG，遵循统一设计系统（组件色、箭头、网格背景），改文案时直接编辑 SVG 即可。

CSDN 需要位图：SVG 不能原样粘贴，需转 PNG。推荐用 resvg（保留正确宽高比）：

cd diagram/find-skills
npx -y @resvg/resvg-js-cli \
  --font-dir /System/Library/Fonts --font-dir /Library/Fonts \
  --fit-width 1840 find-skills-workflow.svg find-skills-workflow@2x.png

npx -y @resvg/resvg-js-cli \
  --font-dir /System/Library/Fonts --font-dir /Library/Fonts \
  --fit-width 1920 find-skills-ecosystem.svg find-skills-ecosystem@2x.png

注意：SVG 源文件必须是干净的 UTF-8，不能混入控制字符（否则浏览器会报 PCDATA invalid Char value）。若用 macOS 的 qlmanage 导出，容易得到正方形缩略图且可能渲染失败，不建议用于发 CSDN。

2.4 嵌入 Markdown 并发 CSDN

插图写回文章时使用相对路径：

![find-skills 发现流程](diagram/find-skills/find-skills-workflow@2x.png)

发 CSDN 清单：

1. 正文用 Markdown 编辑器写好，保留 @[TOC] 生成目录；
2. 两张 PNG 上传到 CSDN 图床（或用自有图床），替换文中的相对路径；
3. 代码块保持可复制；表格不宜过宽；
4. 头图可选：用 baoyu-infographic 生成 16:9 信息图（需配置图像 API，或 Cursor 的 GenerateImage）。

2.5 本次实践产出一览

你的项目/
├── .agents/skills/
│   ├── baoyu-diagram/
│   └── baoyu-infographic/
├── docs/installed-skills.md          # 可选：团队 Skill 清单
└── output/.../find-skills-discovery.md
    └── diagram/find-skills/
        ├── find-skills-workflow.svg
        ├── find-skills-workflow@2x.png    ← 发 CSDN 用
        ├── find-skills-ecosystem.svg
        └── find-skills-ecosystem@2x.png

团队 Skill 清单示例（可直接复制到 docs/installed-skills.md）：

Skill	类型	用途	安装命令
find-skills	发现层	搜、比、装其他 Skill	npx skills add vercel-labs/skills --skill find-skills -g -y
webapp-testing	能力层	Web 测试 SOP	npx skills add anthropics/skills --skill webapp-testing -y
baoyu-diagram	能力层	技术文章 SVG 机制图	npx skills add jimliu/baoyu-skills --skill baoyu-diagram -y
baoyu-infographic	能力层	信息图 / 封面	npx skills add jimliu/baoyu-skills --skill baoyu-infographic -y

---

刚才发生了什么？

还记得步骤 2 里 npx skills find testing 的输出吗？同一条搜索里，安装量可以从 13 万 到 几百 差三个数量级——这不是 CLI 偏心，而是生态的真实分布：少数头部 Skill 吃掉大部分安装，长尾里混杂实验品和重复造轮子。

配图实战里同样如此：搜 diagram 前排是 10K～30K 安装量，搜 illustration 长尾里大量 <1K 的包。先宽搜、再窄选、最后验质量，比盯第一个命中结果靠谱得多。

Skills CLI：Skill 的包管理器

npx skills 由 Vercel 维护，遵循 Agent Skills 开放标准。核心命令：

命令	作用
npx skills find [关键词]	按关键词搜索，可选 --owner <作者> 限定来源
npx skills add <包>	从 GitHub 等源安装到本地 Skill 目录
npx skills update	更新已安装 Skill
npx skills init <名称>	脚手架初始化一个自研 Skill

社区 Skill 是「下载来的 SOP」，自研 Skill 是「项目专属 SOP」，目录结构相同，可以并存。

find-skills：把「导购流程」写进 Agent

find-skills 不帮你写代码、不跑测试、不画图。它规定 AI 助手收到「有没有 Skill 能做 X」时该怎么动：

用户描述需求
    ↓
① 查 skills.sh Leaderboard（头部是否已有解）
    ↓
② npx skills find <关键词>（精搜，可多轮换词）
    ↓
③ 质量验证（安装量 / 来源 / Star / 功能是否真的匹配）
    ↓
④ 给出推荐 + npx skills add 命令（用户确认后可代执行）

它和 grill-me、webapp-testing、baoyu-diagram 这类能力 Skill 的分工如下：

对比	find-skills	能力类 Skill
职责	发现、推荐、安装	执行具体工作流
何时触发	「找 Skill」「能不能做 X」	「审方案」「写测试」「画架构图」等
建议装几个	1 个全局即可	按场景 2～4 个
本次实践	搜到 baoyu 系列	实际产出 SVG / PNG 插图

生态变大以后，「地图」往往比「单点能力」更先被需要——这也是 find-skills 长期位居安装榜前列的原因。

skills.sh：看热度，别看错指标

• 单个 Skill 没有独立 GitHub Star；看热度应盯 skills.sh 安装量。
• 仓库 Star 是整仓的，拆不到某一个 Skill 头上。
• 搜索命中 ≠ 推荐；命中之后还要做质量验证。
• 名字像 ≠ 能做：technical-writing 管写作，不管配图；blog-cover 类 Skill 安装量往往极低，要格外谨慎。

三个关键词串起来

发现（find / skills.sh / 多轮换词）→ 验证（安装量 · 来源 · 功能匹配）→ 安装（skills add）

---

选型注意什么

#	注意项
1	先装 find-skills，再堆能力 Skill——避免一口气装十几个，撑爆上下文窗口
2	安装量 < 100 默认不推生产；除非你看过 SKILL.md 源码且需求极窄
3	官方来源优先：vercel-labs、anthropics、microsoft、github；未知作者要检查 Skill 里是否要求高危工具权限
4	关键词要具体，且多轮换词：react testing 优于 testing；配图可试 diagram → infographic → excalidraw
5	社区 Skill 与项目 Rule 冲突时，以项目 Rule 为准
6	全局 vs 项目级：find-skills 建议 -g 全局；业务强相关 Skill（测试、配图）装项目级，便于版本锁定和 Code Review
7	配图 Skill 分清输出形态：SVG 机制图（baoyu-diagram）vs 栅格信息图（baoyu-infographic，常需 API）vs Mermaid 源码（需再转 PNG 才能发 CSDN）

常见搜索场景速查

你的场景	建议搜索词	可能命中的方向
React / Next 性能	react performance	Vercel 系 best-practices
PR / 代码审查	pr review	review、triage 类 Skill
端到端测试	playwright / e2e	webapp-testing、browser-testing
部署 / CI	deploy / ci-cd	DevOps 类工作流
CHANGELOG / 文档	changelog / api-docs	文档生成 SOP
移动端 UI	mobile ui / compose	设计系统、原生 UI Skill
技术博客机制图	diagram / excalidraw	baoyu-diagram、excalidraw-diagram-generator
技术博客信息图	infographic	baoyu-infographic
Mermaid 转发布图	mermaid-to-image	导出 PNG 发 CSDN / 公众号

找不到合适 Skill 时

1. 明确告诉用户「生态里没有可靠匹配」——不要硬推低安装量的小众包
2. 用 AI 助手的通用能力直接完成任务
3. 若任务会反复出现 → 自建 Skill：
   npx skills init my-skill
   然后编辑生成的 SKILL.md，写清触发条件、步骤、禁止项、验收标准

自研 Skill 最小模板示例：

---
name: my-pytest-helper
description: 为本项目新增函数并保证 pytest 通过
---

# 补测试 SOP

## 何时触发
用户要求新增函数/方法并保证测试通过。

## 步骤（必须按序）
1. 阅读 `src/` 与 `tests/`，确认命名风格。
2. 实现函数；不引入新第三方依赖。
3. 补至少 1 个正常用例 + 1 个边界用例。
4. 运行 `python -m pytest tests/ -q`，粘贴完整输出。
5. 失败则修复，最多 3 轮。

## 禁止
- 跳过测试
- 删除已有测试

---

总结

• Agent Skill 是写给 AI 的 SOP 包（SKILL.md）；社区 Skill 可下载，自研 Skill 可手写，两者共存。
• Skills CLI（npx skills）负责搜、装、更新；skills.sh 用安装量排行帮你快速缩小候选。
• find-skills 是官方「导购 Skill」，把「排行榜 → CLI 搜索 → 质量验证 → 安装」固化成 Agent 行为。
• 选型看 安装量 + 来源 + 功能是否真的匹配，不要只看搜索命中或 GitHub Star。
• 推荐组合：全局 1 个 find-skills + 项目内 2～4 个能力 Skill；写技术博客可再加 baoyu-diagram（机制图）+ baoyu-infographic（信息图）。
• 实战链路：多轮换词搜索 → 排除误命中 → 安装 → 出图 → SVG 转 PNG → 嵌入 Markdown → 上传 CSDN。
• 心智模型：发现 · 验证 · 安装。

---

参考链接

GitNexus + MCP 实战记录理解整个项目

用 grill-me Skill 把 AI 写的 PRD 拷问到能写代码