Day 5 — Skill 体験 + 自作

目的

Day 5 は Skill を体験する Day です。今日のキーワードは「借りる → 正体を知る → 自分で作る」。

Day 4 では Cowork で指揮者になり、自分の weekly_report.html（素朴なたたき台）を作りました。今日はそれを素材に、Skill という仕組みを学びます。

Skill は「永続化の階段」の 3 段目です。

Day 2 = Project（会話の中に前提を持たせる）
Day 3 = CLAUDE.md（フォルダの中に前提を持たせる）
Day 5 = Skill（システム全体に効く前提・手順を持たせる）

今日の前半の山場は、Day 4 で作った weekly_report.html の 中身は変えずに、見た目を一段上げる 体験です。

今日使う Claude の機能

今日は Code タブ一本 で進めます。

Code タブ: Claude Desktop の Code タブは、ターミナルの Claude Code と同じエンジンです。~/.claude/skills/ というフォルダを共有していて、ここに置いた Skill が効きます
Skill（Agent Skills）: 「いつ使うか（description）」と「どう振る舞うか（本文）」を書いた Markdown ファイル。条件に合うと Claude が自動で読み込んで発動します
skill-creator: Claude にデフォルトで入っている「Skill を作るための Skill」。質問に答えるだけでドラフトを作ってくれます

タブの違いに注意: Skill は Chat / Code / Cowork で同期しません。今日 Code タブに入れた Skill は「Code タブのどのフォルダ・どの会話からでも」効きますが、Chat タブには出てきません。今日は Code タブの中の話だと思ってください。

準備するもの

Day 4 で作った ~/weekly_report/weekly_report.html: 今日の素材です。Day 4 をやっていない / 手元に無い場合は、週報サイトの完成イメージをダウンロードして ~/weekly_report/ に置いて代用してください
講師から配布された SKILL.md（frontend-design 用）: 手順 2 で使います
Code タブが使える Claude Desktop（有料プラン）
skill-creator は デフォルトで入っている ので準備不要です

安全境界の再確認（Day 0）: この後で Skill 化するのは、生徒情報・実案件データを含まない 定型作業に限ります。

手順

今日は手順を 3 つのフェーズ に分けます。

フェーズ A（ステップ 1-3）借りる: 公式 Skill を迎え入れて、weekly_report を磨く
フェーズ B（ステップ 4）気づく: SKILL.md を開いて「ただの Markdown」だと知る
フェーズ C（ステップ 5-7）作る: skill-creator で自作 → 別フォルダでも効くことを確かめる

1. Code タブで `~/weekly_report/` を開く

Claude Desktop の Code タブ を開き、フォルダとして ~/weekly_report/（Day 4 の成果物フォルダ）を選択します。Day 4 をやっていない人は、完成サンプルを ~/weekly_report/ に置いて代用してください。

2. 公式 frontend-design Skill を「迎え入れる」

Skill のインストールは、~/.claude/skills/ の下に Skill 名のフォルダを作って SKILL.md を置くだけ です。

Finder で ~/.claude/skills/ を開きます（~ はホームフォルダ。.claude は隠しフォルダなので、Finder で Cmd + Shift + . を押すと表示されます。無ければ skills フォルダを作ります）
その中に frontend-design という名前のフォルダを作ります
講師から配布された SKILL.md を、~/.claude/skills/frontend-design/SKILL.md として保存します
Claude Desktop で会話を新しく開き直します（Skill の読み込み直しのため）

補足（予告）: 世の中には Skill を配布する「マーケットプレイス」もあり、+ ボタンの Plugins から入れられる端末もあります。今日は 確実に動く手動配置 で進めます。

3. weekly_report.html を frontend-design で磨く

Code タブで、次のように依頼します。

~/weekly_report/weekly_report.html の見た目を、プロのフロントエンドデザイナー品質に一段引き上げてください。
本文（テキスト）の意味は変えず、レイアウト・タイポグラフィ・配色・余白・視覚的な階層だけを整えてください。

frontend-design Skill の「いつ使うか」の説明にこの依頼が合致して、自動で発動 します。完成したらブラウザで開いて、Day 4 の素朴なたたき台と見比べてください。

観察ポイント: 「自分は細かいデザイン指示をほとんどしていないのに、プロっぽくなった」。これが Skill の力です。Skill が “デザインの考え方” を Claude に注入しています。

4. SKILL.md を開いて「正体」を知る

手順 2 で置いた ~/.claude/skills/frontend-design/SKILL.md を、Code タブのエディタで開いてみます。

あれだけの仕事をさせた正体は、ただの Markdown ファイル です。

先頭の frontmatter（name と description）: description が「いつこの Skill を使うか」を Claude に教えています。だから手順 3 で自動発動しました
その下の本文: 「どう振る舞うか」（デザインの考え方）を文章で書いてあるだけです

「強力な道具の中身が、読める Markdown だった」——この気づきが、次の「自分で作る」につながります。

5. skill-creator で自分の定型作業を Skill 化する

題材は worklog 依頼。Day 0 から毎日コピペしてきた、あのプロンプトです。これを Skill にして、毎回コピペしなくても呼び出せるようにします。

Code タブで、skill-creator に作ってもらいます。

worklog をまとめる作業を Skill にしたいです。
skill-creator を使って、評価やベンチマークはやらずに、ドラフト作成までをサッとやってください。
保存先は ~/.claude/skills/worklog/ にしてください。

この Skill にやってほしいこと:
- 「今日のこの会話を worklog にまとめて」と頼んだら、以下の 4 項目で下書きを出す
1. 今日やったこと
2. Claude が言ったが私が自分で確認していないこと
3. 私が承認した点 / 承認しなかった点
4. 気づき・疑問
- 事実だけを書き、推測や評価は含めない

skill-creator が いくつか質問してくる はずです。「何をする Skill か」「いつ使うか」などに答えていけば、ドラフトが出来上がります。

6. 出来た SKILL.md を確認・微調整する

~/.claude/skills/worklog/SKILL.md を開いて、中身を確認します。

frontend-design と同じ形のファイルが、自分用にできている はずです（手順 4 の気づきがここで回収されます）。

description に発火条件（例: 「worklog」「振り返り」「今日の作業をまとめる」などの言葉）が入っているか確認します
気になるところがあれば、手で直して構いません。Skill はただの Markdown なので、自分で編集できます

7. 別フォルダから呼び出して「システム全体で効く」を確かめる

weekly_report とは 別のフォルダ を Code タブで開きます（例: Day 3 で作った ~/claude_workbox/。無ければ ~/Downloads/ でも構いません）。そこで、こう頼みます。

今日のこの会話の作業を worklog にまとめて

別のフォルダなのに、さっき作った worklog Skill が効く ことを確認してください。

ここが今日の核心です。

Day 3 の CLAUDE.md は「そのフォルダだけ」の前提でした
Skill は「Code タブのどのフォルダ・どの会話からでも」効きます＝システム全体

正確に言うと: Skill が効くのは Code タブ（Claude Code）全体 です。Chat / Cowork タブとは同期しないので、「全タブ横断で使える」わけではありません。それでも「フォルダ単位（Day 3）→ システム全体（Day 5）」と、効く範囲が一段広がったことが分かります。

成果物 — worklog を残す

今日生まれたもの:

磨いた後の ~/weekly_report/weekly_report.html
~/.claude/skills/frontend-design/SKILL.md（迎え入れた公式 Skill）
~/.claude/skills/worklog/SKILL.md（自分で作った Skill）

加えて、自分の業務で Skill 化できそうなこと 3 つ を書き出してみてください（生徒情報・実案件データを含まないテンプレ作業に限ります）。

最後に worklog をまとめます。今日は、作ったばかりの worklog Skill を使ってもいいですし、下のプロンプトを使っても構いません。

WORKLOG PROMPT

Day 5 の作業を、以下の項目で worklog にまとめてください。

- frontend-design を入れて weekly_report の見た目が変わったところ
- SKILL.md を開いて気づいたこと（Skill の正体）
- worklog Skill を skill-creator で作ってみてどうだったか
- 別フォルダでも Skill が効いた体感（システム全体）
- 自分の業務で Skill 化できそうなこと 3 つ

次の Day へ

Day 6 では、これまで学んだ全部（Project / CLAUDE.md / Skill / Code タブ）を使う 総合演習 に入ります。

題材は 映像授業制作進捗トラッカー —— 他人が作った社内ツールです。これを Code タブで 読む → 計画 → 機能のバグを直す → Claude の「嘘」を見つける → 最後に frontend-design で外観を整える、という流れで進めます。

今日作った自作 Skill は、Day 7 の卒業課題で 活用・改良しても OK です。育てていきましょう。