10万人都在用的 Top10 skills，我帮你试了！

导读：skills.sh（Vercel 出品的 Agent Skills 导航站）上线后，排行榜上的数字已经卷到离谱——第一名 240 万 热度，第二名 60 万+，连第十名都有 35 万+。 这些排名靠前的 Skill 真的好用吗？有没有水分？哪些值得装，哪些看看就行？ 我把 skills.sh 全站热度 Top 10 全部翻了一遍，逐个实。

写在开头

先交代背景。

skills.sh 是 Vercel 做的 Agent Skills 开放生态导航站——你可以理解成"AI 技能的 App Store"。

上面收录的每一个 Skill 都是一个开源的 SKILL.md 指令包，装上之后，你的 AI 助手（Claude Code、Cursor、Codex、GitHub Copilot、Windsurf、Gemini、Cline……70+ Agent 都支持）就自动获得某项"专业技能"。

排名依据是全站热度值（8 周活跃度 + 安装量综合计算），数字越大越火。

我花了两天时间，把 Top 10 全部装上、挨个跑了一遍，有些确实牛逼，有些……怎么说呢，存在感比较强。

下面直接上结果。

一、Top 10 全景速览

先上一张总表，让你对这 10 款 Skill 有个整体感知，后面逐个拆解 (排行榜数据会定时刷新， 你当前看到的，不一定和下面完全一样)。

一个有意思的现象：Top 10 里 Vercel 占了 4 席、Matt Pocock（TypeScript 顶级大神）一个人占了 3 席、Anthropic 和 Microsoft 各 1 席。Vercel 系和 Matt Pocock 系基本瓜分了半壁江山。

二、安装方式

每个 Skill 的安装命令不一样，但底层逻辑一样——通过 skills CLI 一行搞定。

先装 CLI 工具本身：

npx skills add vercel-labs/skills --skill find-skills

通用安装格式：

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

Cursor 用户注意： 最新版Cursor 默认读取的全局skills目录是 ～/.cursor/skills-cursor，而skills add安装命令默认为cursor添加的目录是/.cursor/skills，因此 装完后需要建一个软链：

cd ~/.cursor && ln -s skills skills-cursor

最省心的做法（也是我最推荐的）：直接把 skills.sh 网址丢给你的 AI 助手，说——

"帮我去 skills.sh 看看排行榜，挑几个适合我工作场景的 Skill 装上"

它会自己选、自己装、自己配。全程不用你碰命令行。

后面每个 Skill 的具体安装命令我都标了，但如果你嫌麻烦，用上面这个"懒人大法"就行。

三、Top 10 实测

从第 10 名开始往上倒数，越往后越硬核。

#10 tdd — AI 辅助 TDD ｜ mattpocock/skills

🔥 热度：390K ｜ 👤 作者：Matt Pocock（TypeScript 圈顶级大神，161.8K GitHub Stars）

一句话：让 AI 按照"测试先行"的纪律写代码，而不是先写实现再补测试。

它干什么？

TDD（Test-Driven Development）大家都知道——先写测试、再写实现、最后重构。但现实是，AI 写代码默认是"先写实现，测试？什么测试？"。

这个 Skill 强制 AI 走 TDD 流程：

规划 → 写一个失败的测试 → 写最小实现让测试通过 → 重构 → 循环

它的核心理念是**"垂直切片"**——每个测试覆盖一个完整的行为路径，而不是一个孤立的函数。测试只验证公共接口的行为，不验证内部实现细节。

实测体验：

我让它给一个登录模块写代码。没有这个 Skill 时，AI 直接甩出 200 行实现代码；装上之后，它先问我："这个登录失败时应该返回什么？Token 存在哪？超时怎么处理？"——问完才动手写测试。

纪律性确实强。但说实话，如果你的项目本身没有 TDD 文化，用起来会觉得"太慢了"。它更适合新项目或核心模块。

适合谁：认真做 TDD 的团队、写核心业务逻辑的开发者、对代码质量有强迫症的人。

安装：

npx skills add mattpocock/skills --skill tdd

#9 improve-codebase-architecture — 架构体检师 ｜ mattpocock/skills

🔥 热度：377K ｜ 👤 作者：Matt Pocock

一句话：让 AI 像架构师一样审查你的代码库，找出"深层技术债"，输出重构 RFC。

它干什么？

它基于 John Ousterhout 的《A Philosophy of Software Design》中的"深模块"理念——好的模块应该接口简单但实现深入。这个 Skill 会：

1. 1. 像一个新来的工程师一样探索你的代码库
2. 2. 发现架构摩擦点（哪些模块接口太复杂、哪些职责不清、哪些耦合过重）
3. 3. 提出具体的重构方案，格式化为 GitHub Issue RFC

实测体验：

我把它指向了一个维护了两年多的中间层项目。它花了大概 5 分钟读代码，然后给我列了 7 个架构问题——其中 3 个是"嗯确实是这样但我一直假装没看见"的那种。

输出质量最让我满意的是：它不是泛泛而谈"你的代码耦合度高"，而是精确到具体文件、具体函数、具体依赖方向。每条建议都有"为什么要改"和"怎么改"。

适合谁：接手老项目的开发者、技术负责人、准备做架构重构的团队。

安装：

npx skills add mattpocock/skills --skill improve-codebase-architecture

#8 remotion-best-practices — 用 React 做视频 ｜ remotion-dev/skills

🔥 热度：416K ｜ ⬇️ 安装量：312K ｜ ⭐ GitHub Stars：3.9K ｜ 👤 作者：Remotion 官方

一句话：让 AI 按照官方最佳实践，用 React 代码生成视频。

它干什么？

Remotion 是一个"用写代码的方式做视频"的框架——你用 React 组件描述每一帧画面，它帮你渲染成 MP4。这个 Skill 是 Remotion 官方出品的知识库，包含 30+ 条规则文件，覆盖：

• • 动画（useCurrentFrame() + interpolate() + Easing）
• • 音频、字幕、音效集成
• • 3D 内容、Lottie 动画、图表
• • FFmpeg 操作、媒体检测（时长、尺寸、帧提取）
• • Mapbox 集成、AI 配音、光效

实测体验：

我让 AI 用 Remotion 做了一个产品宣传片的片头（5 秒动画 + Logo + 标语）。没有这个 Skill 时，AI 写出来的代码能跑但动画很生硬；装上之后，它自动用了正确的缓动函数、正确的帧率处理、正确的组件结构。

如果你本来就在用 Remotion，这个 Skill 是必装的。如果你不用 Remotion……那先了解一个概念：以后做视频不一定要开 Premiere，写 React 也能做，而且可以参数化批量生成。

适合谁：Remotion 用户、对"代码生成视频"感兴趣的开发者、需要批量生成视频内容的团队。

安装：

npx skills add remotion-dev/skills --skill remotion-best-practices

#7 microsoft-foundry — Azure AI 智能体部署 ｜ microsoft/azure-skills

🔥 热度：432K ｜ 👤 作者：Microsoft 官方

一句话：微软官方出品，覆盖 Azure AI Foundry 智能体的全生命周期——构建、部署、评估、运维。

它干什么？

Azure AI Foundry 是微软的 AI Agent 平台。这个 Skill 覆盖了完整的开发链路：

• • Docker 构建 → ACR 推送 → 智能体创建 → 容器启动
• • 批量评估 → 持续评估
• • 模型发现与部署
• • 故障排查

它还包含多个子技能文档，每个工作流都有独立的 SKILL 文档，强制 AI 在执行前先阅读对应的子技能说明。

实测体验：

坦诚说——我不怎么用 Azure，所以体验有限。但如果你团队用 Azure AI Foundry，这个 Skill 的价值显而易见：它把微软官方文档里散落的部署流程、评估流程、MCP 工具调用方式，全部整理成了 AI 可直接执行的指令。

微软在 azure-skills 仓库里一口气发布了 16 个 Azure 系列 Skill（Foundry、OpenAI、Search、Container Apps、Functions……），总热度加起来 680 万+。如果你是 Azure 全家桶用户，建议把整个仓库装上。

适合谁：Azure 用户、用微软 AI 技术栈的企业团队、需要企业级 AI Agent 部署的架构师。

安装：

npx skills add microsoft/azure-skills --skill microsoft-foundry

#6 web-design-guidelines — UI 设计规范审查 ｜ vercel-labs/agent-skills

🔥 热度：440K ｜ ⬇️ 安装量：305K ｜ 👤 作者：Vercel 官方

一句话：用 Vercel 的 Web 界面设计规范，逐行审查你的 UI 代码。

它干什么？

Vercel 有一套公开的 Web Interface Guidelines，涵盖间距、排版、交互、可访问性。这个 Skill 让 AI 在每次审查前先从远程拉取最新的规范文档，然后逐行检查你的代码。

你只需要说一句"帮我审查一下这个页面的 UI"，它就会扫描指定文件或目录，输出类似这样的结果：

src/components/Header.tsx:23  - 间距不符合 8px 网格规范
src/components/Button.tsx:8   - 缺少 focus-visible 样式
src/pages/Login.tsx:45        - 对比度不足 WCAG AA 标准

格式非常干净——文件:行号 + 问题，不废话。

实测体验：

我让它审查了一个我"自认为写得还不错"的仪表盘页面。它挑出了 11 个问题，其中 4 个是可访问性相关的——我确实没考虑过色盲用户、键盘导航、屏幕阅读器这些。

最大的感受是"格式舒服"。很多 AI 审查工具喜欢写长篇大论的分析报告，但它只给你 文件:行号 + 问题，你可以直接在编辑器里逐条修。

适合谁：前端开发者、注重设计规范的团队、需要做可访问性审查的项目。

安装：

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

#5 grill-me — 灵魂拷问型架构审查 ｜ mattpocock/skills

🔥 热度：459K ｜ ⬇️ 安装量：93K ｜ ⭐ GitHub Stars：63.5K ｜ 👤 作者：Matt Pocock

一句话：在你动手写代码之前，先用一连串拷问把你的方案"烤"一遍。

它干什么？

"Grill"在英文里有"严刑拷问"的意思。这个 Skill 的工作方式非常独特——它不帮你写代码，而是在你提出一个方案/设计后，像一位严厉的技术面试官一样，系统性地追问你：

• • "你为什么选这个方案？备选方案考虑了哪些？"
• • "如果用户量翻 10 倍，这个设计还能撑住吗？"
• • "这个模块的边界在哪？什么情况不属于它的职责？"
• • "如果这个服务挂了，降级方案是什么？"

它会遍历决策树的每一个分支，并且自动探索你的代码库来回答自己提出的问题。设计用于：设计评审、架构验证、编码前的方案验证。

实测体验：

这个 Skill 是我个人最喜欢的一个。

我给它描述了一个"消息推送系统"的设计方案。它连续追问了我 20 多个问题，其中有几个直接让我重新思考了整个设计——"你的推送服务和消息存储是同步的还是异步的？如果是异步，消息最多延迟多久？用户能感知到这个延迟吗？"

它不帮你做决定，但它会让你发现自己方案里的漏洞。每次被"拷问"完，我的方案都会变好一截。

适合谁：技术负责人、架构师、需要在编码前验证方案的开发者、想提升系统设计能力的人。

安装：

npx skills add mattpocock/skills --skill grill-me

#4 agent-browser — AI 浏览器自动化 ｜ vercel-labs/agent-browser

🔥 热度：514K ｜ ⬇️ 安装量：276K ｜ 👤 作者：Vercel 官方

一句话：让 AI 自己打开浏览器、操作网页、跨命令保持会话连续性。

它干什么？

这是 Vercel Labs 出品的浏览器自动化 Skill。和普通的浏览器自动化工具不同的是，它支持三种浏览器模式：

内置 15+ 命令类别，支持 Python 集成。最关键的是——会话连续性。普通的浏览器自动化每次调用都是全新的会话，但 agent-browser 可以跨多条 AI 指令保持浏览器状态（Cookie、LocalStorage、打开的标签页）。

实测体验：

我让它做了三件事：打开 GitHub、登录我的账号、创建一个 Issue。三条指令分开发送，它每次都接续上一次的浏览器状态，整个过程很丝滑。

然后我又让它去一个电商网站抓取了商品列表——过去这种操作要么自己写 Puppeteer 脚本，要么手动。现在一句话就搞定了。

但要注意：如果涉及登录密码等敏感操作，请谨慎使用 Cloud Remote 模式。Headless 和 Real Chrome 模式数据在本地，更安全。

适合谁：需要浏览器自动化的开发者、做爬虫/自动化测试的工程师、想让 AI 帮你操作网页的所有人。

安装：

npx skills add vercel-labs/agent-browser --skill agent-browser

#3 vercel-react-best-practices — React 性能优化圣经 ｜ vercel-labs/agent-skills

🔥 热度：527K ｜ 👤 作者：Vercel 官方

一句话：70 条 React/Next.js 性能优化规则，按影响级别排序，写代码时自动校验。

它干什么？

这是 Vercel 官方维护的 React/Next.js 性能优化指南，包含 70 条规则，分布在 8 个类别 中，按影响级别从高到低排列：

每条规则都有错误示例和正确示例，并且有唯一前缀标识（如 async-parallel、bundle-barrel-imports），方便在自动化工具中引用。

实测体验：

我拿一个现有的 Next.js 项目让它审查。它直接挑出了两个"致命"级别的问题——一个是串行 await 改成 Promise.all 就能解决的请求瀑布流，另一个是 barrel imports 导致包体积虚胖。

改完之后，首屏加载快了 30% 左右。

和 #6 web-design-guidelines 的区别：那个审"设计规范"（间距、颜色、可访问性），这个审"性能规范"（瀑布流、包体积、重渲染）。两个可以一起装，互不冲突。

适合谁：React/Next.js 开发者、关注性能的前端团队、做代码审查的 Tech Lead。

安装：

npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices

#2 frontend-design — 前端设计美学 ｜ anthropics/skills

🔥 热度：628K ｜ ⬇️ 安装量：443K ｜ ⭐ GitHub Stars：138.8K ｜ 👤 作者：Anthropic 官方

一句话：Anthropic 官方出品，专治 AI 生成的"千篇一律模板感"页面。

它干什么？

这是整个 skills.sh 上安装量第二高的 Skill（仅次于 find-skills），来自 Anthropic 官方。它解决一个所有 AI 编程工具都有的通病——AI 写出来的页面长得都一样。

紫色渐变、Inter 字体、居中卡片、圆角阴影……这些"AI 味"元素被它明确列为要避免的反面教材。

它的工作方式是：在写代码之前，先和你确定一个大胆的美学方向——

• • 极简主义（brutally minimal）
• • 极繁主义混乱（maximalist chaos）
• • 复古未来（retro-futuristic）
• • 奢华精致（luxury/refined）
• • 玩具感（playful/toy-like）
• • 编辑杂志风（editorial/magazine）
• • 粗野主义（brutalist/raw）
• • 装饰艺术（art deco/geometric）
• • ……

确定方向后，再用精确的设计执行来实现——字体、配色、动效、空间构成、纹理细节，全部围绕美学方向服务。

实测体验：

我分别用"不装 Skill"和"装上 frontend-design"让 AI 做了两个产品落地页。

不装的版本：紫色渐变背景、居中标题、三列功能卡片、底部 CTA 按钮。标准到可以当模板。

装了的版本：AI 先问我要什么风格。我说"复古杂志感"。它生成出来的页面用了衬线字体、不对称布局、做旧的纸质纹理、横向滚动的内容区域——说实话，如果不告诉我，我分不清这是 AI 写的还是设计师手写的。

如果你只能装一个前端 Skill，就装这个。

适合谁：所有让 AI 写前端界面的开发者、独立开发者、前端工程师、不想花设计费但又想要好看页面的创业者。

安装：

npx skills add anthropics/skills --skill frontend-design

#1 find-skills — 技能生态入口 ｜ vercel-labs/skills

🔥 热度：2.4M（断崖式第一，超过第 2-10 名总和） ｜ 👤 作者：Vercel 官方

一句话：skills.sh 生态的 CLI 管理工具，不装它你什么都装不了。

它干什么？

find-skills 是整个 Agent Skills 生态的"基础设施"——它本身就是 skills CLI 工具。所有其他 Skill 的安装、搜索、管理，都通过它来完成。

核心命令：

实测体验：

这个没什么好"测"的——它是整个生态的入口。就像你用 Homebrew 得先装 brew，用 npm 得先有 npm 一样。

但我想说的是它的 find 命令确实好用。你说 npx skills find "react"，它会把全网所有和 React 相关的 Skill 列出来，带热度排名和简介。比自己去网站上翻方便多了。

必须第一个装。没有例外。

安装：

npx skills add vercel-labs/skills --skill find-skills

四、我的推荐组合：不同人群怎么选？

Top 10 全装上？没必要。根据你的角色，我帮你搭配了几套组合：

组合一：前端开发者（最实用）

find-skills + frontend-design + vercel-react-best-practices + web-design-guidelines

从"设计美学"到"性能优化"到"规范审查"，前端工作流全覆盖。这是我目前日常在用的组合，强烈推荐。

组合二：全栈/架构师

find-skills + grill-me + improve-codebase-architecture + agent-browser

先拷问方案、再审查架构、需要时让 AI 自己开浏览器跑验证。

组合三：React/Next.js 深度用户

find-skills + vercel-react-best-practices + frontend-design + web-design-guidelines + tdd

Vercel 全家桶 + Anthropic 设计美学 + Matt Pocock 的 TDD 纪律。

组合四：内容创作者

find-skills + remotion-best-practices

用 React 写视频，参数化批量生成。打开了新世界的大门。

五、Top 10 之外，还值得关注这些

排行榜上还有一些没进 Top 10 但很有特色的 Skill，挑几个亮眼的：

特别提一下 skill-creator（Anthropic 官方）：如果你想把团队的工作流、编码规范封装成自己的 Skill，它是起点。我之前用这款 Skill 把团队的接口测试规范封装成了一套完整的 Skill 体系，效果非常好。

六、说点大实话

聊完了 10 款 Skill，最后说几句掏心窝的。

第一，Top 10 不代表适合所有人。

比如 microsoft-foundry 排第 7，但如果你不用 Azure，它对你价值为零。remotion-best-practices 排第 8，但如果你不做视频编程，也用不上。

排名反映的是"全网热度"，不是"你的热度"。选 Skill 要看自己的工作场景。

第二，Skill 生态正在爆发。

整个生态的 Skill 数量在快速增长，覆盖的领域从代码到设计、从测试到视频、从营销到 SEO……

这意味着什么？你的 AI 助手正从一个"什么都会一点但什么都不精的通才"，变成一个"装备了专业技能包的专家"。

第三，最佳实践：把选择权交给 AI。

我最常用的方式不是逐个研究该装哪个——而是直接对 Claude Code 说：

"这是 skills.sh 的网址，我是一名前端开发者，帮我看看排行榜上有哪些适合我的 Skill，装上最合适的几个"

它会自己去查、自己对比、自己选择、自己安装。这才是 Skill 生态正确的打开方式。

写在最后

从 find-skills 的 240 万热度可以看出，Agent Skills 已经不是一个小众玩具了。

Vercel、Anthropic、Microsoft、Matt Pocock、Remotion……这些顶级公司和开发者都在往这个生态里投入。Skill 这个概念——把专业知识封装成 AI 可以调用的指令包——正在成为 AI 编程时代的"新的开源单元"。

如果你还没开始用 Skill，现在就是最好的时机。

先装 find-skills，然后挑 2-3 个适合你工作场景的，试一周。 我赌你会回来装更多。

skills.sh 网址：https://skills.sh GitHub：https://github.com/vercel-labs/skills

图片

我是 狂师，热衷于分享 AI 与软件测试开发技术实战与干货。