SpyBara
Go Premium

plugins/mods/gallery.md 2026-10-01 23:59 UTC to 2026-10-02 16:57 UTC

This page contains 435 additions and 0 deletions.

2026
Fri 2 18:59

mod のインターフェースギャラリー

Claude Code の mod が描画できるインターフェース要素（テキスト、ボタン、フィールド、Markdown、コード、差分など）を、サンプルコードとターミナルのスクリーンショットで確認できます。

mod は要素を組み合わせてインターフェースを描画します。要素には、テキスト、ボックス、ボタン、フィールドのほか、コンテンツを整形してくれるものがいくつかあります。このページのサンプルは要素を描画するコードを示しており、ほとんどにはターミナルのペインに表示された結果のスクリーンショットが付いているため、見た目で要素を選べます。

描画の仕組みを学ぶには、まず インターフェースに描画する をお読みください。主なプロパティと、各要素を描画するアプリについては 要素リファレンス を参照してください。すべてのプロパティは 型宣言 に記載されています。

サンプルを試す

このページのサンプルはスニペットであり、mod 全体ではありません。それぞれが 1 つの要素と、その中に入れ子になったもののコードです。

サンプルを自分のターミナルで確認するには、以下の手順で小さな mod を作成し、そこにサンプルを貼り付けます。この mod は /gallery コマンドを追加し、このコマンドがペインを開いてそこにサンプルを描画します。ペイン は、幅の広いフルスクリーンのターミナルではトランスクリプトの横に表示されるサイドバーで、それ以外ではプロンプトの上に表示される枠付きの領域です。

1

mod を作成する

gallery という名前のディレクトリを作成し、その中に .claude-plugin ディレクトリと hooks ディレクトリを作成します。各ファイルについては mod を作成する で説明しています。

マニフェストを gallery/.claude-plugin/plugin.json として保存します。

{
"name": "gallery",
"version": "0.1.0",
"description": "Opens a pane that draws one sample",
"author": { "name": "Your Name" }
}

gallery/hooks/hooks.json でエントリポイントを指定します。

{
"modules": ["./register.js"]
}

コードを gallery/hooks/register.js として保存します。これはペインを開く /gallery コマンドを追加し、そのペインに Plain text を描画します。

// Stands in for your own callback in the samples that take one
const noop = () => {}
// The Select sample keeps its choice here
let picked = 'md'

// The Raster sample packs its cells with this function
const DEFAULT_COLOR = 0x01000000
function cellsOf(rows) {
const numbers = rows.flat().flatMap(([char, color]) => [char.codePointAt(0), color, DEFAULT_COLOR])
return new Uint8Array(Uint32Array.from(numbers).buffer).toBase64()
}

export function register(on) {
on('session.start', async ($, e, next) => {
await $.command.register({ name: 'gallery', description: 'Open the sample pane' })
return next(e)
})

on('command.run', { command: 'gallery' }, async ($) => {
await $.ui.open({ id: 'gallery', focus: true, closeOnEscape: true })
return {}
})

on('ui.render', { component: 'Pane' }, async ($, e, next) => {
if (e.requestId !== 'gallery') return next(e)
const { Box, Text, Button, Input, Select, Link, Markdown, Code, Raster, Svg } = $.ui.resolve(e)
// Replace the element after return with a sample
return Text({ children: ['Plain text'] })
})
}
2

mod を実行する

シェルで、gallery を含むディレクトリから Claude Code を起動します。

claude --plugin-dir ./gallery

Claude Code のプロンプトで /gallery を実行します。Plain text が表示されたペインが開きます。

3

サンプルを差し替える

このページからサンプルをコピーします。register.js で、return の後に続くように Text({ children: ['Plain text'] }) をサンプルで置き換え、ファイルを保存します。Claude Code は保存のたびにモジュールを再読み込みするため、もう一度 /gallery を実行すると新しいサンプルが表示されます。

要素を選ぶ

サンプルは画面に表示したい内容ごとにまとめられています。

テキストを表示する

画面に文字を表示する要素は 3 つあります。独自のスタイルを付ける Text、すでに整形済みのコンテンツ向けの Markdown、URL 向けの Link です。

`Text`

Text は、指定したスタイルで文字列を描画します。このサンプルでは、スタイルごとに 1 行ずつ表示します。

Box({
  flexDirection: 'column',
  children: [
    Text({ children: ['Plain text'] }),
    Text({ bold: true, children: ['bold'] }),
    Text({ italic: true, children: ['italic'] }),
    Text({ underline: true, children: ['underline'] }),
    Text({ strikethrough: true, children: ['strikethrough'] }),
    Text({ dimColor: true, children: ['dimColor'] }),
    Text({ inverse: true, children: ['inverse'] }),
    Text({ color: 'red', children: ["color: 'red'"] }),
    Text({ backgroundColor: 'blue', children: ["backgroundColor: 'blue'"] }),
  ],
})
スタイル名が付いた 9 行のテキストを表示したペイン：plain、bold、italic、underline、strikethrough、グレーの dimColor、inverse、赤の color、青の backgroundColor。 スタイル名が付いた 9 行のテキストを表示したペイン：plain、bold、italic、underline、strikethrough、グレーの dimColor、inverse、赤の color、青の backgroundColor。

dimColor はテキストをグレーで描画します。backgroundColor はテキストの幅の分だけ塗りつぶします。

`Markdown`

Markdown は、Claude の返答と同じようにテキストを整形します。内容は children ではなく text で渡します。

Markdown({
  text: '## Release notes\n\nThis build has **two** fixes and one `flag`:\n\n- Faster start\n- Fewer prompts\n\n> Quoted text',
})
太字の見出し Release notes、続いて太字の単語 1 つと色付きのコード単語 1 つを含む文、2 項目のリスト、左側にバーが付いた斜体の引用を表示したペイン。 太字の見出し Release notes、続いて太字の単語 1 つと色付きのコード単語 1 つを含む文、2 項目のリスト、左側にバーが付いた斜体の引用を表示したペイン。

見出しは # 記号なしで太字で描画されます。インラインコードはバッククォートなしで色付きで描画されます。引用は左側にバーが付いた斜体で描画されます。

Link は、ラベルとそれに続く URL を描画します。

Link({ href: 'https://code.claude.com/docs', label: 'Claude Code docs' })
1 行を表示したペイン：ラベル Claude Code docs と、グレーの URL。 1 行を表示したペイン：ラベル Claude Code docs と、グレーの URL。

ターミナルは URL をラベルの後にテキストとして描画します。クリックで開くかどうかはユーザーのターミナルによって異なります。

コードと変更を表示する

Code は、Claude Code 独自のシンタックスカラーでソーステキストを描画するか、差分を描画します。

`Code`

language を指定するか、Claude Code に言語を推測させるために path を渡します。startLine を指定すると、その番号から行番号が付きます。

Code({
  language: 'javascript',
  startLine: 1,
  source: "const name = 'mods'\nconsole.log('hello ' + name)",
})
シンタックスカラーで表示された、行番号付きの 2 行の JavaScript を表示したペイン。 シンタックスカラーで表示された、行番号付きの 2 行の JavaScript を表示したペイン。

色はユーザーのテーマに従います。

差分としての `Code`

format: 'diff' を指定すると、source は 1 つ以上の unified diff のハンクになります。

Code({
  format: 'diff',
  source: '@@ -1,3 +1,3 @@\n # Mods\n-A mod is a plugin.\n+A mod is a plugin that runs code.\n Read on.',
})
4 行の差分を表示したペイン。削除された行は赤、追加された行は緑で網掛けされ、それぞれ行番号が付いています。追加された行では、that runs code という語がより濃く網掛けされています。 4 行の差分を表示したペイン。削除された行は赤、追加された行は緑で網掛けされ、それぞれ行番号が付いています。追加された行では、that runs code という語がより濃く網掛けされています。

Claude Code は @@ の行の代わりに行番号を描画します。削除された行と追加された行が似ている場合、変更された語はより濃く網掛けされます。

要素を配置する

`Box`

Box は中の要素を行または列に配置し、枠線を描画することもできます。このサンプルでは、単語の行を枠線付きのボックスの上に置いています。

Box({
  flexDirection: 'column',
  gap: 1,
  children: [
    Box({
      flexDirection: 'row',
      columnGap: 4,
      children: [Text({ children: ['a row'] }), Text({ children: ['of three'] }), Text({ children: ['items'] })],
    }),
    Box({
      borderStyle: 'round',
      paddingX: 1,
      children: [Text({ children: ["borderStyle: 'round'"] })],
    }),
  ],
})
4 列ずつ間隔を空けて 1 行に並んだ 3 つの語、空行、1 行のテキストを囲む角丸の枠線を表示したペイン。枠線はペインの幅いっぱいに伸びています。 4 列ずつ間隔を空けて 1 行に並んだ 3 つの語、空行、1 行のテキストを囲む角丸の枠線を表示したペイン。枠線はペインの幅いっぱいに伸びています。

枠線はペインの幅まで伸びます。

入力を受け付ける

Button、Input、Select はコントロールです。ユーザーは Tab でこれらの間を移動し、フォーカスのあるものを操作します。どのキーが届くかについては キーボードフォーカスとホットキー を参照してください。

focus: true でペインを開くと、ペインにキーボードフォーカスが与えられます。入力した文字はフォーカスを持つ Input に届くため、ペインが開いた時点で入力を受け付けるべきフィールドには autoFocus: true を追加してください。

`Button`

ボタンは onPress を実行します。このサンプルでは、デフォルトの形式、ホットキー付きの plain ボタン、淡色のボタンを示します。

Box({
  flexDirection: 'column',
  children: [
    Button({ key: 'save', label: 'Save', onPress: noop }),
    Button({ key: 'next', label: 'Next', hotkey: 'n', plain: true, onPress: noop }),
    Button({ key: 'skip', label: 'Skip', dimColor: true, onPress: noop }),
  ],
})
1 行に 1 つずつ 3 つのボタンを表示したペイン：角括弧付きの Save、角括弧なしで n が色付きの n: Next、グレーで角括弧付きの Skip。 1 行に 1 つずつ 3 つのボタンを表示したペイン：角括弧付きの Save、角括弧なしで n が色付きの n: Next、グレーで角括弧付きの Skip。

フォーカスのあるボタンは反転表示で描画されます。ここではユーザーが Tab を 2 回押しています。

同じ 3 つのボタンで、2 番目の n: Next が反転表示で描画されています。 同じ 3 つのボタンで、2 番目の n: Next が反転表示で描画されています。

`Input`

Input は 1 行のテキストフィールドで、ユーザーが Enter を押すと onSubmit を実行します。

Input({
  key: 'title',
  label: 'Title',
  placeholder: 'Type a title and press Enter',
  value: '',
  submitLabel: 'save',
  onSubmit: noop,
})

フォーカスがないとき、フィールドはラベルとプレースホルダーを表示します。

1 行を表示したペイン：ラベル Title と、グレーのプレースホルダー Type a title and press Enter。 1 行を表示したペイン：ラベル Title と、グレーのプレースホルダー Type a title and press Enter。

フォーカスがあると、ラベルが太字になり、カーソルが表示され、⏎ の後に submitLabel が表示されます。

同じフィールドで、ラベルが太字になり、プレースホルダーの最初の文字にブロックカーソルがあり、リターン記号の後に save という語が続いています。 同じフィールドで、ラベルが太字になり、プレースホルダーの最初の文字にブロックカーソルがあり、リターン記号の後に save という語が続いています。

入力するとプレースホルダーが置き換わります。

同じフィールドに入力された文字 Rel があり、その後にリターン記号と save という語が続いています。 同じフィールドに入力された文字 Rel があり、その後にリターン記号と save という語が続いています。

`Select`

Select では、ユーザーが複数の選択肢から 1 つを選べます。選択された選択肢の value を引数に onSelect を実行します。

Select({
  key: 'format',
  label: 'Format',
  value: picked,
  options: [
    { value: 'md', label: 'Markdown' },
    { value: 'html', label: 'HTML' },
    { value: 'txt', label: 'Plain text' },
  ],
  onSelect: (value) => {
    picked = value
  },
})

閉じているときは、ラベルと現在の選択肢を表示します。

1 行を表示したペイン：ラベル Format、現在の選択肢 Markdown、小さな下向き矢印。 1 行を表示したペイン：ラベル Format、現在の選択肢 Markdown、小さな下向き矢印。

開いているときは、選択肢を一覧表示し、そのうち 1 つをマークします。

開いたピッカーで、ラベルの下に 3 つの選択肢が並んでいます。2 番目の選択肢 HTML が反転表示で描画されています。 開いたピッカーで、ラベルの下に 3 つの選択肢が並んでいます。2 番目の選択肢 HTML が反転表示で描画されています。

ユーザーが選択肢を選ぶと、リストが閉じます。

再び閉じたピッカーで、現在の選択肢として HTML が表示されています。 再び閉じたピッカーで、現在の選択肢として HTML が表示されています。

画像を描画する

`Raster`

Raster は色付きの文字セルのグリッドで、ヒートマップ、スパークライン、ゲーム盤などに使います。描画はターミナルが行います。このサンプルでは、スターターモジュールの cellsOf 関数を使用しています。この関数は、セルを Raster が受け取る文字列にパックします。詳しくは 色付きセルのグリッドを描画する で説明しています。

Raster({
  key: 'grid',
  columns: 3,
  rows: 2,
  cells: cellsOf([
    [['█', 0x2e7d32], ['█', 0xf9a825], ['█', 0xc62828]],
    [['█', 0x2e7d32], ['█', 0x2e7d32], ['█', 0xf9a825]],
  ]),
})
色付きブロックの小さなグリッドを表示したペイン。3 つずつ 2 行で、緑、琥珀、赤、続いて緑、緑、琥珀。 色付きブロックの小さなグリッドを表示したペイン。3 つずつ 2 行で、緑、琥珀、赤、続いて緑、緑、琥珀。

Raster は各色をより小さなパレットに丸めるため、0x2e7d32 は #337733 として描画されます。

`Svg`

Svg は Desktop アプリで SVG ドキュメントを描画します。

Svg({
  alt: 'Three bars of rising height',
  width: 120,
  height: 60,
  source:
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 60"><rect x="10" y="40" width="20" height="20" fill="#2e7d32"/><rect x="50" y="25" width="20" height="35" fill="#f9a825"/><rect x="90" y="5" width="20" height="55" fill="#c62828"/></svg>',
})

ターミナルでは、Svg だけを返すペインは空のまま開きます。そこに別のものを描画するには、e.surface を確認して別のツリーを返してください。

`Image` と `Client`

さらに 2 つの要素については、ここにサンプルがありません。Image はターミナルで PNG または生のピクセルを描画します。Client は、アニメーションやポインター入力のために、ユーザーが用意した別のファイルが描画する領域です。これらのプロパティは 要素リファレンス に記載されています。

mod が描画できる場所を確認する

サンプルはすべてペインに描画しています。mod は他の場所にも描画でき、Claude Code を呼び出して代わりに何かを表示させることもできます。

次のステップ