Claude Code 入門

Transcript

1. CLAUDE CODE Claude Mods 入門 nogu (@_nogu66)
2. 自己紹介 nogu (@_nogu66) 書いた記事 完全版 Claude Mods 入門 Mods で作る価値とは？ Zenn ｜ zenn.dev/nogu66 X ｜ x.com/_nogu66 作った mod md-prompt marp-preview github.com/nogu66/md-prompt github.com/nogu66/marp-preview
3. Claude Mods とは Claude Code の中で動くプラグイン。JS / TS の hooks モジュール1つで、Claude Code を自分仕様にできる    見せる 挙動を変える 操作する ペイン・帯・ ツール呼び出しや 独自の /command や トースト・ステータスライン プロンプトに割り込む ツールを足す CLI（ターミナル）でもデスクトップアプリ（Code タブ）でも動く v2.1.287 以降
4. できること ① 画面に描く Claude Code の画面の4か所に、自分の UI を足せる claude > ログイン画面のバグを直して D トースト 132 秒かかりました A ペイン • Read(src/login.ts) Tool calls • Bash(npm test) done Read done Bash done Grep runs Edit B 帯 前回のターン: 42秒・ツール 8 回 > C ステータスライン ⎇ main · ツール 12 回 · ✓ テスト成功 ペインと帯はターミナルでもデスクトップアプリでも表示。一部の表示はターミナルのみ
5. できること ② イベントに介入する Claude Code の動きを途中で受け取り、止める・書き換える・反応する    ツール呼び出し プロンプト コマンド 実行の前にブロック・ 送信された 独自の 書き換え・確認 プロンプトに反応 /command を追加  Mod はあなたの権限で動き、サンドボックス化されない。信頼できるものだけ入れる
6. 作り方 ① Claude に頼む 「どこに出すか」と「いつ動くか」を一文に入れると、一発で通りやすい > /plugin-authoring ← mod 作り専用のスキルを読み込む > プロンプトの上に、今の git ブランチを常に表示する mod を作って > ファイルを編集するたびに、横のペインにファイル名を並べて > ターンが終わったら、かかった秒数をトーストで出して ▪ どこに出すか ▪ いつ動くか 1. 頼む 2. 許可する 3. 有効にする 4. 直す スキルを読み込んで一 文で ファイル作成を承認 すぐ画面に反映 「ここを変えて」
7. 作り方 ② 3ファイルで手書き ふつうのプラグインに hooks.json を足すと mod になる フォルダ構成 hooks/hooks.json first-mod/ { ├── .claude-plugin/ │ └── plugin.json "modules": ["./register.js"] ← 名前など } └── hooks/ ├── hooks.json ← コードの場所 └── register.js ← 本体 modules キーがあると mod として読み込まれる
8. 作って、直すループ 保存するとすぐ再読み込み。90分で何周も回せる Terminal $ claude --plugin-dir ./first-mod 読み込んで起動 $ claude plugin validate ./first-mod 中身をチェック ビルド不要 直すのも Claude に JS / TS をそのまま読む。保存で自動再読み込み 「色を変えて」と頼めば、終わった瞬間に反映
9. 動かないときは 上から順に見れば、だいたい原因がわかる 1 読み込まれているか 2 イベント名は合っているか 3 その画面で出せる表示か /plugin の Installed タブに名前が出ているか見る claude plugin validate で、フックしているイベントの一覧を見る ペインと帯はどこでも出る。一部の表示はターミナルだけ
10. 具体例 ① ② 表示するパターン いつも見たい情報を、画面に出しっぱなしにする 例① プロンプト上の帯 例② ペイン git ブランチ表示 変更ファイル一覧 今いるブランチを、プロンプトの上に常に表示 Claude が編集したファイルを、横のペインに並 べる M src/app.ts ⎇ feature/mods-lt A docs/mods.md
11. 具体例 ③ ④ 介入するパターン Claude の動きに割り込んで、確認や集計をする 例③ ツール呼び出しに介入 例④ コマンドを追加 編集前レビュー ツール呼び出しカウンター 大事なファイルを編集する前に、確認を挟む スピナーの横に回数を出し、/tally で集計 release-settings.json > /tally を編集しますか？ 42 tool calls
12. まとめ Claude Code を自分の道具に作り変えるプラグイン 画面に描けて、動きに割り込める 欲しいものは、Claude に頼めば作ってくれる 迷ったら、/plugin-authoring or 公式ドキュメント 時間の都合で紹介しきれなかった情報は、こちらにまとめています noguchy.me/claude-mods