Skills
Skills 是 Claude Code 的模块化能力扩展,通过加载专门的指令、脚本和资源来提升特定任务的处理能力。
查找与安装
skills.sh 是开放的 Agent Skills 搜索与注册表网站,可用于查找适合 Claude Code、Codex、Cursor、Cline 等 AI 编码代理的 Skills。
无需全局安装 CLI,通过 npx 可直接安装:
# 安装 skill 包到当前项目(默认)
npx skills add <package> -a claude-code
# 全局安装(对所有项目生效)
npx skills add <package> -g -a claude-code
# 安装特定 skill
npx skills add <package> --skill <skill-name> -a claude-code安装后 Claude Code 会自动发现 .claude/skills/ 目录中的 skill,无需手动调用。
find-skills
find-skills 是 Skills 发现辅助技能,用于帮助 AI 根据用户需求搜索、筛选并推荐可安装的 Agent Skills。
适合这些场景:
- 不确定某个任务有没有现成 Skill
- 想搜索测试、部署、设计、文档、代码审查等特定能力
- 想让 Claude Code 推荐 Skill 并给出安装命令
安装方式
npx skills add vercel-labs/skills --skill find-skills -a claude-code使用示例
帮我找一个 React 性能优化相关的 skill
有没有适合 PR review 的 skill?
找一个生成 changelog 的 skill公共
通用型 Skills,不限前后端,适用于所有开发场景。
官方 Skills
Anthropic 官方提供的 Skills 集合,涵盖文档处理、设计开发等多个领域。
仓库地址: anthropics/skills
安装方式
# 添加 marketplace
/plugin marketplace add anthropics/skills
# 安装插件
/plugin install document-skills@anthropic-agent-skills
/plugin install example-skills@anthropic-agent-skillsSkills 列表
文档处理类
| Skill | 功能 |
|---|---|
pdf | PDF 文档操作 |
docx | Word 文档创建/编辑 |
pptx | PowerPoint 创建/编辑 |
xlsx | Excel 表格处理 |
设计开发类
| Skill | 功能 |
|---|---|
frontend-design | 前端设计 |
canvas-design | 画布设计 |
algorithmic-art | 算法艺术生成 |
brand-guidelines | 品牌指南 |
theme-factory | 主题工厂 |
开发工具类
| Skill | 功能 |
|---|---|
mcp-builder | MCP 服务构建 |
skill-creator | Skill 创建器 |
web-artifacts-builder | Web 构件构建 |
webapp-testing | Web 应用测试 |
企业协作类
| Skill | 功能 |
|---|---|
doc-coauthoring | 文档协作 |
internal-comms | 内部沟通 |
slack-gif-creator | Slack GIF 创建 |
许可说明
- 示例 Skills:Apache 2.0(开源)
- 文档 Skills:Source-available(仅供参考)
前端
前端 UI 框架、设计系统相关的 Skills。
Vercel Agent Skills
Vercel 官方 Agent Skills 集合,包含经过验证的高质量 skill,主要面向 React / Next.js、Web 设计规范和 Vercel 部署场景。
仓库地址: vercel-labs/agent-skills
安装方式
# 安装所有 skill
npx skills add vercel-labs/agent-skills -a claude-code
# 安装单个 skill
npx skills add vercel-labs/agent-skills --skill react-best-practices -a claude-code
npx skills add vercel-labs/agent-skills --skill web-design-guidelines -a claude-codeSkills 列表
| Skill | 说明 |
|---|---|
vercel-react-best-practices | React / Next.js 性能优化指南,57 条规则覆盖 8 个类别,涵盖组件模式、数据获取、渲染优化等 |
web-design-guidelines | Web 界面设计规范,100+ 条规则覆盖无障碍、性能、UX 等 11 个类别 |
vercel-deploy-claimable | 一键部署到 Vercel,自动检测 40+ 框架,返回预览 URL,支持后续认领转移所有权 |
自动激活
安装后无需手动调用。当 Claude Code 检测到相关任务(如编写 React 组件、优化 Next.js 页面)时,会自动读取对应的 SKILL.md 并应用规则。
Vue Skills
Vue 3 开发专用的 Agent Skills,覆盖 Composition API、Options API、Vue Router、Pinia、测试、JSX、调试和可复用 composable 等场景。
仓库地址: vuejs-ai/skills
安装方式
npx skills add vuejs-ai/skills -a claude-codeSkills 列表
| Skill | 适用场景 |
|---|---|
vue-best-practices | Vue 3 + Composition API + TypeScript 最佳实践、SSR、性能优化 |
vue-options-api-best-practices | Options API、this 上下文、生命周期、TypeScript 使用 |
vue-router-best-practices | Vue Router 4、导航守卫、路由参数、路由组件生命周期 |
vue-pinia-best-practices | Pinia 状态管理、store setup、响应式状态模式 |
vue-testing-best-practices | Vitest、Vue Test Utils、Playwright 组件与 E2E 测试 |
vue-jsx-best-practices | Vue JSX 与 React JSX 的语法差异 |
vue-debug-guides | Vue 3 运行时错误、警告、异步错误、hydration 问题排查 |
create-adaptable-composable | 创建支持 MaybeRef / MaybeRefOrGetter 的可复用 composable |
使用建议
为获得更稳定的触发效果,可以在提示词前加上 use vue skill。
UI UX Pro Max
专业的 UI/UX 设计智能 Skill,提供完整的设计系统生成能力。
仓库地址: nextlevelbuilder/ui-ux-pro-max-skill
核心能力
- 67 种 UI 风格:Glassmorphism、Claymorphism、Minimalism、Brutalism、Neumorphism、Bento Grid 等
- 96 套配色方案:覆盖 SaaS、电商、医疗、金融、美妆等行业
- 57 组字体搭配:精选 Google Fonts 组合
- 25 种图表类型:仪表盘和数据分析推荐
- 99 条 UX 准则:最佳实践和无障碍规则
- 100 条行业推理规则:科技、金融、医疗、电商、服务、创意、新兴科技
支持的技术栈
| 类型 | 框架 |
|---|---|
| Web | React, Next.js, Vue, Nuxt.js, Svelte, Astro, HTML + Tailwind |
| UI 库 | shadcn/ui, Nuxt UI |
| 移动端 | SwiftUI, Jetpack Compose, React Native, Flutter |
安装方式
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill使用方式
自动激活模式(Claude Code, Cursor, Windsurf 等):
Build a landing page for my SaaS productSlash Command 模式(Kiro, GitHub Copilot, Roo Code):
/ui-ux-pro-max Build a dashboard for analytics设计系统持久化
生成分层设计系统:
design-system/
├── MASTER.md # 全局设计规范
└── pages/
└── [page-name].md # 页面级覆盖Wot UI Skills
针对 wot-ui 组件库(基于 Vue 3 + uni-app 的跨端 UI 库)的 AI 开发助手 Skills,帮助 AI Agent 准确高效地完成 wot-ui 相关任务。
文档地址: wot-ui.cn/guide/skills.html
Skills 列表
| Skill | 适用场景 |
|---|---|
wot-ui-v2 | 组件选型、API 查询、生成 Vue3 + uni-app 页面代码、排查 Toast/Dialog 挂载等常见坑位 |
wot-ui-cli | 查询 @wot-ui/cli 命令用法、配置 MCP Server、离线数据提取 |
wot-ui-unocss-preset-guide | 安装配置 @wot-ui/unocss-preset、类名不生效问题排查 |
create-wot-ui-theme | 生成 wot-ui 单文件主题 SCSS,定制品牌主题 |
安装方式
pnpx skills add wot-ui/open-wot
# or
npx skills add wot-ui/open-wot自动激活
安装后 AI Agent(Claude Code、Trae、Cursor、Cline 等)会根据任务需求自动加载对应技能。
Ant Design X Skills
@ant-design/x-skill 是专为 Ant Design X(React AI 对话组件库)打造的智能技能库,覆盖对话组件、数据请求、状态管理等场景。
文档地址: x.ant.design/x-skills/introduce-cn
适用场景
- 新项目启动 - 快速搭建 Ant Design X 项目框架
- 功能开发 - 获取组件使用最佳实践和代码示例
- 问题排查 - 智能诊断和解决常见开发问题
- 性能优化 - 获取性能调优的专业建议
安装方式
# 快速安装完整技能包
/plugin install x-sdk-skills@x-agent-skills手动安装
需要定制化配置时,将技能文件复制到对应目录:
| 范围 | 路径 |
|---|---|
| 全局(所有项目可用) | ~/.claude/skills |
| 项目级(仅当前项目) | <项目根>/.claude/skills |
后端
后端开发、AI Agent 框架相关的 Skills。
LangChain Skills
LangChain 官方 Skills,为 AI 编码代理提供 LangChain 生态系统(LangChain、LangGraph、Deep Agents)的专业知识。在评估集上将 Claude Code 的相关任务通过率从 29% 提升至 95%。
文档地址: langchain.com/blog/langchain-skills
仓库地址: langchain-ai/langchain-skills
Skills 列表
| 类别 | 覆盖内容 |
|---|---|
| LangChain | create_agent()、middleware、tool patterns,经典 tool calling agent 循环 |
| LangGraph | LangGraph 原语、Human In the Loop、durable execution |
| Deep Agents | 开源 Deep Agents 包、预构建 middleware、FileSystem |
安装方式
# 当前项目
npx skills add langchain-ai/langchain-skills --skill '*' --yes
# 全局(所有项目)
npx skills add langchain-ai/langchain-skills --skill '*' --yes --global
# 指定代理
npx skills add langchain-ai/langchain-skills --agent claude-code --skill '*' --yes --global