Claude Code 使用指南

主题

Skills 实战案例 ​

Skills Practical Examples

本章展示几个实用的 Skills 案例，帮助你理解如何在实际工作中运用技能系统。

案例一：智能提交 /commit ​

内置的 /commit 技能是最常用的技能之一，它自动分析代码变更并生成规范的提交信息。

使用方式 ​

> /commit

工作流程 ​

  1. 自动运行 git status 和 git diff 查看变更
  2. 分析变更内容，判断变更类型（feature/fix/refactor/docs 等）
  3. 生成符合 Conventional Commits 规范的提交信息
  4. 暂存相关文件并创建提交

生成的提交信息示例 ​

feat: add user authentication with OAuth2 support

- Add OAuth2 provider configuration
- Implement login/logout flow
- Add session management middleware
- Create user profile page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

自定义提交规范 ​

可以通过项目级 CLAUDE.md 自定义提交信息格式：

markdown
## Git 提交规范

- 使用中文提交信息
- 格式：<类型>(<范围>): <描述>
- 类型：feat, fix, refactor, docs, test, chore
- 提交信息不超过 72 字符

案例二：代码审查 /review ​

/review 技能对当前代码变更进行全面审查。

使用方式 ​

> /review           # 审查当前未提交的变更
> /review HEAD~3    # 审查最近 3 次提交

审查输出示例 ​

markdown
## 代码审查报告

### 🔴 严重问题 (1)
1. `src/auth.ts:45` — SQL 注入风险
   未使用参数化查询，直接拼接用户输入

### 🟡 警告 (3)
1. `src/utils.ts:12` — 未处理的 Promise rejection
2. `src/api.ts:88` — 硬编码的超时时间，建议改为配置项
3. `src/db.ts:34` — 缺少数据库连接错误处理

### 🟢 建议 (2)
1. `src/types.ts:5` — 建议使用更精确的类型替代 `any`
2. `src/components/Header.tsx:20` — 可提取为独立组件

案例三：自定义图片生成技能 ​

创建一个调用外部 API 生成图片的技能。

技能结构 ​

.claude/skills/gen-image/
├── SKILL.md
└── scripts/
    └── generate.sh

SKILL.md ​

markdown
---
name: gen-image
description: 使用 AI 生成图片并保存到项目中
invocable_by: user
user_command: /gen-image
---

# AI 图片生成

当用户请求生成图片时：

1. 理解用户的图片描述
2. 将描述翻译为英文（如果是中文）
3. 调用 scripts/generate.sh 脚本生成图片
4. 将图片保存到用户指定的路径（默认 ./assets/）
5. 返回图片路径和预览

## 使用方式
/gen-image 一只戴眼镜的橘猫在敲键盘
/gen-image --size 1024x1024 --output ./public/hero.png 科技感的城市天际线

脚本 (scripts/generate.sh) ​

bash
#!/bin/bash
PROMPT="$1"
OUTPUT="${2:-./assets/generated.png}"
SIZE="${3:-1024x1024}"

curl -s "https://api.example.com/generate" \
  -H "Authorization: Bearer $AI_IMAGE_API_KEY" \
  -d "{\"prompt\": \"$PROMPT\", \"size\": \"$SIZE\"}" \
  -o "$OUTPUT"

echo "Image saved to: $OUTPUT"

案例四：项目初始化技能 ​

快速搭建标准化的项目结构。

SKILL.md ​

markdown
---
name: init-fullstack
description: 初始化全栈 TypeScript 项目
invocable_by: user
user_command: /init-fullstack
---

# 全栈项目初始化

创建一个标准的全栈 TypeScript 项目，包含：

## 项目结构

\`\`\`
project/
├── apps/
│   ├── web/          # Next.js 前端
│   └── api/          # Express API
├── packages/
│   ├── shared/       # 共享类型和工具
│   └── ui/           # UI 组件库
├── package.json      # Workspace 根配置
├── tsconfig.json     # TypeScript 基础配置
└── turbo.json        # Turborepo 配置
\`\`\`

## 技术栈

- 前端：Next.js 14 + React 18 + Tailwind CSS
- 后端：Express + Prisma + PostgreSQL
- 工具：TypeScript 5, Turborepo, ESLint, Prettier
- 测试：Vitest + Playwright

## 步骤

1. 创建目录结构
2. 初始化 package.json（workspace 配置）
3. 创建各子项目的配置文件
4. 安装依赖
5. 配置 TypeScript、ESLint、Prettier
6. 创建示例页面和 API
7. 验证项目可正常启动

案例五：文档翻译技能 ​

批量翻译 Markdown 文档。

SKILL.md ​

markdown
---
name: translate-docs
description: 将 Markdown 文档翻译为目标语言
invocable_by: user
user_command: /translate
---

# 文档翻译

将 Markdown 文档翻译为目标语言，保留格式和代码块。

## 规则

1. 保留所有 Markdown 格式（标题、列表、表格、代码块）
2. 代码块内容不翻译
3. 技术术语保留英文，括号标注中文
4. Front matter 保留原样
5. 链接文本翻译，URL 不变
6. 翻译后保存到对应的语言目录

## 使用方式

\`\`\`
/translate docs/guide.md --to zh-CN
/translate docs/*.md --to ja --output docs/ja/
\`\`\`

使用效果 ​

> /translate README.md --to zh-CN

✅ 翻译完成
- 源文件：README.md (English)
- 输出文件：README.zh-CN.md (简体中文)
- 段落数：24
- 保留代码块：8

技能组合使用 ​

多个技能可以组合使用，形成完整的工作流：

# 1. 初始化项目
> /init-fullstack my-app

# 2. 生成组件
> /gen-component UserProfile

# 3. 审查代码
> /review

# 4. 提交代码
> /commit

# 5. 翻译文档
> /translate README.md --to zh-CN

技能开发建议

  • 从简单的 SKILL.md 开始，逐步添加模板和脚本
  • 一个技能专注于一个明确的任务
  • 提供清晰的使用示例
  • 考虑边界情况和错误处理