Skip to content

Skills

Skills 是 Claude Code 的模块化能力扩展,通过加载专门的指令、脚本和资源来提升特定任务的处理能力。

查找与安装

skills.sh 是开放的 Agent Skills 搜索与注册表网站,可用于查找适合 Claude Code、Codex、Cursor、Cline 等 AI 编码代理的 Skills。

无需全局安装 CLI,通过 npx 可直接安装:

bash
# 安装 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 并给出安装命令

安装方式

bash
npx skills add vercel-labs/skills --skill find-skills -a claude-code

使用示例

text
帮我找一个 React 性能优化相关的 skill
有没有适合 PR review 的 skill?
找一个生成 changelog 的 skill

公共

通用型 Skills,不限前后端,适用于所有开发场景。

官方 Skills

Anthropic 官方提供的 Skills 集合,涵盖文档处理、设计开发等多个领域。

仓库地址: anthropics/skills

安装方式

bash
# 添加 marketplace
/plugin marketplace add anthropics/skills

# 安装插件
/plugin install document-skills@anthropic-agent-skills
/plugin install example-skills@anthropic-agent-skills

Skills 列表

文档处理类
Skill功能
pdfPDF 文档操作
docxWord 文档创建/编辑
pptxPowerPoint 创建/编辑
xlsxExcel 表格处理
设计开发类
Skill功能
frontend-design前端设计
canvas-design画布设计
algorithmic-art算法艺术生成
brand-guidelines品牌指南
theme-factory主题工厂
开发工具类
Skill功能
mcp-builderMCP 服务构建
skill-creatorSkill 创建器
web-artifacts-builderWeb 构件构建
webapp-testingWeb 应用测试
企业协作类
Skill功能
doc-coauthoring文档协作
internal-comms内部沟通
slack-gif-creatorSlack 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

安装方式

bash
# 安装所有 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-code

Skills 列表

Skill说明
vercel-react-best-practicesReact / Next.js 性能优化指南,57 条规则覆盖 8 个类别,涵盖组件模式、数据获取、渲染优化等
web-design-guidelinesWeb 界面设计规范,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

安装方式

bash
npx skills add vuejs-ai/skills -a claude-code

Skills 列表

Skill适用场景
vue-best-practicesVue 3 + Composition API + TypeScript 最佳实践、SSR、性能优化
vue-options-api-best-practicesOptions API、this 上下文、生命周期、TypeScript 使用
vue-router-best-practicesVue Router 4、导航守卫、路由参数、路由组件生命周期
vue-pinia-best-practicesPinia 状态管理、store setup、响应式状态模式
vue-testing-best-practicesVitest、Vue Test Utils、Playwright 组件与 E2E 测试
vue-jsx-best-practicesVue JSX 与 React JSX 的语法差异
vue-debug-guidesVue 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 条行业推理规则:科技、金融、医疗、电商、服务、创意、新兴科技

支持的技术栈

类型框架
WebReact, Next.js, Vue, Nuxt.js, Svelte, Astro, HTML + Tailwind
UI 库shadcn/ui, Nuxt UI
移动端SwiftUI, Jetpack Compose, React Native, Flutter

安装方式

bash
/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 product

Slash 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,定制品牌主题

安装方式

bash
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 项目框架
  • 功能开发 - 获取组件使用最佳实践和代码示例
  • 问题排查 - 智能诊断和解决常见开发问题
  • 性能优化 - 获取性能调优的专业建议

安装方式

bash
# 快速安装完整技能包
/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 列表

类别覆盖内容
LangChaincreate_agent()、middleware、tool patterns,经典 tool calling agent 循环
LangGraphLangGraph 原语、Human In the Loop、durable execution
Deep Agents开源 Deep Agents 包、预构建 middleware、FileSystem

安装方式

bash
# 当前项目
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