Claude Code カスタムスラッシュコマンド

カスタムコマンドの置き場所

.claude/commands にある1つの Markdown ファイルが、スラッシュメニューの新しい項目になります。

1. 1

   組み込みコマンドから始める

   スラッシュだけを入力すると、Claude Code 付属のコマンドメニューが開きます。作業ディレクトリを追加する /add-dir、/agents、/clear、/compact、/model、/permissions などが並びます。どれもあらかじめ書かれた操作へのショートカットで、このリストは拡張可能です。残りのガイドではその方法を説明します。

   

2. 2

   .claude に commands フォルダーを作る

   カスタムスラッシュコマンドは、プロジェクトの .claude ディレクトリ内の commands フォルダーに置きます。まだなければ両方を作成してください。このフォルダーに置く Markdown ファイルは、1ファイルが1つのコマンドになり、コマンド名はファイル名になります。

   

3. 3

   コマンドを Markdown ファイルとして書く

   この ui-component.md は、新しいコンポーネントの置き場所、PascalCase の命名ルール、定義すべきテーマカラーのバリアント、テストファイルの作成とパスするまでの実行を Claude Code に指示しています。@パス 構文で別ファイルをコンテキストとして読み込める点もポイントです。Claude Code にとってこのファイルは、1本の丁寧に作り込まれたプロンプトにすぎません。

   

コマンドを最初から最後まで実行する

セッションを再起動し、メニューから /ui-component を選んで、自分のルール通りにコンポーネントを作らせます。

1. 4

   再起動してメニューに新コマンドを確認する

   新しいコマンドファイルはセッション開始時にのみ読み込まれるため、いったん終了して再起動します。スラッシュを入力すると ui-component がメニューの最上部に project コマンドとして表示されます。選択して Enter を押すと実行できます。

   

2. 5

   コマンドが実行しようとしていることを承認する

   コマンドファイルにはどのコンポーネントを作るか書かれていないため、Claude Code はカードを選び、ディレクトリを作る mkdir を実行する前に確認してきます。選択肢2を選ぶと、このプロジェクト内の mkdir は今後確認なしで許可され、繰り返し実行がスムーズになります。

   

3. 6

   結果を信頼する前に実行サマリーを読む

   やがてターミナルに結果がまとめられます。テーマカラーを使った5つのバリアント、3つのサイズ、インタラクティブな状態、パスしたテスト9件、プレビューページの更新です。このサマリーはコマンド実行を確認する最速の手段ですが、各ファイルの中身をざっと目を通す価値はあります。

   

4. 7

   ブラウザで成果をプレビューする

   コマンドは新しいカードをプロジェクトのプレビューページに追加済みです。スクロールすると、primary・secondary・success・warning・danger の各バリアントが複数サイズとホバー状態つきで表示されます。1回のスラッシュコマンドだけでこれだけ作れます。

   

5. 8

   想定していなかったテーマも確認する

   プレビューページにはダークモードの切り替えがあり、生成されたコンポーネントはそちらでも成立しています。コマンドファイルが指定したテーマ変数を通じて、同じマークアップが別の配色になります。「テーマ変数の色を使う」と書くことで得られる効果です。

   

コマンドに引数を受けさせる

front matter と $ARGUMENTS で、1つのコマンドが再利用できるジェネレーターに変わります。

1. 9

   front matter でコマンドを説明する

   コマンドファイルの編集は front matter から始めます。--- で挟まれたメタデータブロックです。description はコマンドの目的、argument-hint は期待する引数の形式を示し、どちらもメニューとプロンプト行に表示されます。後でファイルを開かなくても構文を思い出せます。

   

2. 10

   $ARGUMENTS を名前付きの値に分割する

   コマンド名の後に入力されたすべては $ARGUMENTS 変数に入ります。ここで紹介されるテクニックは、Markdown の参照形式の行で名前付きの値に分割するものです。[name] にコンポーネント名、[summary] に説明を受け取り、下のタスク指示ではプレースホルダーとして使えます。

   

3. 11

   入力しながらヒントを受け取る

   もう一度再起動してメニューからこのコマンドを受け入れると、front matter の2つの効果を確認できます。description がコマンドの目的を示し、ゴーストテキストが引数の形式を示します。コンポーネント名、パイプ、続いて要約です。

   

4. 12

   引数つきでコマンドを呼び出す

   今回の呼び出しでは、icon を名前、「an icon component for showing icons with a circular background」を要約として渡し、パイプで区切っています。同じコマンドファイルでも、モデルに任せるのではなく指定されたコンポーネントを正確に作れるようになりました。

   

5. 13

   作成されたファイルを確認する

   エクスプローラーが、名前付き引数の効果を示しています。components/ui の下に新しい Icon フォルダーがあり、Icon.tsx とテストファイルが入っています。先ほどの Card とまったく同じ構成です。同じコマンド、別の入力、一貫した構造です。

   

6. 14

   見える出力を元に反復する

   最初の版は絵文字のアイコンを使っていたため、著者が修正を求めました。Claude Code は依頼どおり正式なアイコンライブラリに差し替え、プレビューにはアクションバー、ステータスインジケーター、5つのバリアントが並びます。カスタムコマンドが品質の下限を決め、レビューが上限を決めます。

   

さらに読む