前端面试知识库

Appearance

Claude Skills 实践指南 🎯 ​

"将专业知识封装为可复用的模块化能力 — 让 AI 真正理解你的工作流程。"

1. Claude Skills 概述 ​

1.1 什么是 Agent Skills ​

Agent Skills 是 Anthropic 于 2025 年 10 月 16 日 推出的功能，用于扩展 Claude 的能力。每个 Skill 由 SKILL.md 文件（包含指令）和可选的支持文件组成。

传统方式: 每次对话重复描述需求 → 结果不一致
Agent Skills: SKILL.md 定义一次 → Claude 自动识别并调用 → 一致输出

1.2 Skills vs Slash Commands ​

特性Agent SkillsSlash Commands
触发方式Model-invoked - Claude 自主决定User-invoked - 用户输入 /command
匹配机制基于内容和描述自动匹配精确命令匹配
使用场景复杂工作流、专业领域知识简单、明确的操作

1.3 核心优势 ​

  • 扩展能力: 为特定工作流定制 Claude
  • 团队共享: 通过 git 共享专业知识
  • 减少重复: 避免反复输入相同提示词
  • 可组合性: 多个 Skills 组合处理复杂任务

2. Skills 存储位置 ​

2.1 三种 Skill 类型 ​

1. Personal Skills (个人技能)
   位置: ~/.claude/skills/
   适用: 个人工作流、实验性技能
   可见: 当前用户的所有项目

2. Project Skills (项目技能)
   位置: .claude/skills/ (项目根目录)
   适用: 团队工作流、项目规范
   可见: 该项目的所有协作者
   特点: 通过 git 自动同步

3. Plugin Skills (插件技能)
   位置: 随 Claude Code 插件安装
   适用: 第三方扩展能力

2.2 创建 Skill 目录 ​

bash
# 创建个人 Skill
mkdir -p ~/.claude/skills/my-skill-name

# 创建项目 Skill
mkdir -p .claude/skills/my-skill-name

3. 编写 SKILL.md ​

3.1 基本结构 ​

markdown
---
name: skill-name
description: 功能描述和使用时机
---

# Skill 名称

## Instructions
具体操作指南

## Examples
使用示例

3.2 YAML Frontmatter ​

yaml
---
name: commit-with-emoji          # 必需，≤64字符，小写+连字符
description: |                   # 必需，≤1024字符
  Creates git commits with emoji prefixes.
  Use when the user wants to commit changes with semantic emojis.
allowed-tools: Bash, Read, Edit  # 可选，限制可用工具
---

3.3 完整示例 ​

markdown
---
name: commit-with-emoji
description: |
  Creates git commits with emoji prefixes based on change type.
  Use when the user wants to commit changes with semantic emojis.
allowed-tools: Bash, Read
---

# Commit with Emoji

## Instructions

1. Run `git status` to check changes
2. Read modified files to understand changes
3. Determine change type:
   - ✨ feat: New feature
   - 🐛 fix: Bug fix
   - 📝 docs: Documentation
   - ♻️ refactor: Code refactoring
   - 🎨 style: Formatting
   - ✅ test: Tests
4. Create commit message: `<emoji> <type>: <description>`
5. Run `git add .` and `git commit -m "<message>"`

## Examples

User: "Commit these changes"
→ Check git status
→ Read files
→ Determine: Added new feature
→ Commit: `✨ feat: add user authentication`

4. 调用脚本 ​

4.1 基础脚本调用 ​

markdown
---
name: run-tests
description: Runs project tests and reports results
---

# Run Tests

## Instructions

1. Execute the test script: `./scripts/run-tests.sh`
2. Parse the output
3. Report results to the user

## Script

The script is located at `scripts/run-tests.sh`.

脚本文件 (scripts/run-tests.sh):

bash
#!/bin/bash
npm test -- --coverage

4.2 带参数的脚本 ​

markdown
---
name: deploy
description: Deploys the application to specified environment
---

# Deploy

## Instructions

1. Ask user for target environment (staging/production)
2. Run: `./scripts/deploy.sh <environment>`
3. Monitor output and report status

脚本文件 (scripts/deploy.sh):

bash
#!/bin/bash
ENV=$1

if [ "$ENV" = "production" ]; then
  echo "Deploying to production..."
  npm run build:prod
  npm run deploy:prod
else
  echo "Deploying to staging..."
  npm run build:staging
  npm run deploy:staging
fi

5. 使用模板 ​

5.1 模板文件 ​

markdown
---
name: create-component
description: Creates a new React component with tests
---

# Create Component

## Instructions

1. Ask user for component name
2. Read template from `templates/component.tsx`
3. Replace `{{ComponentName}}` with actual name
4. Create files:
   - `src/components/{{ComponentName}}.tsx`
   - `src/components/{{ComponentName}}.test.tsx`

模板文件 (templates/component.tsx):

tsx
import React from 'react';

interface {{ComponentName}}Props {
  // Add props here
}

export const {{ComponentName}}: React.FC<{{ComponentName}}Props> = (props) => {
  return (
    <div>
      {/* Component content */}
    </div>
  );
};

6. 实战案例 ​

6.1 代码审查 Skill ​

markdown
---
name: code-review
description: |
  Performs comprehensive code review focusing on best practices,
  security, and performance. Use when user requests code review.
allowed-tools: Read, Grep, Bash
---

# Code Review

## Instructions

1. Identify files to review (ask user or use git diff)
2. For each file, check:
   - Code quality and readability
   - Security vulnerabilities
   - Performance issues
   - Best practices adherence
3. Run linter: `npm run lint`
4. Check for common issues:
   - Unused variables
   - Missing error handling
   - Hardcoded credentials
5. Provide structured feedback with severity levels

## Output Format

Code Review Results ​

Critical Issues ​

  • [File:Line] Description

Warnings ​

  • [File:Line] Description

Suggestions ​

  • [File:Line] Description

6.2 API 文档生成 ​

markdown
---
name: generate-api-docs
description: |
  Generates API documentation from code comments and types.
  Use when user wants to create or update API documentation.
allowed-tools: Read, Write, Bash
---

# Generate API Docs

## Instructions

1. Find all API route files in `src/api/`
2. Extract:
   - Route path and method
   - Request/response types
   - JSDoc comments
3. Generate markdown documentation
4. Write to `docs/api.md`
5. Run: `npm run docs:build` to generate HTML

## Template

```markdown
# API Documentation

## Endpoint: {{method}} {{path}}

**Description**: {{description}}

**Request**:
```typescript
{{requestType}}

Response:

typescript
{{responseType}}

Example:

bash
curl -X {{method}} {{baseUrl}}{{path}}

6.3 数据库迁移 ​

markdown
---
name: create-migration
description: |
  Creates a new database migration file with timestamp.
  Use when user needs to modify database schema.
allowed-tools: Write, Bash
---

# Create Migration

## Instructions

1. Ask user for migration description
2. Generate timestamp: `date +%Y%m%d%H%M%S`
3. Create file: `migrations/{{timestamp}}_{{description}}.sql`
4. Add template:

```sql
-- Migration: {{description}}
-- Created: {{timestamp}}

-- Up
BEGIN;
-- Add your schema changes here
COMMIT;

-- Down
BEGIN;
-- Add rollback logic here
COMMIT;
  1. Inform user to edit the migration file

---

## 7. 最佳实践

### 7.1 编写清晰的描述

```yaml
# ✅ 好的描述
description: |
  Creates git commits with conventional commit format.
  Use when the user wants to commit changes following conventional commits spec.

# ❌ 差的描述
description: Commits code

7.2 限制工具范围 ​

yaml
# 限制工具提高安全性和性能
allowed-tools: Read, Edit, Grep

# 不限制（默认）
# allowed-tools: (omitted)

7.3 提供示例 ​

markdown
## Examples

**Example 1**: Simple commit
User: "Commit my changes"
→ Check git status
→ Create commit message
→ Execute commit

**Example 2**: With custom message
User: "Commit with message 'fix: resolve login bug'"
→ Use provided message
→ Execute commit

7.4 错误处理 ​

markdown
## Error Handling

- If no changes to commit: Inform user "No changes to commit"
- If commit fails: Show error message and suggest fixes
- If script not found: Provide installation instructions

8. 调试 Skills ​

8.1 检查 Skill 是否加载 ​

bash
# 查看 Claude Code 日志
tail -f ~/.claude/logs/claude-code.log | grep -i skill

8.2 测试 Skill 触发 ​

# 在 Claude Code 中测试
User: "I want to commit my changes with an emoji"
→ 应该触发 commit-with-emoji Skill

8.3 常见问题 ​

问题原因解决方案
Skill 未触发描述不够明确改进 description 字段
脚本执行失败缺少执行权限chmod +x scripts/*.sh
YAML 解析错误语法错误检查缩进（使用空格）

9. 快速参考 ​

9.1 SKILL.md 模板 ​

markdown
---
name: lowercase-with-hyphens
description: 功能 + 使用时机
allowed-tools: Tool1, Tool2
---

# Skill 名称

## Instructions
具体操作指南

## Examples
使用示例

9.2 检查列表 ​

  • [ ] name 只使用小写字母、数字、连字符
  • [ ] description 包含功能描述和触发场景
  • [ ] YAML frontmatter 语法正确
  • [ ] 文件路径正确
  • [ ] 脚本有执行权限
  • [ ] 已测试 Skill 能被正确触发

延伸阅读 ​

前端面试知识库

Copyright © 2026