导读 ：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 有个整体感知，后面逐个拆解 (排行榜数据会定时刷新， 你当前看到的，不一定和下面完全一样)。
| 排名 | Skill 名称 | 作者 | 热度 | 一句话评价 |
|---|---|---|---|---|
| 🥇 #1 | find-skills | vercel-labs | 2.4M | 生态入口，不装这个其他都白搭 |
| 🥈 #2 | frontend-design | anthropics | 628K | Anthropic 官方出品，专治"AI 味"页面 |
| 🥉 #3 | vercel-react-best-practices | vercel-labs | 527K | 70 条 React/Next.js 性能规则，硬核 |
| #4 | agent-browser | vercel-labs | 514K | 让 AI 自己开浏览器干活 |
| #5 | grill-me | mattpocock | 459K | 灵魂拷问型选手，专治方案漏洞 |
| #6 | web-design-guidelines | vercel-labs | 440K | Vercel 版 UI 设计规范审查器 |
| #7 | microsoft-foundry | microsoft | 432K | 微软 Azure AI Foundry 专用 |
| #8 | remotion-best-practices | remotion-dev | 416K | 用 React 写视频，真香 |
| #9 | improve-codebase-architecture | mattpocock | 408K | 架构体检师，帮你找代码里的"技术债" |
| #10 | tdd | mattpocock | 390K | AI 辅助 TDD，测试先行的终极形态 |
一个有意思的现象 ：Top 10 里 Vercel 占了 4 席、Matt Pocock（TypeScript 顶级大神）一个人占了 3 席、Anthropic 和 Microsoft 各 1 席。Vercel 系和 Matt Pocock 系基本瓜分了半壁江山。
二、安装方式
每个 Skill 的安装命令不一样，但底层逻辑一样------通过 skills CLI 一行搞定。
先装 CLI 工具本身：
bash
npx skills add vercel-labs/skills --skill find-skills通用安装格式：
bash
npx skills add <owner>/<repo> --skill <skill-name>Cursor 用户注意 ：
最新版Cursor 默认读取的全局skills目录是 ～/.cursor/skills-cursor，而skills add安装命令默认为cursor添加的目录是/.cursor/skills，因此 装完后需要建一个软链：
bash
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 的团队、写核心业务逻辑的开发者、对代码质量有强迫症的人。
安装：
bash
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 会：
- 像一个新来的工程师一样探索你的代码库
- 发现架构摩擦点（哪些模块接口太复杂、哪些职责不清、哪些耦合过重）
- 提出具体的重构方案，格式化为 GitHub Issue RFC
实测体验：
我把它指向了一个维护了两年多的中间层项目。它花了大概 5 分钟读代码，然后给我列了 7 个架构问题------其中 3 个是"嗯确实是这样但我一直假装没看见"的那种。
输出质量最让我满意的是：它不是泛泛而谈"你的代码耦合度高"，而是精确到具体文件、具体函数、具体依赖方向。每条建议都有"为什么要改"和"怎么改"。
适合谁：接手老项目的开发者、技术负责人、准备做架构重构的团队。
安装：
bash
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 用户、对"代码生成视频"感兴趣的开发者、需要批量生成视频内容的团队。
安装：
bash
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 部署的架构师。
安装：
bash
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 审查工具喜欢写长篇大论的分析报告，但它只给你 文件:行号 + 问题，你可以直接在编辑器里逐条修。
适合谁：前端开发者、注重设计规范的团队、需要做可访问性审查的项目。
安装：
bash
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 多个问题，其中有几个直接让我重新思考了整个设计------"你的推送服务和消息存储是同步的还是异步的？如果是异步，消息最多延迟多久？用户能感知到这个延迟吗？"
它不帮你做决定，但它会让你发现自己方案里的漏洞。每次被"拷问"完，我的方案都会变好一截。
适合谁：技术负责人、架构师、需要在编码前验证方案的开发者、想提升系统设计能力的人。
安装：
bash
npx skills add mattpocock/skills --skill grill-me#4 agent-browser --- AI 浏览器自动化 ｜ vercel-labs/agent-browser
🔥 热度：514K ｜ ⬇️ 安装量：276K ｜ 👤 作者：Vercel 官方
一句话：让 AI 自己打开浏览器、操作网页、跨命令保持会话连续性。
它干什么？
这是 Vercel Labs 出品的浏览器自动化 Skill。和普通的浏览器自动化工具不同的是，它支持三种浏览器模式：
| 模式 | 说明 | 适用场景 |
|---|---|---|
| Headless Chromium | 无头浏览器，速度快 | 自动化测试、数据抓取 |
| Real Chrome | 真实 Chrome，支持用户 Profile | 需要登录态的操作 |
| Cloud Remote | 云端远程浏览器 | 高并发、CI/CD 场景 |
内置 15+ 命令类别 ，支持 Python 集成。最关键的是------会话连续性。普通的浏览器自动化每次调用都是全新的会话，但 agent-browser 可以跨多条 AI 指令保持浏览器状态（Cookie、LocalStorage、打开的标签页）。
实测体验：
我让它做了三件事：打开 GitHub、登录我的账号、创建一个 Issue。三条指令分开发送，它每次都接续上一次的浏览器状态，整个过程很丝滑。
然后我又让它去一个电商网站抓取了商品列表------过去这种操作要么自己写 Puppeteer 脚本，要么手动。现在一句话就搞定了。
但要注意：如果涉及登录密码等敏感操作，请谨慎使用 Cloud Remote 模式。Headless 和 Real Chrome 模式数据在本地，更安全。
适合谁：需要浏览器自动化的开发者、做爬虫/自动化测试的工程师、想让 AI 帮你操作网页的所有人。
安装：
bash
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 个类别 中，按影响级别从高到低排列：
| 优先级 | 类别 | 影响等级 | 规则数量 |
|---|---|---|---|
| 1 | 消除请求瀑布流 | 致命 | 6 条 |
| 2 | 包体积优化 | 致命 | 6 条 |
| 3 | 服务端性能 | 高 | 10 条 |
| 4 | 客户端数据获取 | 中高 | 4 条 |
| 5 | 重渲染优化 | 中 | 15 条 |
| 6 | 渲染性能 | 中 | 11 条 |
| 7 | JavaScript 性能 | 低中 | 14 条 |
| 8 | 高级模式 | 低 | 5 条 |
每条规则都有错误示例和正确示例，并且有唯一前缀标识（如 async-parallel、bundle-barrel-imports），方便在自动化工具中引用。
实测体验：
我拿一个现有的 Next.js 项目让它审查。它直接挑出了两个"致命"级别的问题------一个是串行 await 改成 Promise.all 就能解决的请求瀑布流，另一个是 barrel imports 导致包体积虚胖。
改完之后，首屏加载快了 30% 左右。
和 #6 web-design-guidelines 的区别 ：那个审"设计规范"（间距、颜色、可访问性），这个审"性能规范"（瀑布流、包体积、重渲染）。两个可以一起装，互不冲突。
适合谁：React/Next.js 开发者、关注性能的前端团队、做代码审查的 Tech Lead。
安装：
bash
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 写前端界面的开发者、独立开发者、前端工程师、不想花设计费但又想要好看页面的创业者。
安装：
bash
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 的安装、搜索、管理，都通过它来完成。
核心命令：
| 命令 | 功能 |
|---|---|
npx skills add <owner/repo> |
安装 Skill |
npx skills use <owner/repo> |
直接使用 Skill（不需要永久安装） |
npx skills list |
列出已安装的 Skill |
npx skills find <keyword> |
搜索 Skill |
npx skills remove <name> |
卸载 Skill |
npx skills update |
更新已安装的 Skill |
npx skills init |
创建新的 Skill 项目骨架 |
实测体验：
这个没什么好"测"的------它是整个生态的入口。就像你用 Homebrew 得先装 brew，用 npm 得先有 npm 一样。
但我想说的是它的 find 命令 确实好用。你说 npx skills find "react"，它会把全网所有和 React 相关的 Skill 列出来，带热度排名和简介。比自己去网站上翻方便多了。
必须第一个装。没有例外。
安装：
bash
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 + tddVercel 全家桶 + Anthropic 设计美学 + Matt Pocock 的 TDD 纪律。
组合四：内容创作者
find-skills + remotion-best-practices用 React 写视频，参数化批量生成。打开了新世界的大门。
五、Top 10 之外，还值得关注这些
排行榜上还有一些没进 Top 10 但很有特色的 Skill，挑几个亮眼的：
| Skill | 作者 | 热度 | 亮点 |
|---|---|---|---|
| grill-with-docs | mattpocock | 380K | grill-me 的"文档版"------拷问方案的同时自动更新 CONTEXT.md 和 ADR |
| video-edit | agentspace-so | 356K | 智能路由 3 个 AI 视频编辑模型（Wan / Kling / Lucy），按意图自动选 |
| skill-creator | anthropics | 302K | Anthropic 官方，帮你创建/优化/评测自定义 Skill |
| ui-ux-pro-max | nextlevelbuilder | 251K | 67 种风格 + 161 套配色 + 57 字体组合，设计系统自动生成 |
| seo-audit | coreyhaines31 | 154K | SEO 审查，检查 meta、结构化数据、Core Web Vitals |
特别提一下 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 个适合你工作场景的，试一周。 我赌你会回来装更多。