前言
"我每次用 Claude Code 写前端，都要重复告诉它用 Tailwind、遵循 React 最佳实践、注意无障碍……能不能让它一次学会，以后自动就懂？"
这是很多 AI 编程用户的共同痛点——每开一个新对话，AI 就像失忆了一样，你得从头教起。
而 Skills（技能）的出现，彻底解决了这个问题。装上一个 Skill，AI Agent 就能获得一项新技能，下次遇到相关任务自动调用，再也不用你反复交代。
今天这篇文章，带你搞懂 Skills 是什么，重点逛一逛 Vercel 的 Skills 聚合站 skills.sh，再把目前主流的仓库和平台全部盘一遍，帮你一站找齐想要的技能包。
什么是 Skills
简单来说，Skills 就是 AI Agent 的"技能包"。
你可以把它理解成手机里的 App：手机出厂时只有基础功能，但装上微信就能聊天，装上高德就能导航。Skills 也一样——Claude Code、Cursor、Copilot 这些 AI Agent 本身具备通用能力，但装上 Skills 之后，就能获得特定领域的专业知识和工作流。
技术上看，每个 Skill 其实就是一个 SKILL.md 文件，里面用 Markdown 写着结构化的指令、最佳实践和脚本。AI Agent 会在需要时自动加载对应的 Skill，按照里面的指引来完成任务。
这个设计有三个核心原则：
- 渐进式披露：只在需要时加载，不浪费上下文窗口
- 可组合性：多个 Skills 可以叠加使用，互不冲突
- 跨 Agent 兼容：同一个 Skill 可以在 Claude Code、Cursor、Codex、Windsurf 等 40+ 种 Agent 中使用
Vercel Skills 聚合站：skills.sh
Vercel 推出的 skills.sh 是目前最主流的 Skills 聚合平台，相当于 Skills 界的 npm。
打开 skills.sh 你会看到一个排行榜页面，所有 Skill 按安装量排名，支持 All Time（总榜）、Trending 24h（日榜）、Hot（热门）三个维度切换。
截至目前，skills.sh 已收录数百个 Skills，累计安装量突破 88000+，覆盖前端开发、测试、设计、DevOps、营销等多个领域。
目前安装量 Top 5 的 Skills：
| 排名 | Skill 名称 | 来源 | 安装量 |
|---|---|---|---|
| 1 | find-skills | vercel-labs/skills | 561K |
| 2 | vercel-react-best-practices | vercel-labs/agent-skills | 212K |
| 3 | web-design-guidelines | vercel-labs/agent-skills | 167K |
| 4 | frontend-design | anthropics/skills | 159K |
| 5 | remotion-best-practices | remotion-dev/skills | 147K |
点击任意一个 Skill 进入详情页，可以看到描述、使用说明和安装命令。
支持 Skills 的 AI Agent 也已经非常丰富：Claude Code、Cursor、GitHub Copilot、Codex、Windsurf、Cline、AMP、Gemini CLI、Trae、Roo Code、OpenCode 等 40+ 种主流工具全部支持。
不止 skills.sh——主流仓库和平台全盘点
skills.sh 虽好，但它只是冰山一角。Skills 生态已经相当繁荣，我按类型帮你整理好了。
一、聚合平台：像逛应用商店一样找 Skill
| 平台 | 地址 | 特点 |
|---|---|---|
| skills.sh | skills.sh/ | Vercel 官方聚合站，24h 热度排名，支持一键安装 |
| SkillsMP | skillsmp.com/ | 聚合 GitHub 50 万+ 技能，支持中文界面和分类浏览 |
| agentskills.io | agentskills.io/ | Agent Skills 官方标准站点，查阅规范和文档 |
skills.sh 适合快速浏览热门 Skill，SkillsMP 的优势在于收录量大且支持中文搜索，两个配合使用效果最好。
二、官方仓库：质量最高，优先安装
| 仓库 | 地址 | 内容 |
|---|---|---|
| anthropics/skills | github.com/anthropics/… | Anthropic 官方仓库，包含 PDF/Word/PPT/Excel 文档处理、前端设计、MCP 构建、算法艺术等十几个高质量 Skill |
| vercel-labs/agent-skills | github.com/vercel-labs… | Vercel 官方技能集，React/Next.js 最佳实践、Web 设计规范、React Native 等 |
| vercel-labs/skills | github.com/vercel-labs… | Skills CLI 工具仓库，同时包含 find-skills 等核心 Skill |
| microsoft/github-copilot-for-azure | github.com/microsoft/g… | 微软 Azure 系列，18+ 个云服务相关技能，累计安装量 250 万+ |
| github/awesome-copilot | github.com/github/awes… | GitHub 官方 Copilot Skills，覆盖 Git 提交、PR 审查、Dockerfile、Playwright 测试等 |
官方仓库的 Skill 经过团队打磨，质量有保障，建议新手从这里开始装。
三、社区精选合集：一站发现好 Skill
| 仓库 | 地址 | 特点 |
|---|---|---|
| VoltAgent/awesome-agent-skills | github.com/VoltAgent/a… | 500+ 精选 Skill，来自 Anthropic、Google Labs、Vercel、Stripe、Cloudflare 等官方团队，质量把关严格 |
| heilcheng/awesome-agent-skills | github.com/heilcheng/a… | 精选技能 + 工具 + 教程的 Awesome 合集，覆盖多平台 |
| ComposioHQ/awesome-claude-skills | github.com/ComposioHQ/… | 社区维护的 Claude Skills 导航，分类清晰 |
| itgoyo/awesome-agent-skills | github.com/itgoyo/awes… | 中文社区维护，聚合了全网热门 Skills 站点和仓库 |
四、领域专项仓库：垂直领域深度覆盖
| 仓库 | 领域 | 内容 |
|---|---|---|
| obra/superpowers | 开发工作流 | brainstorming、writing-plans、systematic-debugging、TDD 等开发全流程 Skill |
| coreyhaines31/marketingskills | 营销 | SEO 审计、文案写作、内容策略、广告投放、定价策略等 20+ 个营销 Skill |
| expo/skills | React Native | Expo 开发、原生 UI 构建、数据获取、CI/CD 等移动端 Skill |
| jimliu/baoyu-skills | 中文内容创作 | 微信公众号发布、小红书封面、文章配图、Markdown 转 HTML 等 |
| vercel-labs/agent-browser | 浏览器自动化 | 注意：这不是纯 Skill 仓库，而是一个浏览器自动化工具，内置了 agent-browser、dogfood（自动化测试）、slack（免 Token 操作 Slack）等 5 个配套 Skill。需要先安装工具本体，再装 Skill 教 AI 怎么调用 |
| supabase/agent-skills | 数据库 | Supabase Postgres 最佳实践 |
小提示：如果你不确定该去哪个仓库找，直接安装
find-skills这个"元技能"，在 Agent 内用自然语言搜索就行，不用自己一个个翻。
怎么装 Skills——三种方式任你选
很多文章一上来就让你敲 npx skills add ... 一长串命令，看着就头疼。其实这只是安装方式之一。不管用哪种方式装，最终效果完全一样——都是把 SKILL.md 文件放到对应目录，装完之后 Skill 会被动触发、自动工作，你不需要记任何命令。
方式一：Claude Code /plugin 命令（推荐 Claude Code 用户）
如果你日常主力是 Claude Code，这是最省心的方式，在 Claude Code 里直接操作：
# 注册官方 Skill 市场
/plugin marketplace add anthropics/skills
# 然后通过交互式菜单浏览和安装
# 选择 Browse and install plugins → 选择 Skill → Install now
# 或者直接指定安装
/plugin install document-skills@anthropic-agent-skills
/plugin install example-skills@anthropic-agent-skills
装完即用，不需要额外操作。
方式二：手动复制 SKILL.md（最通用）
从 GitHub 仓库下载 SKILL.md 文件，放到对应目录即可：
| Agent | 项目级路径 | 全局路径 |
|---|---|---|
| Claude Code | .claude/skills/ | ~/.claude/skills/ |
| Codex | .agents/skills/ | ~/.codex/skills/ |
| Cursor | .agents/skills/ | ~/.cursor/skills/ |
这种方式最灵活，你可以在 CC Switch 等工具中可视化管理这些文件。
方式三：npx skills CLI（多 Agent 用户的批量安装器）
如果你同时使用 Claude Code、Cursor、Codex 等多个 Agent，Vercel 做了一个跨 Agent 通用安装器，可以一次装到所有 Agent：
npx skills add https://github.com/anthropics/skills --skill frontend-design
运行后交互式选择安装到哪些 Agent、全局还是项目级、用符号链接还是复制。只在安装时用一次，装完就不用管了。
三种方式怎么选
| 你的情况 | 推荐方式 |
|---|---|
| 只用 Claude Code | /plugin 命令，最省心 |
| 用 CC Switch 管理 | 手动复制，可视化管理 |
| 同时用 3 个以上 Agent | npx skills CLI，一次装到位 |
怎么查看已安装的 Skills
想知道自己装了哪些 Skill，有三种方式：
方式一：npx skills list
# 查看所有已安装的（项目级 + 全局）
npx skills list
# 只看全局安装的
npx skills ls -g
# 只看某个 Agent 的
npx skills ls -a claude-code
注意：这个命令只能识别通过
npx skills add安装的 Skill。手动复制或/plugin安装的不会显示。
方式二：直接看目录（最靠谱）
不管用什么方式装的，在目录里都能看到：
# Claude Code 项目级
ls .claude/skills/
# Claude Code 全局
ls ~/.claude/skills/
# Codex 全局
ls ~/.codex/skills/
# Cursor 全局
ls ~/.cursor/skills/
方式三：让 AI 帮你查
直接对 Claude Code 说"列出我当前安装了哪些 Skills"，它会扫描目录告诉你。
怎么卸载已安装的 Skills
npx skills add 会自动覆盖更新已安装的版本，一般不需要手动卸载。如需卸载：
npx skills remove find-skills
手动复制或 /plugin 安装的 Skill，直接删除对应的 SKILL.md 文件即可。
Skills 更新管理
随着安装的 Skills 越来越多，管理和更新也变得重要：
# 检查哪些 Skills 有更新可用
npx skills check
# 更新所有已安装的 Skills（慎用）
npx skills update
注意：
npx skills update会批量更新所有 Skills，使用前提是你信任这些 Skills 的来源。建议先用npx skills check看看有哪些更新，再决定是否更新。
装完之后呢？
什么都不用做。 Skill 是被动触发的——你正常对 AI 提需求，它会自动判断是否需要调用已安装的 Skill。
比如装了 vercel-react-best-practices 之后，你对 Claude Code 说"写一个商品列表组件"，它会自动应用 Vercel 工程团队总结的性能优化策略——代码分割、懒加载、合理使用 Server Components 等，全都不用你额外交代。
6 个最值得安装的 Skills
1. find-skills —— Skills 搜索助手
装上它，你的 Agent 就能根据任务需求自动搜索并推荐合适的 Skills。相当于给 AI 装了个"应用商店搜索引擎"。不需要记任何命令，直接用自然语言就行：
"帮我找一下 React 性能优化相关的 Skills"
"有没有 SEO 标签优化的 Skill"
"搜索 YouTube 视频下载相关的 Skills"
find-skills 会自动搜索匹配的 Skill 并给出安装建议。用中文提问时，它会同时搜索中英文关键词，覆盖更广。
npx skills add https://github.com/vercel-labs/skills --skill find-skills -g
2. vercel-react-best-practices —— React/Next.js 最佳实践
来自 Vercel 工程团队，覆盖性能优化、数据获取、包体积控制等实战规则集。
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices -g
3. frontend-design —— 前端设计增强
让 AI 生成的前端界面告别"AI 味"，产出更有设计感的 UI 代码。
npx skills add https://github.com/anthropics/skills --skill frontend-design -g
4. agent-browser —— 浏览器自动化
这个比较特殊——agent-browser 本身是一个浏览器自动化工具（npm 包），它附带的 Skill 是教 AI 怎么调用这个工具。装好工具和 Skill 之后，你只需要用自然语言提需求：
"打开 example.com 并截取全页截图"
"登录后台，系统性地测试一下有没有 bug"
AI 会根据 Skill 里的指引，自动调用 agent-browser 的命令完成操作。
npx skills add https://github.com/vercel-labs/agent-browser --skill agent-browser -g
5. skill-creator —— Skill 制作助手
帮你快速创建自己的 Skill 模板，把常用工作流封装成可复用模块。来自 Anthropic 官方仓库。
npx skills add https://github.com/anthropics/skills --skill skill-creator -g
6. seo-audit —— SEO 审计
对网站做全面的搜索引擎优化检查，输出可执行的优化建议。
npx skills add https://github.com/coreyhaines31/marketingskills --skill seo-audit -g
对网站做全面的搜索引擎优化检查，输出可执行的优化建议。
进阶玩法：自己造 Skill
如果现有 Skills 满足不了你的需求，完全可以自己造一个。
在 Claude Code 里直接让 AI 帮你生成（如果装了 skill-creator 的话），或者手动创建：
# 用 npx 初始化模板（可选）
npx skills init my-custom-skill
# 或者直接手动创建 SKILL.md 文件
一个标准的 Skill 目录结构大致如下：
my-custom-skill/
├── SKILL.md # 核心文件，包含触发条件、指令和工作流
├── scripts/ # 可选的辅助脚本
└── resources/ # 可选的参考资料
SKILL.md 的关键组成：
- YAML Frontmatter：定义 Skill 的
name和description（必填项） - 指令正文：用 Markdown 描述 AI 应该遵循的规则和步骤
- 示例：提供输入输出样例，帮助 AI 理解预期行为
写好之后推到 GitHub，别人就可以安装你的 Skill——无论是通过 /plugin、手动复制还是 npx skills add，都能装。如果质量够好，还有机会被 skills.sh 收录到排行榜。
三点使用建议
1. find-skills + skill-creator 是最小必备组合
正如一位开发者说的："如果只保留两个 Skills，一个 find-skills，一个 skill-creator 就足够了。" 前者帮你找，后者帮你造，形成完整闭环。
find-skills 虽然强大，但它并不万能——只能找到已经开源的 Skills 项目，而且找到的 Skills 不一定能完美解决你的当前任务。但这没关系，你可以基于现有方案进行改造，这比从 0 到 1 开发一个全新 Skill 快得多。
2. 搜索关键词要尽可能精确
不管是用 find-skills 还是在 skills.sh 上搜索，能用 "SEO meta" 就不要只搜 "SEO"，能用 "React lazy loading" 就不要只搜 "React"。关键词越精准，匹配结果越靠谱。
3. 优先安装官方仓库的 Skill
社区 Skill 质量参差不齐，建议优先安装 anthropics/skills、vercel-labs/agent-skills 等官方仓库的内容。安装第三方 Skill 前，先看看 GitHub 上的 Star 数和更新频率。
结语
Vercel 的 skills.sh 让发现和安装 Skill 变得像逛应用商店一样简单，配合本文梳理的官方仓库、社区合集和领域专项资源，你应该能快速找到适合自己工作流的技能包。
赶紧挑几个装上试试吧。
欢迎关注公众号 FishTech Notes，一块交流使用心得！
