Skills活用ガイド
Claude Codeスキルで開発ワークフローを自動化
Skills活用ガイド
Claude Code Skillsとは何か、どう使うのか、そしてこのページも実際にスキルで作った実例
このページ自体が /new-page スキルで作られました！
Skillsとは？
⚡ ワンコマンドで定型作業を自動化
Skillsとは、よく使う作業をテンプレート化して、/スキル名 で呼び出せるようにする機能です。
毎回同じプロンプトを打つ必要がなくなり、チーム全体で統一された品質の作業ができるようになります。
例えばこのサイトでは、新しいページを追加するたびに「index.htmlと同じデザインで、背景アニメーションも入れて、サイドバーにリンクも追加して...」と毎回指示するのは面倒です。
Skillsを使えば、/new-page blue ページタイトル と打つだけで、統一デザインのページが自動生成されます。
デザインにバラつきが出る
サイドバー更新を忘れがち
/new-page だけで完了毎回同じ品質・体裁を保証
リンク追加まで全自動
/new-page スキルの使い方
このサイトで実際に使っているスキルを紹介します。Claude Codeのプロンプトで以下のように入力するだけです。
# 新しいページを作成
> /new-page blue Skills活用ガイド
これだけで、スキルが自動的に以下を実行します：
引数の説明
| 引数 | 説明 | 例 |
|---|---|---|
| 第1引数 | テーマカラー | blue |
| 第2引数以降 | ページタイトル | Skills活用ガイド |
💡 実際の活用例
このページ自体が /new-page blue Skills活用ガイド で作成されました。
スキルがindex.htmlのデザインパターンを読み取り、同じ体裁のページを自動生成しています。
カスタムスキルの作り方
自分だけのスキルを作るのは簡単です。プロジェクトの .claude/skills/ ディレクトリに SKILL.md を配置するだけです。
ディレクトリ構造
|-- .claude/
| |-- skills/
| | |-- new-page/
| | |-- SKILL.md <- スキル定義ファイル
SKILL.md の書き方
SKILL.mdにはフロントマターとスキルの手順を書きます。
---
name: my-skill
description: このスキルの説明文
argument-hint: [引数1] [引数2]
allowed-tools: Read, Write, Edit, Bash
---
ここにスキルの手順を自然言語で書きます。
## 手順
1. まず○○を確認する
2. ○○に基づいて処理する
3. 結果を出力する
💡 フロントマターの項目
| 項目 | 説明 | 例 |
|---|---|---|
name |
スキルの呼び出し名 | new-page |
description |
スキルの説明（/skills一覧に表示） | 既存デザインに合わせた新ページ作成 |
argument-hint |
引数のヒント（任意） | [カラー] [タイトル] |
allowed-tools |
使用を許可するツール | Read, Write, Bash |
⚠️ allowed-tools について
allowed-tools を指定しないと、スキル実行時にツール使用の許可を毎回求められます。
よく使うスキルには必要なツールを明示的に設定しましょう。
実例：/new-page スキルの定義
このページを作った /new-page スキルの実際の定義を見てみましょう。
---
name: new-page
description: このサイトの既存デザインに合わせた新しいHTMLページを作成する
argument-hint: [テーマカラー] [ページタイトル]
allowed-tools: Read, Write, Edit, Glob, Grep
---
既存ページと同じデザインで新しいHTMLページを作成してください。
## 手順
1. まず既存の index.html を読んでデザインパターンを把握する
2. 指定されたテーマカラーに合わせてCSSを調整
3. 以下を必ず含める：
- Tailwind CDN + Google Fonts
- 背景アニメーション、パーティクル
- プログレスバー、スクロールトップボタン
- .glass-card でコンテンツを囲む
- sidebar.js と footer.js の読み込み
4. sidebar.js にも新ページのリンクを追加
🎯 ポイント
スキルの手順は自然言語で書きます。プログラミング言語ではなく、日本語で「何をしてほしいか」を書くだけ。 Claude Codeがその指示を理解して、適切なツールを使い分けて実行してくれます。
自動でスキルを発動させる（TRIGGER）
通常、スキルは /スキル名 で手動呼び出しします。
しかし、特定の条件でスキルを自動発動させることもできます。
🔄 TRIGGER とは
description フィールドに
TRIGGER when: と DO NOT TRIGGER when: を書くと、
Claude Codeが条件に合致したとき自動的にスキルを実行してくれます。
書き方
---
name: html-checker
description: HTMLのアクセシビリティをチェック。TRIGGER when: HTMLファイルを作成・編集したとき。DO NOT TRIGGER when: HTMLに関係ない作業のとき。
---
HTMLファイルをチェックして...
/new-page のようにユーザーが明示的に呼び出す
タイミングを自分で決められる
Claude Codeが勝手に実行
呼び出し忘れがなくなる
TRIGGERの活用例
| スキル | TRIGGER when | DO NOT TRIGGER when |
|---|---|---|
| html-checker | HTMLファイルを作成・編集したとき | HTMLに関係ない作業のとき |
| test-runner | コードを実装・修正したとき | ドキュメントやREADMEの編集のとき |
| lint-fixer | JSやTSファイルを編集したとき | 設定ファイルのみの変更のとき |
⚠️ TRIGGER の注意点
DO NOT TRIGGER when: を必ずセットで書きましょう。
これがないと、関係ない作業でもスキルが発動してしまい、作業の邪魔になることがあります。