ハンズオンガイドDay3 理想的なハーネスと、ハーネスの作り方

理想的なハーネスの設計

配布フォルダには、架空株式会社（フィクション）の在庫管理システム刷新のために、1つのプロジェクトでそろえるハーネスを全部入れてあります。顧客ヒアリングから保守運用までの10工程に、どのハーネスがどこで働くかを割り当てた形です。

ハーネスの種類ごとの違い

必須の演習では、同時に動くSubagentを1体までにしてあります。Subagentを3体並列に動かす/full-reviewは、利用量が増えるので発展だけで使います。

ハーネスの作り方と使い方

ハーネスは、4つの手で作れます。D3-2とD3-3で、3つ目と4つ目を試します。

公式の入手先

skill-creatorは、Apache License 2.0で公開されています。取り込んだSkillは、中身のSKILL.mdを読んでから使ってください。Skillにはスクリプトが入っていることがあり、承認の画面で何を動かそうとしているかを読む必要があるためです。

Skill の形

Skillは、SKILL.mdを1つ入れたフォルダです。.claude/skills/<名前>/SKILL.mdに置くとプロジェクトのSkill、~/.claude/skills/<名前>/SKILL.mdに置くと自分が開く全部のフォルダで使えるSkillになります。会話の途中で足しても、Claude Codeは起動し直さずに読み込みます。

---
name: meeting-actions
description: 会議のメモから、決まったことと宿題を抜き出し、担当と期限の表にする
---
# 会議のメモの整理

1. 決まったことを抜き出す
2. 宿題に担当と期限を付ける
3. 表にして保存する

Claudeはdescriptionを読んで、頼まれた内容に合うSkillを自分で選びます。頼むときに使う言葉をdescriptionに入れておくと、呼ばれやすくなります。

D3-3 skill-creatorでのSkill作成

この演習の [20min]は、必須のSTEP 1〜3の合計です。

ねらい

公式のskill-creatorをプロジェクトに取り込み、作りたいSkillを3行で伝えて、相談しながらSKILL.mdを作ります。作ったSkillを1回動かして、結果を保存します。

押さえること

3行の題材は、自分の業務でくり返している作業から選びます。思いつかないときは、別テーマ/かdata/のCSVを使うSkillにしてください。

できあがりの目安

• .claude/skills/skill-creator/SKILL.mdがある
• .claude/skills/<自分で決めた名前>/SKILL.mdがあり、STEP 2の3行の中身が手順に入っている
• 成果物/D3-3/に、作ったSkillを1回動かした結果がある

使うファイルと作るファイル

この演習は、1つの会話で最後まで進めます。STEPの文面は前のSTEPの続きとして送るので、途中で/clearを打たないでください。演習が変わったら、/clearで会話を空にしてから始めます。

STEP 1 skill-creatorの取り込み AIを開かない [4min]

2つ目のターミナルで、公式のリポジトリからskill-creatorを取り込みます。コマンドを1行ずつ打ってください。

2つ目のターミナルに打つコマンドコピー

cd ~/idcc-day3
curl -fsSL https://codeload.github.com/anthropics/skills/tar.gz/refs/heads/main -o /tmp/anthropic-skills.tgz
tar xzf /tmp/anthropic-skills.tgz -C /tmp
cp -r /tmp/skills-main/skills/skill-creator .claude/skills/
ls .claude/skills .claude/skills/skill-creator

最後のlsの結果に、skill-creatorとSKILL.mdが出れば取り込めています。Claude Codeは起動し直さずに、このSkillを読み込みます。

curlでエラーが出たときは、配布フォルダに入れてある写しを使います。2026年10月21日に公式から写したものです。

2つ目のターミナルに打つコマンドコピー

cp -r _予備/skill-creator .claude/skills/

Tipsskill-creatorは、Claude Codeのプラグインとしても入れられます。入れ方はhttps://code.claude.com/docs/en/discover-pluginsにあります。研修でフォルダに写す方法を使うのは、中身のファイルを目で読めるようにするためです。

STEP 2 3行での相談 [10min]

1. 作りたいSkillを3行で書きます。1行目に何を渡すか、2行目に何を作るか、3行目にどこへ保存するかを書きます。保存先は成果物/D3-3/にしてください。
2. Skillの名前を、英小文字とハイフンで決めます。
3. 次の文面の<ここに…>を埋めて送ります。

Claude に送る文面メモ帳で <ここに…> を埋めてから貼るコピー

/skill-creator 次の3行のSkillを作りたいです。名前は <ここに英小文字とハイフンの名前> にしてください。評価のテストとベンチマークは行わず、SKILL.mdを書いたら終えてください。
<ここに 1行目から3行目>

「評価のテストとベンチマークは行わず」の一文は消さないでください。skill-creatorは、Skillを作ったあとに、テストの会話を何本も並列に動かす手順を持っています。研修用の組織の利用量が大きく増えます。

skill-creatorが質問してきたら、答えを1文で返します。.claude/skills/<名前>/に書き込む前に承認の画面が出るので、保存先を読んでから1. Yesを選んでください。

3行の例を見る

CSVのファイルを渡すと、列ごとに中身と例を表にした説明を作る

例は、実際の値から1つずつ取る

説明は成果物/D3-3/<CSVの名前>_列の説明.mdに保存する

名前はcsv-columnsにした例です。自分の業務に近い題材があれば、そちらで作ってください。

STEP 3 Skillの1回の実行 [6min]

作ったSkillを、名前で呼んで1回動かします。

Claude に送る文面メモ帳で <ここに…> を埋めてから貼るコピー

/<ここに Skill の名前> <ここに渡すファイル>

結果が成果物/D3-3/に保存されたら、VS Codeで開いて、3行に書いたとおりの中身かを読みます。違うところがあれば、SKILL.mdを自分で1か所直します。

うまくいかないとき

早く終わった方へ

追加と考察

D3-2 とD3-3のSKILL.mdを並べて、descriptionの書き方を比べてください。3行の例で作ったcsv-columnsでは、skill-creatorが「〜の場合に使う」という呼ばれる条件までdescriptionに書き込みました。

発展課題

D3-3+作ったSkillをユーザー設定に置き、別のフォルダでも動かします。

mkdir -p ~/.claude/skills ~/d3-try
cp -r .claude/skills/<ここに Skill の名前> ~/.claude/skills/
cp 別テーマ/会議室.csv ~/d3-try/
cd ~/d3-try
claude

~/d3-tryで起動したClaude Codeで、/<名前> 会議室.csvを送り、Skillが呼べるかを確かめます。研修のPCは、ユーザーを共有していることがあります。確かめたら/exitで終え、ユーザー設定に置いたSkillを消してください。

rm -r ~/.claude/skills/<ここに Skill の名前>
cd ~/idcc-day3

D3-4 別テーマでの成果物づくり

この演習の [40min]は、必須のSTEP 1〜4の合計です。

ねらい

在庫管理のために作ったハーネスを、会議室予約という別のテーマにそのまま使います。要求の抽出、レビューの判断、試作品づくりをcommandの手順どおりに進め、条件4つと自分の工夫1つを入れた画面を作ります。

押さえること

成果物は人によって違って構いません。条件4つを満たしたうえで、どこを工夫したかをZoomのチャットに1行で添えます。

できあがりの目安

• 成果物/D3-4/01-requirements-review.mdのWARNが、判断を書き足した[確認済]になっている
• ブラウザでhttp://localhost:8000/成果物/D3-4/index.htmlを開くと、条件4つが動く
• 自分の工夫が1つ、画面に入っている
• 画面のスクリーンショットと工夫の1行が、Zoomのチャットにある

使うファイルと作るファイル

試作品の条件

試作品は、HTMLとJavaScriptの1ファイルで作ります。登録と取り消しは画面を開いている間だけ有効で、データのCSVは書き換えません。

この演習は、1つの会話で最後まで進めます。STEPの文面は前のSTEPの続きとして送るので、途中で/clearを打たないでください。演習が変わったら、/clearで会話を空にしてから始めます。

STEP 1 メモを読んで工夫を決める AIを開かない [5min]

1. VS Codeで別テーマ/ヒアリングメモ_会議室予約.mdを開き、16行目から36行目の発言を読みます。
2. 条件4つのもとになった発言がどの行かを探します。
3. 条件のほかに、自分が画面に加える工夫を1つ決め、1行のメモに書きます。メモの発言から選んでも、自分で考えても構いません。

STEP 2 要求の抽出から試作品まで [20min]

入力欄の下がaccept edits onになっていることを確かめてから送ります。終わるまでの目安は2〜3分です。

Claude に送る文面コピー

/extract-requirements 別テーマ/ヒアリングメモ_会議室予約.md 成果物/D3-4

報告にWARNが出ても、そのまま次の文面を送ります。<ここに…>は、STEP 1で決めた工夫に置き換えます。

Claude に送る文面メモ帳で <ここに…> を埋めてから貼るコピー

/build-prototype 成果物/D3-4/01-requirements-raw.md <ここに STEP 1 で決めた工夫>

レビューのWARNが残っているので、review_gate.pyのHookが送信を止めます。止められた送信では、モデルは呼ばれません。

1. VS Codeで成果物/D3-4/01-requirements-review.mdを開きます。
2. [WARN]の行を1件ずつ読み、行の終わりに「判断:」から始まる1文を書き足します。
3. 書き足した行の[WARN]を[確認済]に書き換えて保存します。[ERROR]があれば同じように扱います。
4. 入力欄で↑キーを押して、/build-prototypeの文面を呼び出し、もう一度送ります。

書き換えた行の形コピー

- [確認済] FR-005 （指摘の文はそのまま残す） 判断: 試作品では扱わない。次のヒアリングで確かめる

判断に迷った指摘は、上の形の「試作品では扱わない。次のヒアリングで確かめる」で構いません。全部を深く検討する時間はありません。

2回目の送信では、Claudeがindex.htmlを書き、code-reviewerが1回だけレビューします。ERRORはClaudeが直し、WARNとINFOは報告に出ます。こちらも、終わるまでの目安は2〜3分です。

STEP 3 ブラウザでの確かめ AIを開かない [8min]

2つ目のターミナルで、プロジェクトの直下からサーバを動かします。

2つ目のターミナルに打つコマンドコピー

cd ~/idcc-day3
python3 -m http.server 8000

Windowsのブラウザで次のURLを開きます。

ブラウザのアドレス欄コピー

http://localhost:8000/成果物/D3-4/index.html

試作品の条件の表を見ながら、4つを1つずつ画面で確かめます。終わる時刻と同じ時刻から始まる予約が登録できるかも、メモの24行目と照らして試してください。

動かない条件があれば、何が起きたかを1文でClaudeに伝えて直させます。2回伝えても直らなければ、Zoomのチャットで講師に知らせてください。

うまくいかないとき

早く終わった方へ

追加と考察

STEP 2 で[確認済]に書いた判断が、試作品のどこに反映されたかを見てください。index.htmlの画面の下にある要求IDの対応表で、入った要求と入らなかった要求が分かります。

発展課題

D3-4+ユーザー設定の~/.claude/CLAUDE.mdに自分の好みを書き、成果物の見た目が変わるかを見ます。

1. 2つ目のターミナルでcode ~/.claude/CLAUDE.mdを打ち、VS Codeでファイルを開きます。ファイルが無ければ、新しいファイルとして開きます。
2. 最後の行に、自分の好みを1行足して保存します。例は「画面は白い背景にし、色は紺の濃淡だけで作る」です。
3. Claude Codeで/exitを打って終え、claudeで起動し直します。CLAUDE.mdは起動のときに読まれるためです。
4. 下の文面を送り、元のindex.htmlと見比べます。

成果物/D3-4/index.html の見た目を、自分の好みに合わせて直し、成果物/D3-4/index_好み.html という別のファイルに保存してください。

研修のPCは、ユーザーを共有していることがあります。確かめたら、~/.claude/CLAUDE.mdに足した行を消して保存してください。