VSCodeではじめてのClaude_Codeスキル作り_講義資料

文系新人エンジニア向け ｜ 図解でわかる VSCodeではじめての Claude Codeスキル作り 「毎回同じ指示をコピペしている」を卒業する、Why・What・Howで学ぶ実践ガイド 指示 うさうさ研修工房 Skill 自動化

AGENDA Why・What・Howで学ぶ道のり 01 02 03 04 Why なぜSkillが必要なのか（コピペ地獄・CLAUDE.md肥大化問題） What Skillとは何か（SKILL.mdの構造・置き場所・frontmatter） How はじめてのSkill作成ハンズオン 学び方 段階的学習ロードマップとつまずき対策 VSCodeではじめてのClaude Codeスキル作り 2

WHY ｜ なぜ学ぶのか 「また同じ指示を貼り付けている …」 月曜日 火曜日 水曜日 「変更点をレビューして」 「変更点をレビューして」 「変更点をレビューして」 とチャットに貼り付け とチャットに貼り付け とチャットに貼り付け この繰り返しが積み重なると … 同じ指示を書く手間が毎回かかる 人によって指示の書き方がバラつく CLAUDE.mdに手順を書き足すと、ファイルがどんどん長くなり扱いにくくなる VSCodeではじめてのClaude Codeスキル作り 3

WHY ｜ なぜ学ぶのか 解決策：よく使う指示を「 Skill」に切り出す Before：コピペ運用 After：Skill運用 毎回チャットに指示を貼り付ける SKILL.mdに1回書けば/名前で呼べる CLAUDE.mdに書き足して肥大化 本体は軽いまま、詳細は別ファイルへ 普段から常にコンテキストを消費 使うときだけ読み込まれる VSCodeではじめてのClaude Codeスキル作り 4

WHAT ｜ 何であるか SKILL.mdの構造： 2つのパーツ --- frontmatter description: いつ使うか --- いつ使うかをClaudeに伝える部分。descriptionが最重要 ## Instructions 本文（指示） （ここに具体的な指示を書く） 実際にClaudeが実行する具体的な手順・指示 VSCodeではじめてのClaude Codeスキル作り 5

WHAT ｜ 何であるか Skillの置き場所は 2種類 個人用 プロジェクト用 ~/.claude/skills/ .claude/skills/ <skill-name>/SKILL.md <skill-name>/SKILL.md 自分の全プロジェクトで使える そのプロジェクトだけで使える ポイント：ディレクトリ名がそのままコマンド名（/skill-name）になる。 VSCodeではじめてのClaude Codeスキル作り 6

WHAT ｜ 何であるか 覚えておきたい 4つのfrontmatterフィールド description disable-model-invocation いつ使うかをClaudeに伝える最重要フィールド true で人間だけが呼べる。副作用がある操作向け user-invocable allowed-tools false でClaudeだけが使う背景知識向け VSCodeではじめてのClaude Codeスキル作り そのターン中、確認なしで使えるツールを指定 7

WHAT ｜ 何であるか 必要なときだけ読み込まれる仕組み いつも descriptionだけを把握 （軽い） VSCodeではじめてのClaude Codeスキル作り 使う時 必要なら SKILL.md本体を読み込む references/を追加で読む 8

HOW ｜ どう作るか ハンズオン：はじめての Skillを作る 題材：gitの未コミット差分を要約し、リスクを指摘してくれるSkill ステップ1：ディレクトリを作る mkdir -p ~/.claude/skills/summarize-changes ステップ 2：SKILL.mdを書く --description: Summarizes uncommitted changes and flags anything risky. Use when the user asks what changed. --- ## Current changes !`git diff HEAD` ## Instructions Summarize the changes, then list any risks you notice. VSCodeではじめてのClaude Codeスキル作り 9

HOW ｜ どう作るか 「!`git diff HEAD`」で今の差分を渡す SKILL.md内の !`git diff HEAD` Claude Codeが コマンドを実行 出力に置き換わり Claudeに渡る これは「動的コンテキスト注入」と呼ばれる機能です。Claude Codeがこのコマンドを実行し、その出力に置き換えてからClaudeに渡します。Claudeは常に 「今の差分」を見た状態で要約を始められます。 VSCodeではじめてのClaude Codeスキル作り 10

HOW ｜ どう作るか ステップ 3：動かしてみる 1 2 3 gitプロジェクトを開き claudeコマンドで 自然な聞き方、または 何か1行編集する Claude Codeを起動する /summarize-changesで呼ぶ どちらの呼び出し方でも、変更内容の要約とリスクの一覧が返ってきます。 VSCodeではじめてのClaude Codeスキル作り 11

学び方 段階的学習ロードマップ ① 読む ② 真似る ③ 絞る ④ 育てる 公式サンプルを動かし 構造を目で確認 自分の指示を1つ そのままSkill化 descriptionを具体化し 誤発動を防ぐ references/を追加し 本体を軽く保つ ①②を飛ばして④を目指すと、AIの提案の正しさを自分で判断できず、誤りに気づけないまま採用してしまうリスクが高まります。 VSCodeではじめてのClaude Codeスキル作り 12

つまずき回避 よくある失敗と対策 対策 Skillが発動しない descriptionにユーザーが自然に言いそうなキーワードが入っているか確認する 対策 発動しすぎる descriptionをより具体的にする、またはdisable-model-invocation: trueを検討する 対策 SKILL.mdが肥大化する 500行を目安に、詳細はreferences/へ切り出す VSCodeではじめてのClaude Codeスキル作り 13

まとめ コピペをやめて、 Skillに任せる Skillは「毎回貼り付けている指示」を切り出す仕組み SKILL.mdはfrontmatter（いつ使うか）＋指示文（何をするか）の2部構成 まずは公式サンプルを動かし、自分の指示を1つだけSkill化する 副作用のある操作にはdisable-model-invocation: trueを付ける 出典：Anthropic「Extend Claude with skills」Claude Code Docs（code.claude.com/docs/en/skills） VSCodeではじめてのClaude Codeスキル作り 14