0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Claude Code のプロンプト欄の上に「テンプレートボタン」を置く mod を作った ― 数字キー1つで定型プロンプトを挿入 ⌨️

0
Posted at

はじめに 📝

Claude Code を毎日使っていると、「直前の変更をレビューして」「このコードを説明して」「この不具合を調べて直して」のような 毎回ほぼ同じプロンプト を何度も打つことになります。

スラッシュコマンドやスキルにする手もありますが、その場で少し書き換えてから送りたい ことも多いですよね。そこで、Claude Code の mod(function hooks プラグイン)として、プロンプト入力欄のすぐ上にテンプレートのボタンを並べ、数字キーで挿入できる ようにする mod を作りました。

👉 リポジトリ: NaokiIshimura/claude-code-mod-prompt-templates

こんな感じで、プロンプト欄の上にボタンが並びます 👇

プロンプト欄の上に並んだテンプレートボタン

テンプレートは Markdown ファイル1つで定義できます。

~/.claude/prompt-templates/review.md
---
label: review
mode: replace
order: 1
---
直前の変更をレビューしてください。次の観点で、問題があれば該当箇所と修正案を示してください。
- バグ・境界値
- 可読性・命名
- パフォーマンス
- テストの不足
# mod を読み込んで起動するだけ
claude --plugin-dir ~/cc-mods-prompts

3行まとめ ✨

  • Claude Code の プロンプト欄の上にテンプレートボタンの行 を表示し、1〜9 の数字キーで定型プロンプトを挿入できる mod
  • テンプレートは 挿入されるだけで送信はされない ので、内容を確認・編集してから送れる
  • テンプレートは ~/.claude/prompt-templates/*.md(全プロジェクト共通)や <project>/.claude/prompt-templates/*.md(プロジェクト専用)に Markdown で置くだけ

🧩 どんな mod なのか

ボタンを押すとプロンプトに挿入される

プロンプトが空の状態で 1 を押すと、1番目のテンプレートがプロンプトに挿入されます。プロンプトが空ではなくなったので、行の末尾のヒント表示も切り替わります。

テンプレートがプロンプトに挿入された状態

ポイントは 「挿入するだけで送信しない」 ことです。テンプレートをベースに、対象のファイル名や不具合の症状などを書き足してから Enter で送れます。

状況に応じた操作方法

状況 操作 行末のヒント
プロンプトが空 数字キーを押す (press a number on an empty prompt)
プロンプトに下書きがある ctrl+x → tab でボタンにフォーカスし、数字キー(Esc でプロンプトに戻る) (focus buttons: ctrl + x > tab)
フルスクリーンのターミナル / デスクトップアプリ ボタンをクリックしてもOK (ヒントなし)

そのほかの細かい挙動は次のとおりです。

  • 先頭の9個のテンプレートに 1〜9 が割り当てられ、10個以上あるときは 0: More… から一覧を開いて選べる
  • /tpl-bar でボタン行の表示・非表示を切り替えられる
  • モデルが応答中でもテンプレートを挿入できる ので、待ち時間に次の指示を準備できる
  • メイン画面のターミナル(tmux 内など)ではクリックが Claude Code に届かないので、キー操作を使う

スラッシュコマンドでも使える

ボタンが表示されない環境(VS Code 拡張やモバイル)や、ボタン行を非表示にしているときは、コマンドからも使えます。

コマンド 内容
/tpl <name> テンプレートを挿入(キー → ラベルの順に一致を探す。大文字小文字は区別しない)
/tpl テンプレートの一覧を開く
/tpl-bar ボタン行の表示・非表示を切り替える
/tpl-reload テンプレートを再読み込み(ファイルを追加・変更したとき)

🚀 インストール

1. 必要なもの

  • Claude Code 2.1.287 以降(claude --version で確認)

mod の API はアーリーアクセスの段階で、今後のリリースで変更される可能性があります。動作確認は Claude Code 2.1.287 で行っています。

2. mod を取得する

好きな場所にクローンします。ここでは ~/cc-mods-prompts に置く例で説明します。

git clone https://github.com/NaokiIshimura/claude-code-mod-prompt-templates.git ~/cc-mods-prompts

3. mod を読み込む

mod はフォルダ単位で読み込まれます。次のどちらかを選んでください。

方法A: そのセッションだけで使う

起動時にフォルダを渡すだけです。マシンの設定を何も変えないので、お試しにはこれが一番手軽です。

claude --plugin-dir ~/cc-mods-prompts

方法B: すべてのセッションで使う

~/.claude/settings.json の env にフォルダを追加して、Claude Code を再起動します。デスクトップアプリのようにフラグを渡せないセッションでも使えます。

~/.claude/settings.json
{
  "env": {
    "CLAUDE_CODE_PLUGIN_DIRS": "/Users/you/cc-mods-prompts"
  }
}
  • 絶対パスで指定する(~ も使える)
  • 複数の mod を読み込むときは : 区切り(Windows では ;)
  • すでに env ブロックがある場合は、そこに1行追加する

4. テンプレートを追加する

リポジトリにはサンプルのテンプレート(review / explain / bugfix)が日本語版・英語版の両方で入っています。まずは日本語版をコピーして使ってみましょう。

mkdir -p ~/.claude/prompt-templates
cp ~/cc-mods-prompts/examples/prompt-templates/ja/*.md ~/.claude/prompt-templates/

5. 動作確認

Claude Code を起動すると、プロンプト欄のすぐ上に Templates: 1: review 2: explain 3: bugfix のような行が表示されます。/tpl-reload を実行して Loaded 3 templates と返ってくればOKです 🎉

行が表示されないときは、claude --debug で起動し、デバッグログの中で prompt-templates を含む行を探してみてください。

更新はフォルダで git pull するだけです。実行中のインタラクティブセッションは、mod のファイルが変わると自動で再読み込みします。
アンインストールは --plugin-dir を渡すのをやめるか、CLAUDE_CODE_PLUGIN_DIRS からフォルダを外して、フォルダを削除します。

📄 テンプレートの書き方

置き場所

場所 用途
~/.claude/prompt-templates/*.md すべてのプロジェクトで使うテンプレート
<project>/.claude/prompt-templates/*.md そのプロジェクト専用のテンプレート。同じファイル名のユーザーテンプレートより優先される

プロジェクト側のテンプレートをリポジトリにコミットしておけば、チームで同じ定型プロンプトを共有 することもできます。

フォーマット

1テンプレート = 1つの Markdown ファイルです。拡張子 .md を除いたファイル名がキーになります。フロントマターは省略可能です。

~/.claude/prompt-templates/bugfix.md
---
label: bugfix
mode: replace
order: 3
---
次の不具合を調査して修正してください。原因を特定してから修正し、再発を防ぐテストも追加してください。

- 現象:
- 再現手順:
- 期待する動作:
フィールド 意味 デフォルト
label ボタンに表示する名前 ファイル名
mode insert(カーソル位置に挿入)/ replace(下書きを置き換え)/ append(末尾に追加) insert
order 並び順(数値の昇順) order があるテンプレートの後ろに、名前順

本文末尾の改行は、挿入前に取り除かれます。

mode の使い分け 💡

  • replace: レビュー依頼やバグ修正依頼のように、プロンプト全体をテンプレートで始めたいとき
  • insert: 「このコードが何をしているか説明して」のように、書きかけの文章の途中に差し込みたいとき
  • append: 「テストも追加してください」のような定型の一文を、下書きの末尾に付け足したいとき

上の bugfix テンプレートのように、記入欄(- 現象: など)を用意しておく と、挿入後に埋めるだけで質の高い依頼が書けるのでおすすめです。

🛠 実装について

mod は Claude Code の function hooks プラグインとして実装しています。構成は次のとおりです。

ファイル 内容
.claude-plugin/plugin.json プラグインのマニフェスト
hooks/hooks.json 読み込むモジュール(./register.tsx)の指定
hooks/register.tsx フック・描画・コマンド
hooks/parse.ts テンプレートのパースと並び替えを行う純粋関数
types/index.d.ts テンプレートの型と $.state の契約
hooks/*.test.ts(x) テスト

hooks/register.tsx に処理が集まっているのは、$(エンジンのインターフェース)や状態を、別ファイルから import した関数には渡せない という制約があるためです。そのため、副作用のないパース処理だけを parse.ts に切り出してテストしやすくしています。

また、ctrl+c や Esc Esc でプロンプトをクリアしたときにはプロンプト編集イベントが発生しないため、プロンプトが空でない間は一定間隔で内容を読み直し、行末のヒントを正しく切り替えるといった工夫もしています。

開発時は次のコマンドでマニフェストの検証とテストができます。

claude plugin validate .   # マニフェストとフックのチェック
claude plugin test .       # hooks/*.test.ts(x) を実行

まとめ 🎯

  • claude-code-mod-prompt-templates は、Claude Code のプロンプト欄の上にテンプレートボタンを並べ、数字キーで定型プロンプトを挿入できる mod です
  • 送信はせず 挿入だけ なので、テンプレートをたたき台にしてその場で編集できます
  • テンプレートは Markdown ファイルを置くだけ。ユーザー共通・プロジェクト専用の2か所に置けます

よく打つプロンプトがある方は、ぜひ claude --plugin-dir で気軽に試してみてください。自分のよく使うプロンプトを ~/.claude/prompt-templates/ に追加していくと、どんどん手に馴染んでいきます 🙌

不具合報告や改善案は GitHub の Issue でお待ちしています!

参考リンク 🔗

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?