---
title: VSCodeではじめてのClaude_Codeスキル作り_講義資料
tags:  #ai #スキル  
author: [Yukiko](https://image.docswell.com/user/yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/PEXQ45NZJX.jpg?width=480
description: VSCodeではじめてのClaude_Codeスキル作り_講義資料 by Yukiko
published: August 27, 26
canonical: https://image.docswell.com/s/yukiko_it/K1QMVP-2026-08-27-085322
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/PEXQ45NZJX.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/3EK9Z6NVED.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/L73WD6ZQ75.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/87DKPVRWJG.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/VJPKNVWXE8.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/2EVVKZ83EQ.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/57GLQ45YEL.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/4EQYKGZ6JP.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/KJ4WP53M71.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/LE1Y9W1Y7G.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/GEWGQ681J2.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/47ZLWY8XJ3.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/YJ6WGDPPJV.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GJ5MV3KPJ4.jpg)

まとめ
コピペをやめて、 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