Claude Code Skills 勉強会 (DevelersIO向けに調整済み) / claude code skills for devio

Transcript

1. Claude Code Skills 勉強会 (※DevelopersIO向けにアレンジ済み) 川原征大(kawahara-masahiro) 2026-03-09 1
2. 目次 勉強会の目的 スキルの概要 スキルのデモ ※社外向けにアレンジ済み スキルの仕様 スキル活用のTips ハンズオン ※社外向けにアレンジ済み おわりに 参考リンク 2
3. 勉強会の目的 勉強会の背景やゴール、アジェンダを連携します。 3
4. 背景 がアツいです🔥 Claude Code (AIエージェント)の動きを 自分好みにカスタマイズ で きる拡張機能 手軽に作れて、手軽に共有できます Skills 4
5. この勉強会のゴール 参加者全員が Skills をセットアップ して、基本的な使い方を理解する 普段の業務での活用方法を参加者全員で探索 する 参加者の知見やアウトプットを引き出す 「自分はこういうのやってます」的なコメント大歓迎です！ 5
6. 期待する成果 この時間: Skills のセットアップ完了 + 基本的な使い方の理解 今後(短期): 日常業務で Skills を使った効率化を試す人が増える 今後(長期): チーム内での活用事例・ベストプラクティス・スタンダー ドが蓄積されていく 6
7. 今日の流れ 座学/デモ スキルの概要 デモ: スキルの自動発火 スキルの仕組み 活用のTips ハンズオン 実際に Skills を動かしてみる 7
8. スキルの概要 スキルの概要とフォルダ構成を理解します。 8
9. スキルの定義 以下、公式の定義です。 エージェントに新しい機能と専門知識を与えるため の、シンプルでオープンなフォーマット。 Agent Skills は、エージェントが発見して使用でき る指示、スクリプト、リソースのフォルダです。 こ れにより、エージェントはタスクをより正確かつ効 率的に実行できます。 – Overview - Agent Skills 9
10. スキルのポイント ポイントは フォルダ であることです。 指示（ SKILL.md ）だけでなく、スクリプトやリファレンスもまとめ て置ける エージェントが使うべきスキルを 自動で発見 し、指示に沿って進め つつ、 フォルダ内のスクリプトやリファレンスを適宜活用してくれる 10
11. スキルの変遷 もともと Anthropic が Claude Code 向けに開発した仕組みです。 Anthropic がオープン標準としてリリース 現在は Claude Code 以外のエージェント製品にも採用が広がってい る エコシステム全体からの貢献を受け付けている つまり、Claude Code 専用の仕組みではなく エージェント共通のスキル フォーマット になりつつあります。 11
12. スキルのフォルダ構成 スキルのフォルダ構成は以下のようなものです。 SKILL.md のみ必須です。 (= SKILL.md だけでもOK ) my-skill/ ├── SKILL.md # 必須: 指示 + メタデータ ├── scripts/ # 任意: スクリプト ├── references/ # 任意: リファレンス └── assets/ # 任意: テンプレートやリソース 12
13. スキルのデモ ※社外向けにアレンジ済み ドキュメントテンプレート集スキル※ を例に、自動発火を見てみます。 📝 Note ※チーム向けのドキュメントテンプレート集スキルです。 「手順書を書いて」等の依頼で自動発火するよう設定されています。 13
14. 入力: 雑なメモ # S3バケット作る - マネコンからやる - バケット名はプロジェクト名-env-用途 みたいにする - リージョンは東京 - パブリックアクセスは全ブロック - バージョニングは有効にしとく ... 14
15. Claude Code に依頼 > rough-notes.md を手順書にして 15
16. 何が起きるか 1. SKILL.md の description 基準でスキル発火 2. SKILL.md 本文を読み込み 3. リファレンスにあるテンプレートファイルを読み込み 4. テンプレートに沿った手順書を生成 16
17. 参考: スキルのフォルダ構成 .claude/skills/doc-templates/ ├── SKILL.md └── templates/ ├── how-to/ │ ├── README.md │ └── template.md ├── concept/ ├── troubleshooting/ └── ... 17
18. スキルの仕様 デモで見た挙動を、改めて仕組みの面から見ていきます。 18
19. SKILL.md の中身 先頭のフロントマターに name (スキル名) と description (いつ使うか) を書きます。 本文には Markdown で自由に指示を書きます。 --- name: my-skill description: このスキルの説明。Claudeがいつ使うべきかも書く。 --- # ここに自然言語で指示を書く 19
20. スキルの動作 スキルは 段階的な情報開示 (Progressive Disclosure) で動きます。 1. まず全スキルの name / description だけを確認（軽量） 2. 関連ありと判断したスキルの SKILL.md 本文をロード 3. 必要に応じて references/ 等の追加ファイルを読み込み 全スキルを最初から読み込むのではなく 必要なときに必要なものだけ 読 みます。 コンテキストウィンドウを圧迫しないのがポイントです。 20
21. 補足: スキルの置き場所 ユーザースコープとプロジェクトスコープがあります。 スコープ パス ユーザー ~/.claude/skills/<skill-name>/SKILL.md プロジェクト .claude/skills/<skill-name>/SKILL.md 21
22. 補足: スラッシュコマンドとの関係 もともと Claude Code には /command : スラッシュコマンドがありまし た。 .claude/commands/<name>.md に Markdown で指示を書く仕組みで す。 スラッシュコマンドの 実態はスキル です (そうなりました) 。 出典: https://code.claude.com/docs/ja/skills 22
23. スキル活用のTips スキルを作る・育てるときに役立つポイントを紹介します。 23
24. SKILL.md は 500 行以下に保つ 出典: SKILL.md はスキルの エントリーポイント です。 概要やナビゲーション としましょう。 詳細は references/ 等に分割します。 https://code.claude.com/docs/ja/skills my-skill/ ├── SKILL.md # 概要 + ナビゲーション ├── references/ # 詳細リファレンス ├── examples.md # 使用例 └── scripts/ └── helper.sh 24
25. context: fork でサブエージェント実行 frontmatter に context: fork を付けると、スキルがサブエージェントと して隔離実行されます。 メインの会話コンテキストを汚しません。 25
26. context:fork 活用例 出典: --- name: deep-research description: Research a topic thoroughly context: fork agent: Explore --- Research $ARGUMENTS thoroughly: 1. Find relevant files using Glob and Grep 2. Read and analyze the code 3. Summarize findings with specific file references code.claude - スキルをサブエージェントで実行する 26
27. Tips: サブエージェントとは？ 特定のタスクを処理する特化した AI アシスタント。 独自のコンテキスト ウィンドウ で実行され、メインの会話履歴にはアクセスしない。 完了 後、結果だけがメイン会話に返される。 — Sub-agents - Claude Code 公式ドキュメント 27
28. スキルが発火しないとき description を見直しましょう。Claude が「いつ使うべきか」を判断で きる記述になっていますか？ それでもうまく行かない場合、最終手段は 手動実行 です。 /skill-name でスラッシュコマンドとして直接実行 例: /fix-issue 123 28
29. セキュリティに注意 スキルの入手元は信頼できるソースに限定しましょう。 自作 のスキル 社内 で管理・レビューされたスキル 信頼できる公開スキル（例: ） 第三者のスキルを使う場合は スキルの中身をすべて確認 してください （SKILL.md、スクリプト、リファレンス等） 。 判断できない場合は使わ ない。 参考: anthropics/claude-code-skills あなたの拾ってきた野良（マーケット）Skills、セキュリティト ラブルを発生させていませんか？ - Zenn 29
30. スキルを作るスキル 公式の を導入すると、スキルの作成・改善を対話的に進め られます。 skill-creator > /skill-creator ⏺ スキルクリエイターへようこそ！ 1. 新しいスキルを作成したい 2. 既存のスキルを改善したい 3. スキルのテスト・評価を実行したい 4. スキルの説明文（トリガー）を最適化したい 30
31. 他の仕組みとの使い分け Skills は CLAUDE.md や MCP、サブエージェントとの使い分けは？ 出典: Claude Agent Skills Explained - YouTube 31
32. Skills vs CLAUDE.md Skills CLAUDE.md 役割 専門的なタスクの 「実行方 法」 を教える プロジェクト固有の情報 を Claudeに伝える スコ ープ どのプロジェクトでも使える ポータブルな専門知識 特定リポジトリに紐づく（技術ス タック、規約等） 32
33. Skills vs MCP Servers Skills MCP Servers 役 割 データを 「どう扱うべきか」 を教える 外部データソースへの 「接続」 を提供 例 クエリ最適化パターンを教える GitHubやDBへのアクセスを可 能にする 33
34. Skills vs Subagents Skills Subagents 性 質 ポータブルな専門知識 独自コンテキストを持つ 特化型AIアシ スタント 特 徴 どのエージェントでも使 用可能 固定の役割（FE開発者、UIレビュアー 等） 34
35. ハンズオン ※社外向けにアレンジ済み 実際にスキルを使って提案書を作成してみます。 35
36. 事前準備 Claude Code がインストール済みであることを前提とします。 ハンズオンでは proposal-creation-toolkit プラグインを使います。 事前 にマーケットプレイスの登録とプラグインのインストールをお願いしま す。 スライド生成(marp-cli) の準備は任意です。 36
37. マーケットプレイス登録 + プラグイン導入 1. Claude Code で /plugin を実行 2. "Marketplace → Add marketplace" を選択 3. （事前に共有したマーケットプレイスURL）を入力 4. プラグイン一覧から proposal-creation-toolkit を選択してインスト ール 37
38. (任意) marp-cli の準備 Marp スライド生成まで体験する場合は も実行できるようにし てください。 marp-cli # pnpm dlx: パッケージを一時的にダウンロードして実行（npx 相当） pnpm dlx @marp-team/marp-cli --version 38
39. ハンズオン概要 proposal-creation-toolkit プラグインで 議事録から提案書を自動生成 し ます。 議事録 (meeting-memo.md) ↓ /create-proposal ← 全員 提案書マークダウン ↓ /marp-from-proposal ← optional Marp スライド (.md) + 画像 ↓ marp-cli プレゼンテーション (HTML) 39
40. ハンズオン手順 40
41. Step 1: リポジトリをクローンして開く ハンズオン用リポジトリをクローンし、Claude Code で開きます。 ファイル構成: git clone <ハンズオン用リポジトリURL> cd handson-repo claude handson-repo/ ├── meeting-memo.md ← 議事録（サンプル） └── themes/ └── custom.css ← Marp テーマ 41
42. [ハンズオンでの推奨] モデルを Default (Sonnet) に設定すると応答が速くなります。 /model → 1. Default (recommended) を選択 42
43. Step 2: 提案書を生成する Claude Code で以下を入力します。 /create-proposal @meeting-memo.md 43
44. Step 3: ヒアリングに回答する Claude が 選択肢形式で質問します。番号で回答してください。 44
45. Step 4: 構成案を確認・承認する Claude が目次案を提示します。内容を確認し「はい」と回答すると生成 が始まります。 生成されるファイル: proposal.md ← 提案書マークダウン 45
46. (任意) Step 5: Marp スライドを生成する （関連） も参照。 生成されるファイル: Claude CodeとNano Banana Proで議事録から提案書スライド を自動生成してみた /marp-from-proposal @proposal.md proposal_marp.md ← Marp スライド images/ ← 図（自動生成） 46
47. (任意) Step 6: プレビューする marp-cli でスライドを HTML 出力して確認します。 pnpm dlx @marp-team/marp-cli proposal_marp.md --theme themes/cus # PDF出力する場合 pnpm dlx @marp-team/marp-cli proposal_marp.md --theme themes/cus 47
48. (時間が余った人向け) Skill Creator を試す 時間が余った方は、公式の を試してみましょう。 スキルの 作成・改善を対話的に進められます。 /plugin → Discover タブで skill-creator を検索してインストール: skill-creator 48
49. インストール後: 普段の業務で効率化したい作業があれば、スキル化できないか試してみて ください。 /skill-creator 49
50. おわりに 以下、今回話したことです。 スキルの概要 : 定義・フォルダ構成 スキルのデモ : カスタムスキルの自動発火体験 スキルの仕様 : SKILL.md・段階的情報開示 スキル活用のTips : 他の仕組み（CLAUDE.md / MCP / Subagents）との使い分け ハンズオン : proposal-creation-toolkit で議事録→提案書→スライド 生成 50
51. 参考リンク さらに学びたい方向けのリソース集です。 Skills - Claude Code 公式ドキュメント Overview - Agent Skills（オープン標準仕様） What are Skills? - Claude サポート記事 51