前端Jeek

Skills 入门指南

2026/3/4 skills

🌙 Skills 入门指南

使用 Skills 扩展 AI Agent 的能力

🌙 📚 目录

🌙 什么是 Skills

Skills 是一个开放的生态系统，为 AI Agent（如 Claude Code）提供专业化的知识、工作流程和工具集成。

🌙 核心概念

  • Skill：一个包含特定领域知识的模块化包
  • Skills CLI：管理和安装 skills 的命令行工具（npx skills）
  • Skills 生态：由社区和官方维护的 skills 仓库集合
  • 全局 vs 项目级：可以全局安装或在特定项目中安装

🌙 Skills 的工作原理

当你安装一个 skill 后：

  1. Skill 文件被复制或链接到 ~/.claude/skills/ 目录
  2. Claude Code 在执行任务时自动加载相关 skills
  3. Skills 提供上下文、最佳实践和代码模板
  4. 帮助 AI 生成更专业、更符合标准的代码

现在可以安装到全局的 ~/.agent/skills目录，可以给cursor等IDE使用

🌙 为什么使用 Skills

🌙 对开发者的好处

  1. 提升代码质量

    • 遵循行业最佳实践
    • 符合框架官方推荐模式
    • 减少常见错误

  2. 加速开发效率

    • 减少重复性工作
    • 快速生成样板代码
    • 自动应用设计模式

  3. 降低学习曲线

    • 快速上手新技术栈
    • 获得专家级指导
    • 了解框架深层知识

  4. 保持技术更新

    • Skills 持续更新
    • 跟随技术演进
    • 学习最新特性

🌙 适用场景

  • 学习新的技术栈（如前端转全栈）
  • 优化现有代码库
  • 遵循团队规范
  • 快速原型开发
  • 代码审查和重构

🌙 安装 Skills CLI

Skills CLI 基于 npx，无需全局安装即可使用：

# 直接使用（推荐）
npx skills --help

# 或全局安装
npm install -g skills
1
2
3
4
5

🌙 验证安装

npx skills --version
1

🌙 快速开始

🌙 1. 搜索 Skills

交互式搜索：

npx skills find
1

关键词搜索：

npx skills find react
npx skills find golang
npx skills find api design
1
2
3

🌙 2. 安装 Skills

安装单个 Skill（全局）：

npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y
1

查看仓库中的所有 Skills：

npx skills add vercel-labs/agent-skills -l
1

安装特定 Skills：

npx skills add vercel-labs/agent-skills --skill pr-review,commit -g -y
1

🌙 3. 查看已安装的 Skills

# 查看全局 skills
npx skills list -g

# 查看项目 skills
npx skills list
1
2
3
4
5

🌙 4. 使用 Skills

安装后，Claude Code 会自动在相关任务中使用这些 skills。无需额外配置！

示例：

  • 安装 nextjs-app-router-patterns 后，创建 Next.js 页面时会自动应用最佳实践
  • 安装 golang-backend-development 后，编写 Go API 时会遵循标准模式

🌙 常用命令

🌙 搜索与安装

# 交互式搜索
npx skills find

# 关键词搜索
npx skills find [query]

# 安装 skill（全局）
npx skills add <owner/repo@skill> -g -y

# 列出仓库中的 skills
npx skills add <owner/repo> -l

# 安装仓库所有 skills
npx skills add <owner/repo> --all
1
2
3
4
5
6
7
8
9
10
11
12
13
14

🌙 查看与管理

# 列出全局 skills
npx skills list -g
npx skills ls -g

# 列出项目 skills
npx skills list
npx skills ls

# 按 agent 筛选
npx skills ls -a claude-code
1
2
3
4
5
6
7
8
9
10

🌙 删除 Skills

# 交互式删除
npx skills remove
npx skills rm

# 删除特定 skill（全局）
npx skills remove <skill-name> -g

# 删除所有 skills
npx skills remove --all -g

# 跳过确认
npx skills remove <skill-name> -g -y
1
2
3
4
5
6
7
8
9
10
11
12

🌙 更新 Skills

# 检查更新
npx skills check

# 更新所有 skills
npx skills update
1
2
3
4
5

🌙 创建自定义 Skill

# 初始化新 skill
npx skills init my-skill

# 在特定目录初始化
npx skills init my-project/my-skill
1
2
3
4
5

🌙 推荐 Skills

🌙 🎯 前端开发（Next.js + React）

🌙 Next.js

# Next.js App Router 模式（6.5K 安装）⭐
npx skills add wshobson/agents@nextjs-app-router-patterns -g -y

# Next.js 最佳实践（2.4K 安装）
npx skills add sickn33/antigravity-awesome-skills@nextjs-best-practices -g -y

# Next.js + Supabase 认证（2.8K 安装）
npx skills add sickn33/antigravity-awesome-skills@nextjs-supabase-auth -g -y
1
2
3
4
5
6
7
8

🌙 React

# Vercel React 最佳实践(348K+ 安装)⭐ 必装
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y

# React 性能优化（444 安装）
npx skills add nickcrew/claude-ctx-plugin@react-performance-optimization -g -y

# React 组件开发(11.1K 安装)
npx skills add google-labs-code/stitch-skills@react-components -g -y
1
2
3
4
5
6
7
8

🌙 Tailwind CSS

# 高级布局（1.9K 安装）⭐
npx skills add josiahsiegel/claude-plugin-marketplace@tailwindcss-advanced-layouts -g -y

# 动画效果（672 安装）
npx skills add josiahsiegel/claude-plugin-marketplace@tailwindcss-animations -g -y

# 移动优先设计（613 安装）
npx skills add josiahsiegel/claude-plugin-marketplace@tailwindcss-mobile-first -g -y
1
2
3
4
5
6
7
8

🌙 TypeScript

# TypeScript 高级类型（10.6K 安装）⭐
npx skills add wshobson/agents@typescript-advanced-types -g -y

# TypeScript 专家（1.9K 安装）
npx skills add sickn33/antigravity-awesome-skills@typescript-expert -g -y

# OpenAPI 转 TypeScript（2.9K 安装）
npx skills add softaworks/agent-toolkit@openapi-to-typescript -g -y
1
2
3
4
5
6
7
8

🌙 🚀 后端开发（Go）

# Go 后端开发（319 安装）⭐
npx skills add manutej/luxor-claude-marketplace@golang-backend-development -g -y

# Go Clean Architecture（27 安装）
npx skills add eng0ai/eng0-template-skills@go-backend-clean-architecture -g -y

# Go 微服务（60 安装）
npx skills add mindrally/skills@go-backend-microservices -g -y

# Go 后端审查（21 安装）
npx skills add jssfy/k-skills@go-backend-reviewer -g -y
1
2
3
4
5
6
7
8
9
10
11

🌙 🔌 API 设计

# API 设计（4.1K 安装）⭐
npx skills add supercent-io/skills-template@api-design -g -y

# REST API 设计模式（65 安装）
npx skills add manutej/luxor-claude-marketplace@rest-api-design-patterns -g -y

# API 模式（436 安装）
npx skills add sickn33/antigravity-awesome-skills@api-patterns -g -y
1
2
3
4
5
6
7
8

🌙 🗄️ 数据库

# 数据库 Schema 设计（4.1K 安装）⭐
npx skills add supercent-io/skills-template@database-schema-design -g -y

# PostgreSQL（3.6K 安装）
npx skills add neondatabase/agent-skills@neon-postgres -g -y

# 数据库迁移（3.2K 安装）
npx skills add wshobson/agents@database-migration -g -y

# Prisma ORM（1.2K 安装）
npx skills add prisma/skills@prisma-database-setup -g -y
1
2
3
4
5
6
7
8
9
10
11

🌙 🧪 测试

# Web 应用测试(126K+ Stars)⭐ 必装
npx skills add anthropics/skills@webapp-testing -g -y

# 后端测试(4.1K 安装)⭐
npx skills add supercent-io/skills-template@backend-testing -g -y

# 测试策略(4.1K 安装)
npx skills add supercent-io/skills-template@testing-strategies -g -y

# E2E 测试(4.8K 安装)
npx skills add wshobson/agents@e2e-testing-patterns -g -y
1
2
3
4
5
6
7
8
9
10
11

🌙 🐳 部署与容器化

# Docker 部署(Node.js)(108 安装)
npx skills add pluginagentmarketplace/custom-plugin-nodejs@docker-deployment -g -y

# Vercel 部署
npx skills add openai/skills@vercel-deploy -g -y

# Cloudflare 部署
npx skills add openai/skills@cloudflare-deploy -g -y
1
2
3
4
5
6
7
8

🌙 🛠️ 工程化与工作流

# Addy Osmani Agent Skills(37K+ Stars)⭐ 强烈推荐
# 包含完整的软件工程流程:定义→规划→构建→验证→审查→交付
git clone https://github.com/addyosmani/agent-skills.git
# 然后手动复制到 ~/.agents/skills/ 或 ~/.claude/skills/

# TDD 测试驱动开发
npx skills add obra/superpowers@test-driven-development -g -y

# 代码审查
npx skills add mattpocock/skills@code-review -g -y

# GitHub Actions 助手(24.4K 安装)
npx skills add github/awesome-copilot@github-actions -g -y
1
2
3
4
5
6
7
8
9
10
11
12
13

🌙 🎨 UI/UX 设计

# Web 设计指南
npx skills add vercel-labs/agent-skills@web-design-guidelines -g -y

# UI 组件模式
npx skills add supercent-io/skills-template@ui-component-patterns -g -y

# 设计系统模式
npx skills add supercent-io/skills-template@design-system-patterns -g -y

# 响应式设计
npx skills add supercent-io/skills-template@responsive-design -g -y
1
2
3
4
5
6
7
8
9
10
11

🌙 🤖 AI Agent 开发

# MCP Builder(Model Context Protocol)
npx skills add anthropics/skills@mcp-builder -g -y

# Skill Creator(创建自定义 Skills)
npx skills add anthropics/skills@skill-creator -g -y

# Browser Automation(Browserbase)
npx skills add browserbase/skills@browser -g -y
1
2
3
4
5
6
7
8

🌙 批量安装脚本

为了快速安装所有推荐的 Skills,你可以使用以下自动化脚本:

🌙 方法一:使用提供的安装脚本

  1. 下载脚本:
curl -o install-skills.sh https://raw.githubusercontent.com/keekuun/keekuun.github.io/main/scripts/install-skills.sh
chmod +x install-skills.sh
1
2
  1. 运行脚本:
./install-skills.sh
1

🌙 方法二:手动复制并执行

将以下内容保存为 install-skills.sh:

#!/bin/bash

# Skills 批量安装脚本
set -e

echo "========================================="
echo "开始批量安装 Skills"
echo "========================================="

# 前端开发 - React/Next.js
echo "📦 安装前端开发 Skills..."
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y
npx skills add wshobson/agents@nextjs-app-router-patterns -g -y
npx skills add wshobson/agents@typescript-advanced-types -g -y

# Tailwind CSS
echo "📦 安装 Tailwind CSS Skills..."
npx skills add josiahsiegel/claude-plugin-marketplace@tailwindcss-advanced-layouts -g -y
npx skills add josiahsiegel/claude-plugin-marketplace@tailwindcss-animations -g -y
npx skills add josiahsiegel/claude-plugin-marketplace@tailwindcss-mobile-first -g -y

# 后端开发 - Go
echo "📦 安装后端开发 Skills..."
npx skills add manutej/luxor-claude-marketplace@golang-backend-development -g -y

# API 设计
echo "📦 安装 API 设计 Skills..."
npx skills add supercent-io/skills-template@api-design -g -y
npx skills add manutej/luxor-claude-marketplace@rest-api-design-patterns -g -y

# 数据库
echo "📦 安装数据库 Skills..."
npx skills add supercent-io/skills-template@database-schema-design -g -y
npx skills add neondatabase/agent-skills@neon-postgres -g -y
npx skills add wshobson/agents@database-migration -g -y

# 测试
echo "📦 安装测试 Skills..."
npx skills add anthropics/skills@webapp-testing -g -y
npx skills add supercent-io/skills-template@backend-testing -g -y
npx skills add supercent-io/skills-template@testing-strategies -g -y
npx skills add wshobson/agents@e2e-testing-patterns -g -y

# 部署与容器化
echo "📦 安装部署 Skills..."
npx skills add pluginagentmarketplace/custom-plugin-nodejs@docker-deployment -g -y

# UI/UX 设计
echo "📦 安装 UI/UX Skills..."
npx skills add vercel-labs/agent-skills@web-design-guidelines -g -y
npx skills add supercent-io/skills-template@ui-component-patterns -g -y
npx skills add supercent-io/skills-template@design-system-patterns -g -y
npx skills add supercent-io/skills-template@responsive-design -g -y

# AI Agent 开发
echo "📦 安装 AI Agent Skills..."
npx skills add anthropics/skills@mcp-builder -g -y
npx skills add anthropics/skills@skill-creator -g -y

# 工程化与工作流
echo "📦 安装工程化 Skills..."
npx skills add obra/superpowers@test-driven-development -g -y

echo ""
echo "========================================="
echo "✅ 所有 Skills 安装完成！"
echo "========================================="
echo ""
echo "查看已安装的 Skills:"
npx skills ls -g
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

然后执行:

chmod +x install-skills.sh
./install-skills.sh
1
2

🌙 方法三:按需分类安装

如果你只想安装特定类别的 Skills:

# 只安装前端核心 Skills
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y
npx skills add wshobson/agents@nextjs-app-router-patterns -g -y
npx skills add wshobson/agents@typescript-advanced-types -g -y

# 只安装测试 Skills
npx skills add anthropics/skills@webapp-testing -g -y
npx skills add supercent-io/skills-template@backend-testing -g -y

# 只安装数据库 Skills
npx skills add supercent-io/skills-template@database-schema-design -g -y
npx skills add neondatabase/agent-skills@neon-postgres -g -y
1
2
3
4
5
6
7
8
9
10
11
12

🌙 手动安装 Addy Osmani Agent Skills

由于这是一个大型综合技能包,需要手动安装:

# 克隆仓库
git clone https://github.com/addyosmani/agent-skills.git

# 复制到全局 skills 目录
cp -r agent-skills/skills/* ~/.agents/skills/

# 或者只复制需要的技能
cp agent-skills/skills/spec-driven-development ~/.agents/skills/
cp agent-skills/skills/test-driven-development ~/.agents/skills/
cp agent-skills/skills/incremental-implementation ~/.agents/skills/

# 清理
rm -rf agent-skills
1
2
3
4
5
6
7
8
9
10
11
12
13

🌙 管理 Skills

🌙 查看已安装的 Skills

# 查看全局 skills
npx skills ls -g

# 查看项目 skills
npx skills ls

# 按 agent 筛选
npx skills ls -a claude-code
1
2
3
4
5
6
7
8

🌙 删除 Skills

交互式删除（推荐）：

npx skills remove -g
1

删除特定 Skill：

npx skills remove <skill-name> -g -y
1

批量删除所有 Skills：

npx skills remove --all -g -y
1

🌙 更新 Skills

# 检查可用更新
npx skills check

# 更新所有 skills
npx skills update
1
2
3
4
5

🌙 Skills 存储位置

  • 全局 Skills: ~/.agents/skills/ 或 ~/.claude/skills/
  • 项目 Skills: ./.agents/skills/ 或 ./.claude/skills/ 或 .github/skills/

手动清理:

# 删除所有全局 skills
rm -rf ~/.agents/skills/*
rm -rf ~/.claude/skills/*

# 删除特定 skill
rm -rf ~/.agents/skills/<skill-name>
rm -rf ~/.claude/skills/<skill-name>
1
2
3
4
5
6
7

🌙 最佳实践

🌙 1. 按需安装，避免过度安装

推荐：

# 只安装核心 skills
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y
npx skills add wshobson/agents@nextjs-app-router-patterns -g -y
1
2
3

不推荐：

# 避免一次性安装大量不常用的 skills
npx skills add owner/repo --all
1
2

🌙 2. 定期更新

# 每周检查一次
npx skills check

# 更新所有
npx skills update
1
2
3
4
5

🌙 3. 使用全局安装

对于常用 skills，使用 -g 标志全局安装：

npx skills add <skill> -g -y
1

🌙 4. 定期清理

# 查看已安装的
npx skills ls -g

# 删除不需要的
npx skills remove -g
1
2
3
4
5

🌙 5. 优先选择热门 Skills

  • 查看安装数：数字越大，说明使用者越多
  • 优先选择官方维护的 skills（如 Vercel、Anthropic）
  • 查看 https://skills.sh/ 了解详情

🌙 6. 技术栈组合推荐

前端开发者核心包:

npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y
npx skills add wshobson/agents@nextjs-app-router-patterns -g -y
npx skills add wshobson/agents@typescript-advanced-types -g -y
npx skills add anthropics/skills@webapp-testing -g -y
1
2
3
4

全栈开发者核心包:

# 前端
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -g -y
npx skills add wshobson/agents@nextjs-app-router-patterns -g -y

# 后端
npx skills add manutej/luxor-claude-marketplace@golang-backend-development -g -y
npx skills add supercent-io/skills-template@api-design -g -y

# 数据库
npx skills add supercent-io/skills-template@database-schema-design -g -y

# 测试
npx skills add anthropics/skills@webapp-testing -g -y
npx skills add supercent-io/skills-template@backend-testing -g -y
1
2
3
4
5
6
7
8
9
10
11
12
13
14

工程化最佳实践包:

# Addy Osmani 的完整工程技能包(需手动安装)
git clone https://github.com/addyosmani/agent-skills.git
cp -r agent-skills/skills/* ~/.agents/skills/

# TDD 工作流
npx skills add obra/superpowers@test-driven-development -g -y

# 代码审查
npx skills add mattpocock/skills@code-review -g -y
1
2
3
4
5
6
7
8
9

🌙 常见问题

🌙 Q1: Skills 和普通提示词的区别？

Skills：

  • 模块化、可重用
  • 社区维护和更新
  • 自动在相关任务中激活
  • 包含完整的上下文和最佳实践

普通提示词：

  • 一次性使用
  • 需要手动输入
  • 缺乏结构化知识

🌙 Q2: 安装太多 Skills 会影响性能吗？

不会。Claude Code 只在相关任务时加载对应的 skills。但建议按需安装，保持管理简洁。

🌙 Q3: Skills 可以离线使用吗？

可以。一旦安装，skills 存储在本地，无需网络连接即可使用。

🌙 Q4: 如何知道某个 Skill 是否在工作？

Claude Code 在使用 skill 时会自动应用其知识。你可以通过生成代码的质量和模式来判断。

🌙 Q5: 可以创建自己的 Skills 吗？

可以！使用以下命令：

npx skills init my-skill
1

然后在 SKILL.md 文件中编写你的知识和指导。

🌙 Q6: Skills 支持哪些 AI Agent？

主要支持：

  • Claude Code
  • Cursor
  • Windsurf
  • 其他支持 Agent Skills 协议的工具

🌙 Q7: Skills 是免费的吗？

是的！Skills 生态完全开源和免费。

🌙 Q8: 如何贡献到 Skills 生态？

  1. 创建自己的 skill
  2. 发布到 GitHub
  3. 在 https://skills.sh/ 提交
  4. 分享给社区

🌙 Q9: Global vs Project 安装的区别？

Global（-g）：

  • 安装到 ~/.claude/skills/
  • 所有项目共享
  • 适合通用 skills

Project：

  • 安装到项目的 .claude/skills/
  • 仅当前项目使用
  • 适合项目特定的 skills

🌙 Q10: 如何查看 Skill 的详细内容？

方法 1： 访问 Skills 网站

https://skills.sh/<owner>/<repo>/<skill-name>
1

方法 2： 查看本地文件

cat ~/.claude/skills/<skill-name>/SKILL.md
1

🌙 快速参考

🌙 常用命令速查表

操作 命令
搜索 skills npx skills find [query]
安装 skill（全局） npx skills add <package> -g -y
列出已安装 npx skills ls -g
删除 skill npx skills remove <name> -g
检查更新 npx skills check
更新所有 npx skills update
交互式删除 npx skills remove -g
查看帮助 npx skills --help

🌙 推荐资源

  • Skills 官网: https://skills.sh/
  • Skills Map: https://skillsmp.com/
  • Vercel Agent Skills: https://github.com/vercel-labs/agent-skills
  • Anthropic Skills: https://github.com/anthropics/skills
  • Addy Osmani Agent Skills: https://github.com/addyosmani/agent-skills
  • Awesome Claude Skills: https://github.com/ComposioHQ/awesome-claude-skills
  • Matt Pocock Skills: https://github.com/mattpocock/skills
  • wshobson Agents: https://github.com/wshobson/agents

🌙 下一步

🌙 初学者

  1. 使用批量安装脚本安装核心 skills
  2. 尝试使用 AI Agent 完成任务
  3. 观察 skills 如何改进代码质量

🌙 进阶使用

  1. 探索更多专业领域的 skills
  2. 定期更新 skills
  3. 根据项目需求动态安装/删除

🌙 高级用户

  1. 创建自定义 skills
  2. 贡献到社区
  3. 优化 skills 配置

开始你的 Skills 之旅!

# 从这里开始
npx skills find

# 或使用批量安装脚本
./install-skills.sh

# 查看已安装的
npx skills ls -g
1
2
3
4
5
6
7
8