Claude Codeの画面の右側に、レビュー中の差分が1チャンクずつ出ています。別のセッションでは、プロンプトの上にClaudeから頼まれたことが並ぶ帯も出しています。
どちらもClaude Code modsで自分用に作りました。
最近はClaude Codeのセッションを6つ以上同時に動かしています。コードを書く速さはもう十分で、詰まるのはいつも自分の番、つまり差分を読むときと、Claudeから頼まれたことに応えるときでした。その2か所を楽にするために作った画面の話です。
Claude Code modsとは
Claude Code modsは、Claude Codeの見た目と動きを変えられるプラグインです。JavaScriptかTypeScriptで書いた関数がClaude Codeの中で動き、会話の横にペインを開いたり、プロンプトの上に帯を置いたり、ツールの呼び出しに割り込んだりできます。hooksやskills、MCPサーバーと違って、画面に何かを描けるのはmodsだけです。詳しくは公式ドキュメントにまとまっています。
skillsやhooksと違って、画面を持てる
skillsやhooksはそれまでもかなり作り込んでいました。ただ、どれだけ作り込んでも、Claudeの返事は会話の中に文章で流れていきます。読み返したいものほど上へ流れて、スクロールして探すことになる。
modsを触って一番違うと感じたのは、情報を置いておく場所を持てることでした。流れていく文章ではなく、決まった位置に、いつも同じ形で出ている画面です。
レビュー中に、今どこを見ているのかわからなくなる
1つ目の不便はコードレビューでした。
AIがコードを書くようになって、レビューする機会がぐっと増えました。セッションごとに別のPRを開いて、複数のPRを同時にレビューすることもあります。レビューに使う時間が増えたぶん、その体験をよくしたいと思ったのが作り始めたきっかけです。
ターミナルで差分を追うのはつらいし、GitHubの画面もつらい。結局IDEで見たりGitHubで見たりを行ったり来たりしているうちに、今どこをレビューしているのかわからなくなっていました。
どのファイルから読むのがいいかも、毎回Claudeに提案してもらっていました。提案は役に立つのですが、それも会話の中に流れていくので、2ファイル目あたりで元の順番を見失います。
差分を1チャンクずつ見せるレビューペイン
そこで、レビューを伴走するskillと、それを表示するペインのmodを作りました。作りたいものをClaudeに話したら、最初に動く版は一瞬でできました。
Claude Codeにも差分まわりの機能はあります。/diff は変更を横に表示してくれますが、どこから読むかは自分で決めることになります。/code-review はAIがバグを探して指摘してくれますが、判断の主体はAIです。自分が欲しかったのはそのどちらでもなく、自分が判断するための読む順番と問いを出してくれるものでした。
skillはPRの差分を理解しやすい単位（チャンク）に分けて、読む順番を決めます。インターフェースの変更から先に、テストは後に、という具合です。
これはレイヤードアーキテクチャのプロジェクトで特によかったです。レイヤーが分かれていると、domain層から読んで、application層、infrastructure層、UIへと外側に向かって読みたい、という順番がはっきりしています。PRの差分をその順番に並べ替えてくれるので、いつも読みたい順に読めます。
レビューを始めると、まず全体のマップが出ます。
Claudeには、レビュアーではなく案内役をやってもらっています。lintや型のような機械的なチェックはAIに任せて、変更が意図に合っているか、設計がもっと単純にできないかといった判断は自分がする。Claudeはチャンクごとに、その判断に必要な文脈と問いを差し出すだけです。
プロンプトの上の帯には、レビュー対象のタイトルと進捗、それから next、back、done のボタンが出ます。読み終わったら next を押せば、次のチャンクに切り替わります。
ここまでに、10本以上のPRをこれで読みました。使ってみて変わったのは、迷子にならなくなったことです。今が全体の何番目のチャンクで、何を見ているのかが常に画面に出ているので、IDEとGitHubを行き来することもなくなりました。
ペインの差分が、git diffよりずっと見やすい
ペインには今のチャンクの差分が出ます。これがターミナルの git diff よりずっと見やすくて、作ってよかったと思った一番の点でした。
表示は自分の好みに合わせて作り込みました。
- 追加した行と消した行に背景色を付けて、どこが変わったのかが一目でわかるようにした
- 差分の下に、解説で参照した周辺のコード（呼び出し元など）を行番号付きで並べるようにした
- 帯のボタンで、unified（縦並び）と split（左右並び）を切り替えられるようにした
git diff は行頭の + と - の色だけで変更を見分けることになります。ペインなら行全体に色を塗れるので、書き換えた行は、消した行の赤と足した行の緑が上下に並んで、何がどう変わったのかがすぐ読めます。
変更の前後に何があるのかも、同じ画面で読めます。こういう見た目の好みを、言えばその場で反映してもらえるのもmodsのいいところです。
6つのセッションで、頼まれたことを見逃す
2つ目の不便は、Claudeからの頼まれごとでした。
セッションを6つ以上並べていると、それぞれで何を進めていたのか、会話の文章を遡って確かめることになります。それに加えて、Claudeが「動作確認をお願いします」「〇〇を設定してください」と自分に向けて書いた指示を、よく見逃していました。
見逃しやすいのには理由があって、ターミナルには強調の表現が太字くらいしかありません。長い返事の途中に書かれた頼みごとは、ほかの文章と見た目がほとんど変わらないんです。確認待ちで止まっているセッションに、しばらく気づかないこともありました。
「今やる」と「あとで」に分けた帯
そこで、Claudeが自分に頼んだことをプロンプトの上に出し続ける帯を作りました。
帯は「Your turn」（今やる）と「Later」（あとで）の2段です。確認や判断のように、自分が動かないと作業が進まないものは「Your turn」に入ります。後回しにした作業のように、今すぐではないものは「Later」に入ります。
「Later」はふだんは畳んであって、件数だけが見えています。クリックすると開いて、中身が並びます。各項目の「✓」を押せば完了になり、「今やる」を押せば「Your turn」に上がります。
登録するのはClaude自身です。Claudeに頼みごとをするときは、返事で頼むのと同時に帯へ登録するように、ルールとして書いてあります。返事をしただけでは消さず、頼んだことが済んだとわかったときに消す、というところまで決めてあります。
これで、セッションを切り替えたときに会話を遡らなくても、そのセッションが自分に何を求めているのかが帯を見ればわかるようになりました。
始め方と、おすすめの使い方
最後に、これからmodsを試す人向けに、自分が通った始め方と、使ってみてよかった使い方をまとめておきます。
自分が通った始め方
コードは自分で書いていません。作りたい画面をClaudeに話すと、Claude Codeに組み込まれた plugin-authoring というskillを使って、Claudeがmodを書いてくれます。必要なのはClaude Code v2.1.287以降です。
Claudeが書いたmodは、そのセッション専用のフォルダに置かれ、古くなると消されます。気に入ったmodは自分のフォルダ（自分の場合はdotfiles）にコピーしておくと、ほかのセッションでも使えます。手順の詳細は公式ドキュメントの作り方のページにあります。
modは自分の権限でそのまま動くコードなので、他人のmodを入れるときは、信頼できる作者のものだけにしておくのが安全です。
おすすめの使い方
自分で2つ作ってみて、こう使うといいと思ったことです。
- 小さな不便から始める: 「レビュー中に迷子になる」「頼まれたことを見逃す」くらいの、毎日ちょっとずつ困っていることが一番向いている
- 言葉で頼んで、使ってから削る: 最初から完璧な画面を考えなくていい。まず作ってもらって、使ってみて邪魔だと感じたものを削る
- skillと組み合わせる: レビューのペインは、差分を分けて解説するskillと、それを見せるmodの組み合わせ。考えるのはskill、見せるのはmodと分けると作りやすい
- 画面に出すのは、今の判断に要るものだけ: 帯は常に見えているぶん、情報を足すほどうるさくなる
不便は、自分で画面を作れば消せる
2つの画面を作って思うのは、Claude Codeの不便の多くは、自分の作業の仕方に合わせて画面を作れば消せるということです。
ツールの側に合わせて我慢していたことが、modsを使えば「こういう画面が欲しい」とClaudeに話すところから始められます。レビューのペインも帯も、作ったあとで実際に使い、邪魔だと感じたものを削る、という流れで今の形になりました。
ソースコードは載せてないよ。作り方はClaudeに話せば再現できるし、載せてもあんまり意味ないかなって。それより、何が不便で、何を画面に出して、何を削ったかのほうが、ほかの人の役に立つと思う。
どちらもまだ試している途中です。使いながら、また削ったり足したりしていくと思います。
複数のClaude Codeを並べて動かす話は、前にこちらでも書きました。
Claude Code並列管理TUIを自作したら、workmuxで全部できた話開発ツール