Claude Codeのスキル機能で作業を自動化する方法

Claude Codeにはスキル（Skills）機能という強力な自動化ツールが用意されています。よく実行する一連の操作を「スキル」として定義しておけば、/skill-nameと入力するだけで複雑な作業を一発で実行できるようになります。この記事では、スキルの仕組みと独自スキルの作成方法を解説します。

スキル機能とは

スキルは、Claude Codeに対する「定型操作のショートカット」です。例えば、以下のような操作をスキルとして登録できます：

特定フォーマットでコンポーネントを生成する
テストを実行して結果を整形して報告する
Gitコミット＋プッシュを一括で行う
データベースマイグレーションを実行する
コードレビューを特定の観点で実施する

ビルトインスキル

Claude Codeにはいくつかの標準スキルが用意されています：

/commit — 変更内容を分析して適切なコミットメッセージでコミット
/review-pr — プルリクエストのコードレビューを実施
/help — ヘルプと利用可能なコマンド一覧を表示

独自スキルの作成

スキルファイルの配置場所

独自スキルは.claude/skills/ディレクトリにマークダウンファイルとして配置します：

.claude/
  skills/
    create-component.md
    run-tests.md
    deploy.md

スキルファイルの書き方

スキルファイルはマークダウン形式で記述します。ファイル名がそのままコマンド名になります：

# .claude/skills/create-component.md

## Reactコンポーネントの生成

以下の手順でReactコンポーネントを作成してください：

1. コンポーネント名を引数から取得
2. `src/components/{ComponentName}/` ディレクトリを作成
3. 以下のファイルを生成：
   - `index.tsx` — メインコンポーネント（関数コンポーネント、TypeScript）
   - `styles.module.css` — CSS Modules
   - `{ComponentName}.test.tsx` — Vitestテストファイル
   - `index.ts` — エクスポートファイル
4. Storybookストーリーファイルも生成（オプション）

### テンプレート

コンポーネントの雛形：

```tsx
interface {ComponentName}Props {
  className?: string;
  children?: React.ReactNode;
}

export function {ComponentName}({ className, children }: {ComponentName}Props) {
  return (
    <div className={className}>
      {children}
    </div>
  );
}
```

### コーディング規約
- 関数コンポーネントのみ使用（クラスコンポーネント禁止）
- Propsには必ずinterfaceを定義
- classNameはオプショナルで受け取る

スキルの実行

Claude CodeのREPL内で/に続けてスキル名を入力します：

> /create-component Button

引数を渡すことも可能です。Claude Codeはスキルファイルの指示に従って、ファイルの生成、テンプレートの適用、テストファイルの作成まで一気に実行します。

実用的なスキル例

テスト実行＋修正スキル

# .claude/skills/fix-tests.md

## テスト修正サイクル

以下の手順を実行してください：

1. `npm test` を実行
2. 失敗したテストがあれば、そのテストファイルと対象ファイルを読み込む
3. エラーメッセージから原因を分析
4. テストコードまたは実装コードの適切な方を修正
5. 再度テストを実行して全テストが通ることを確認
6. 修正内容をコミット（メッセージは「fix: テスト失敗の修正」形式）

コードレビュースキル

# .claude/skills/review.md

## コードレビュー

現在のGitブランチの差分を対象にコードレビューを実施してください。

### レビュー観点
1. **セキュリティ**: SQLインジェクション、XSS、認証・認可の不備
2. **パフォーマンス**: N+1クエリ、不要な再レンダリング、メモリリーク
3. **エラーハンドリング**: 例外処理の漏れ、ユーザーへの適切なフィードバック
4. **保守性**: 命名規則、関数の単一責任、適切な抽象化レベル
5. **テスト**: テストカバレッジ、エッジケースの網羅

### 出力形式
各問題について以下の形式で出力：
- **ファイル**: 該当箇所
- **重大度**: 高/中/低
- **指摘内容**: 問題の説明
- **提案**: 修正案のコード

WordPress記事投稿スキル

# .claude/skills/publish-article.md

## WordPress記事投稿

マークダウンファイルからWordPress記事を作成・投稿します。

### 手順
1. 引数で指定されたマークダウンファイルを読み込む
2. フロントマターからタイトル、カテゴリ、タグ、抜粋を抽出
3. 本文をHTMLに変換（WordPressブロック形式）
4. WordPress REST API経由で投稿を作成
5. アイキャッチ画像が指定されていればアップロードして設定
6. 投稿URLを報告

### API設定
- エンドポイント: 環境変数 WP_API_URL から取得
- 認証: Application Password