プロンプトの手書きにうんざり？Claude Codeのこの機能で効率が3倍になった
ある実話
昨年10月、私は React プロジェクトのリファクタリングを担当していました。2000行以上の神クラスがあり、見るだけで頭が痛くなりました。Claude Code にコード最適化を頼むたびに、毎回同じ指示を繰り返す必要がありました：
- 「TypeScript の Strict モードを使うこと」
- 「API 呼び出しにはエラー処理を加えること」
- 「コンポーネントは単一責任の原則に従うこと」
これらの要件をコピペするだけで、少なくとも2〜3分はかかります。さらに厄介なのは、十数回やり取りを重ねると、Claude Code が最初のリクエストを「忘れ」てしまい、規約に合わないコードを書き始めることでした。
ドキュメントで Skill 機能を見つけるまでは。
1週間試した後、私はそれらの繰り返しの要件をすべていくつかの skill ファイルにカプセル化しました。今では @skill react-refactor と言うだけで、Claude Code は何をすべきか即座に理解します。あの2000行のクラスは、当初はリファクタリングに3日かかると見積もっていましたが、最終的には2つの午後だけで完了しました。
そもそも Skill とは？
簡単に言えば、Skill とは Claude Code にスキルパッケージをインストールすることです。.claude/skills/ ディレクトリに Markdown ファイルを作成し、よく使うプロンプト、ワークフロー、コード規約を書き込みます。必要なときに、@skill スキル名 で呼び出せます。ゲームでキャラクターに異なるスキルを装備させるようなもので、火力が必要なときは攻撃スキルを、タンクが必要なときは防御スキルを装備するのです。
最も単純な例を見てみましょう：
---
title: "Reactコードレビューの専門家"
description: "Reactコードの品質、パフォーマンス、ベストプラクティスを専門に審査する"
---
# Reactコードレビューフロー
あなたは経験豊富な React コードレビューの専門家です。以下の基準に従ってコードを審査してください：
## 審査の重点
1. **コンポーネント設計**
- 単一責任の原則
- Props 型定義の完全性
- コンポーネント分割の妥当性
2. **パフォーマンス最適化**
- 不要な再レンダリング
- useMemo/useCallback の使用
- リストレンダリングの key 値
3. **コード品質**
- TypeScript の型安全性
- エラー境界処理
- アクセシビリティ（a11y）
## 出力フォーマット
- 問題リスト（深刻度順）
- 具体的なコード提案
- 優先度付け（P0/P1/P2）このファイルを .claude/skills/react-review.md として保存すれば、今後 React コードをレビューする際に @skill react-review と入力するだけで済みます。Claude Code は定義された基準に厳密に従って審査を行います。
なぜ手書きプロンプトでは限界なのか
私は以前プロンプトエンジニアでもあり、Notion には数十の精巧なプロンプトテンプレートを保存していました。しかし数ヶ月使ってみて、この方法には致命的な欠陥があることに気づきました：
繰り返しの作業が多すぎる
毎回 Notion からコピペし、時にはプロジェクトに合わせていくつかの言葉を調整しなければなりません。1日中プロンプトをコピペするだけで30分は使ってしまいます。
バージョン管理が混乱する
今日使ったプロンプトと先週のものが違い、効果も安定しません。「前回使ったあの良かったバージョン」に戻りたい？ 残念ながら見つかりません。
チームコラボレーションが困難
私の良いプロンプトを同僚が使いたい？ 手動でチャットで送るしかありません。同僚が改善した？ また手動で同期し直す必要があります。石器時代と変わりません。
AI は忘れる
長い会話の中で、Claude Code は最初のリクエストを簡単に忘れてしまいます。20ターン目まで話が進むと、以前「やらないで」と言った間違いをまた犯し始めます。
Skill はこれらの問題を一挙に解決しました：
- バージョン化：Git で管理し、いつでも戻せる
- 共有可能：チームのリポジトリをプルすれば全員同期完了
- 常に有効：会話が長くなっても無効にならない
"Skill の核心的な価値は再利用性と一貫性です。プロンプトエンジニアリングを、メンテナンス可能で共有可能なプロジェクト資産に変えます。"
私の最初の Skill：API インターフェースジェネレーター
あの EC プロジェクトで、バックエンドから100以上のインターフェースがある Swagger ドキュメントを投げられました。手動で連携する場合、1つのインターフェースにつき以下を書く必要がありました：
- TypeScript 型定義
- axios リクエスト関数
- エラー処理ロジック
- loading 状態管理
計算すると、100個のインターフェースで約30時間かかります。
私は1時間かけて、api-generator という skill を書きました：
---
title: "APIインターフェースコードジェネレーター"
description: "APIドキュメントに基づいてTS型定義とaxiosラッパーを生成"
version: "1.3.0"
---
# APIコード生成の専門家
あなたはフルスタックエンジニアで、前後端インターフェースの連携が得意です。あなたのタスクは、API ドキュメントに基づいて高品質な TypeScript コードを生成することです。
## 生成内容
### 1. TypeScript型定義
```typescript
// リクエストパラメータ型
interface GetUserRequest {
userId: string;
includeDetails?: boolean;
}
// レスポンスデータ型
interface GetUserResponse {
id: string;
name: string;
email: string;
createdAt: string;
}2. Axiosリクエスト関数
import request from '@/utils/request';
export const getUserAPI = async (
params: GetUserRequest
): Promise<GetUserResponse> => {
try {
const response = await request.get<GetUserResponse>('/api/user', { params });
return response.data;
} catch (error) {
console.error('ユーザー情報の取得に失敗しました:', error);
throw error;
}
};3. React Hookラッパー（オプション）
export const useGetUser = (userId: string) => {
const [data, setData] = useState<GetUserResponse | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
const fetchData = async () => {
setLoading(true);
try {
const result = await getUserAPI({ userId });
setData(result);
} catch (err) {
setError(err as Error);
} finally {
setLoading(false);
}
};
fetchData();
}, [userId]);
return { data, loading, error };
};コード規約
- 命名はキャメルケースに従う
- API 関数は
APIで終わる - Hook 関数は
useで始まる - すべての非同期関数にはエラー処理を入れる
- エクスポートする型と関数には JSDoc コメントを付ける
出力フォーマット
- まず型定義を出力
- 次に API 関数を出力
- よく使うインターフェースなら Hook ラッパーも生成
- 最後に使用例を示す
この skill のおかげで、1つのインターフェース連携が30分から5分に短縮されました。100個のインターフェースは、前後合わせて2日ですべて完了しました。さらに重要なのは、チームの新人も同じ規約でコードを生成でき、プロジェクト全体のコードスタイルが高度に統一されたことです。
## 実践テクニック：Skill を連携させる
使い慣れてくると、単体の skill では物足りないことに気づきます。実際の開発シーンでは、複数の skill の連携が必要になることが多いのです。
例えば、私が古いコードをリファクタリングする際の標準フローは以下の通りです：
```bash
# ステップ1：コードの問題点を分析
@skill code-analyzer src/legacy/UserService.ts
# ステップ2：リファクタリング計画を策定
@skill refactor-planner
# ステップ3：テストケースを生成（リファクタリング前の保険として必須）
@skill test-generator
# ステップ4：リファクタリング実行
（手動リファクタリングまたは Claude Code に補助させる）
# ステップ5：最終コードレビュー
@skill code-reviewerこれら4つの skill を順番に呼び出すことで、完全なリファクタリングワークフローが形成されます。私はこのフローを自動実行するシェルスクリプトまで書きました：
#!/bin/bash
# refactor-workflow.sh
echo "🔍 ステップ1/4: コードの問題点を分析中..."
claude-code @skill code-analyzer $1
read -p "Enterキーを押して続行..."
echo "📋 ステップ2/4: リファクタリング計画を策定中..."
claude-code @skill refactor-planner
read -p "Enterキーを押して続行..."
echo "🧪 ステップ3/4: テストケースを生成中..."
claude-code @skill test-generator
read -p "テストを実行し通過を確認した後、Enterキーを押して続行..."
echo "✅ ステップ4/4: 最終コードレビュー..."
claude-code @skill code-reviewerこのスクリプトを使って2000行の神クラスをリファクタリングし、7つの責務が明確な小さなクラスに分割しました。テストカバレッジは40%から85%に向上し、プロセス全体は想像以上にスムーズでした。
チーム共有：Skill をインフラとして扱う
私たちのチームでは現在、skill をインフラとして管理しています。team-skills という専用の Git リポジトリを作成しました：
team-skills/
├── frontend/
│ ├── react-review.md # Reactコードレビュー
│ ├── vue-component-gen.md # Vueコンポーネント生成
│ └── css-optimizer.md # CSSパフォーマンス最適化
├── backend/
│ ├── api-design.md # API設計規約
│ ├── database-review.md # データベースレビュー
│ └── security-audit.md # セキュリティ監査
└── common/
├── code-cleaner.md # コードクリーナー
├── test-generator.md # テスト生成
└── commit-msg.md # Gitコミットメッセージ生成各開発者はローカルプロジェクト内でこのリポジトリへのシンボリックリンクを作成します：
# ワンタイム設定
git clone [email protected]:your-team/team-skills.git ~/.team-skills
ln -s ~/.team-skills/* .claude/skills/メリットは即座に現れました：
- 新人フレンドリー：入社初日から完全な skill ライブラリがあり、すぐに規約通りにコードが書ける
- 自動同期：チームが skill を更新したら、全員が
git pullで最新版を取得できる - コードの一致：誰が書いてもコードのスタイルが高度に統一される
先月インターン生が入ってきましたが、2日目にはチームの規約に合ったコードを書けるようになっていました。以前なら少なくとも1週間のトレーニングが必要だったでしょう。
Skill と CLAUDE.md は最高の相棒
Skill のさらに強力な使い方は、プロジェクトルートの CLAUDE.md と組み合わせて使うことです。CLAUDE.md でプロジェクトのグローバルルールを定義します：
# プロジェクトコンテキスト
- 技術スタック：React 18 + TypeScript 5.0 + Vite 4
- コード規約：Airbnb ESLint ルール
- コミット規約：Conventional Commits
- 状態管理：Zustand（Redux は使用禁止）
## 重要な約束事
- すべてのコンポーネントには完全な TypeScript 型定義が必要
- API 呼び出しは src/utils/request.ts ラッパーに統一
- コンポーネントファイル名は PascalCase（例：UserProfile.tsx）
- ユーティリティ関数ファイル名は camelCase（例：formatDate.ts）
## ディレクトリ構造
src/
├── components/ # 共通コンポーネント
├── pages/ # ページコンポーネント
├── hooks/ # カスタム Hooks
├── utils/ # ユーティリティ関数
├── services/ # API サービス
└── stores/ # Zustand 状態管理そして skill 内でこれらのルールを参照します：
---
title: "Reactコンポーネントジェネレーター"
---
# コンポーネント生成指示
CLAUDE.md で定義された技術スタック、ディレクトリ構造、命名規則に厳密に従って React コンポーネントを生成してください。
生成されるコンポーネントは以下を満たす必要があります：
- TypeScript を使用
- プロジェクトの ESLint ルールに適合
- 正しいディレクトリに配置
- プロジェクトで定められた状態管理スキームを使用こうすることで、skill は自動的に CLAUDE.md の設定を読み込み、プロジェクトの規約に完全に適合したコードを生成します。新しいプロジェクトをクローンしても、skill はすぐに適応できます。
私の5つの必須 Skill
半年使って、私の skills ディレクトリには20以上の skill が溜まりました。最もよく使うものをいくつか紹介します：
1. テストケースジェネレーター（test-gen.md）
機能コードを書いた後に一番面倒なのがテストの追加です。この skill は関数のロジックを分析し、境界条件や異常系を含む単体テストを自動生成します。
効果：テストカバレッジが40%から85%に向上し、テスト記述時間が少なくとも半分になりました。
2. Gitコミットメッセージジェネレーター（commit-msg.md）
コミットのたびにメッセージを考えるのは脳の無駄遣いです。この skill は git diff の内容を分析し、Conventional Commits 規約に沿ったコミットメッセージを自動生成します。
出力例：
feat(user-auth): OAuth2.0ログイン機能を追加
- Google および GitHub サードパーティログインを統合
- JWT トークンリフレッシュメカニズムを追加
- ユーザー権限検証ミドルウェアを改善
Closes #123たった30行のコードですが、毎日使っている skill です。累積で数時間の節約になっています。
3. コードリファクタリングアシスタント（refactor.md）
古いコードを最適化したいがどこから手をつければいいかわからない時、この skill は：
- コードの不吉な臭い（Code Smell）を特定
- リファクタリングの優先順位付け
- ステップバイステップのリファクタリング計画を提供
- リファクタリング前後での機能の一貫性を保証
あの2000行の神クラスはこの skill に助けられました。
4. セキュリティレビュアー（security-audit.md）
コードのセキュリティ問題を専門にチェックします：
- SQL インジェクションリスク
- XSS 攻撃対策
- 機密情報の漏洩
- 権限検証の完全性
ある時、リリース直前にこの skill でスキャンしたところ、3つの潜在的なセキュリティ脆弱性が見つかり、冷や汗をかきました。
5. ドキュメントジェネレーター（doc-gen.md）
プロジェクトのドキュメントがコードより遅れていませんか？ この skill はコードに基づいて API ドキュメントを自動生成し、関数のコメントを抽出して Markdown を生成し、更新ログもメンテナンスしてくれます。
ドキュメント更新時間が2時間から10分に短縮され、「コードは変わったのにドキュメントが変わっていない」という事態は二度と起きなくなりました。
良い Skill を書く5つのコツ
半年間でまとめた skill 作成の経験則です：
1. Frontmatter を真面目に書く
あってもなくても良さそうに見えますが、title と description は skill リストに表示されます：
---
title: "フルスタックコードレビュー専門家"
description: "前後端のコードを審査し、セキュリティ、パフォーマンス、保守性に焦点を当てる"
version: "2.1.0"
tags: ["コードレビュー", "セキュリティ", "パフォーマンス"]
---version フィールドはバージョン管理に、tags は分類検索に便利です。
2. 役割定義を明確にする
「あなたは…の専門家です」という書き出しは非常に有効で、Claude Code が素早く役割になりきるのを助けます：
あなたは10年の経験を持つフルスタックエンジニアで、コードレビューとセキュリティ監査が得意です。単に「コードをレビューしてください」と言うよりずっと効果的です。
3. 対比例を使って説明する
✅と❌を使って良いコードと悪いコードを対比させると、Claude Code はより正確に理解します：
### SQLインジェクションリスク
❌ 危険な書き方：
\`\`\`javascript
const query = \`SELECT * FROM users WHERE id = \${userId}\`;
\`\`\`
✅ 安全な書き方：
\`\`\`javascript
const query = 'SELECT * FROM users WHERE id = ?';
db.query(query, [userId]);
\`\`\`4. 出力フォーマットを具体的にする
「アドバイスをください」ではなく、「以下のフォーマットで出力してください」と言いましょう：
## 出力フォーマット
### 🔴 深刻な問題（修正必須）
- [ファイル名:行番号] 問題の記述
- リスク説明
- 修正提案（コード例付き）
### 🟡 改善提案（推奨）
- [ファイル名:行番号] 問題の記述
- 改善理由
- 最適化案5. エラー処理ルールを加える
問題に遭遇した時の対処法を AI に教えます：
## エラー処理
以下の状況に遭遇した場合：
- コードの構文エラー：エラー箇所を指摘し、審査を継続しない
- ファイルにアクセス不可：パスを確認するようユーザーに促す
- コード量が多すぎる（>5000行）：分割審査を提案するよくある質問
Skill が多すぎて名前を覚えられない？
命名規則を活用しましょう：
review-*: コードレビュー系gen-*: コード生成系util-*: ツール系fix-*: 問題修正系
私の命名例：review-frontend.md、gen-api.md、util-commit.md
Skill の出力が長すぎて読みきれない？
skill 内に簡潔モードを追加しましょう：
デフォルトでは詳細モードを使用します。ユーザーが `--brief` パラメータを追加した場合、簡潔版を出力します：
- 問題リスト（1行につき1つ）
- 深刻度ラベル
- 主要な修正提案異なるプロジェクトで Skill の挙動が違う？
skill にコンテキストを能動的に要求させましょう：
## 分析の前提ステップ
開始する前に以下を行ってください：
1. package.json を読み込み、依存バージョンを把握する
2. tsconfig.json をチェックし、TS 設定を把握する
3. .eslintrc を確認し、コード規約を把握する
4. README.md をブラウズし、プロジェクトアーキテクチャを把握する最後に一言
Skill 機能を使って半年、私の開発効率は少なくとも40%向上しました。より重要なのは、多くの反復的な知的労働から解放され、アーキテクチャ設計やビジネスロジックなど、本当に思考が必要な部分に時間を使えるようになったことです。
もしあなたが今もプロンプトを手書きしているなら、以下をお勧めします：
- 今日から始める：コードレビューやテスト生成など、簡単な skill から始める
- 徐々に改善する：使うたびに改善点を見つけ、バージョンを更新する
- チーム共有：良い skill は良いツールライブラリと同じです、共有しましょう
- 継続的に学ぶ：公式ドキュメントの更新に注目しましょう。新機能で書き方が変わるかもしれません
最後に一つ心構えをシェアします：Skill の価値は複雑さにあるのではなく、実際の問題を解決することにあります。私の最も単純な commit-msg ジェネレーターは30行しかありませんが、毎日使っており、累積で数時間の節約になっています。
今から、毎日繰り返し入力しているプロンプトを skill に整理してみましょう。3ヶ月後、あなたは今日の自分に感謝することになるでしょう。
関連リソース
FAQ
Skill と Subagent の違いは何ですか？
• 再利用可能なプロンプトテンプレート
• .claude/skills/ ディレクトリに配置
• @skill で呼び出し
• より軽量で、よく使う操作のカプセル化に適している
Subagent：
• 独立した AI アシスタント
• .claude/agents/ ディレクトリに配置
• 独立したツール権限とモデル選択が可能
• より強力で、複雑なワークフローに適している
Skill にプロジェクト設定を自動的に読み込ませるには？
'CLAUDE.md で定義された技術スタック、ディレクトリ構造、命名規則に厳密に従ってコードを生成してください'
こうすることで、Claude Code は自動的にプロジェクトルートの CLAUDE.md 設定を読み込み、プロジェクトの規約に完全に適合したコードを生成します。
Skill ファイルには何を含めるべきですか？
1) Frontmatter（title、description、version）
2) 役割定義（'あなたは...の専門家です'）
3) 具体的なタスク記述
4) 出力フォーマット要件
5) コード規約または例
6) エラー処理ルール
対比例（✅/❌）を使うとより効果的です。
チームの Skill ライブラリをどう管理すればよいですか？
1) 独立した Git リポジトリ team-skills を作成し、フロントエンド、バックエンド、共通などで分類
2) チームメンバーはシンボリックリンク（ln -s）でローカルプロジェクトに接続
3) 更新時は git pull で最新バージョンを同期
これによりコードスタイルが統一され、新人もすぐ使えます。
Skill はワークフローと組み合わせて使用できますか？
複数の Skill を組み合わせてワークフローにできます。例えばリファクタリングフロー：
• @skill code-analyzer（問題分析）
• → @skill refactor-planner（計画策定）
• → @skill test-generator（テスト生成）
• → @skill code-reviewer（最終審査）
シェルスクリプトを書いて自動実行させることも可能です。
5 min read · 公開日: 2025年11月23日 · 更新日: 2026年1月22日
関連記事
Veo 3音声生成完全ガイド：AI動画に自動でセリフとBGMをつける方法（プロンプトテンプレート付き）
Veo 3音声生成完全ガイド：AI動画に自動でセリフとBGMをつける方法（プロンプトテンプレート付き）
Veo 3キャラクター一貫性完全ガイド：Scenebuilderで繋がりのあるマルチショット動画を作る
Veo 3キャラクター一貫性完全ガイド：Scenebuilderで繋がりのあるマルチショット動画を作る
Veo 3 Image to Video実践：Reference Imageで動画効果を精密に制御する
コメント
GitHubアカウントでログインしてコメントできます