はじめての Mod 作り

いちばん早い方法は、Claude に言葉で頼むことです。Claude Code には、Mod を作るための plugin-authoring スキルが入っています。

言葉で頼む

会話の横に、このセッションのツール呼び出し回数を数えるペインを作って

Claude が Mod フォルダに最初のファイルを書くと、**「Enable hot reloading for this session?」**と聞かれます。Enable for this session を選ぶと、ターンが終わるたびに変更内容がすぐに再読み込みされます。

自分で書く

マニフェストを作ります。

{ "name": "first-mod", "version": "0.1.0", "description": "ツール呼び出し回数を数える" }

フックモジュールの場所を書きます。パスはこのファイルが基準です。
hooks/hooks.json
```
{ "modules": ["./register.ts"] }
```

フックを登録します。ペインは $.ui.open で開き、ui.render フックがその中身を描画します。

import type { Register } from 'claude-code'

let calls = 0

export const register: Register = on => {
  on('session.start', async ($, e, next) => {
    await $.command.register({ name: 'calls', description: 'ツール呼び出し回数ペインを開く' })
    return next(e)
  })
  on('command.run', { command: 'calls' }, async $ => {
    await $.ui.open({ id: 'calls', title: 'Tool calls' })
    return { text: 'ペインを開きました。' }
  })
  on('tool.call', async ($, e, next) => {
    calls += 1
    $.ui.invalidate('ui.render')
    return next(e)
  })
  on('ui.render', { component: 'Pane', requestId: 'calls' }, async ($, e) => {
    const { Text } = $.ui.resolve(e)
    return <Text>ツール呼び出し {calls} 回</Text>
  })
}

1 つのセッションで読み込んで試します。
ターミナルウィンドウ
```
claude --plugin-dir ./first-mod
```

検証とテスト

claude plugin validate ./first-mod   # フック・呼び出しの一覧、エンジンが拒否する箇所
claude plugin test ./first-mod       # *.test.ts(x) を実行

テストでは claude-code/testing の test、expect、mock を使います。テストの on でエンジンの代わりに偽の応答を差し込み、$.ui.mount でペインをターミナルとデスクトップの両方の画面に同じように描画して、ボタンを押して結果を確認します。型はエンジンが Mod フォルダの .claude-plugin/types/ に配置するので、一度読み込まれたあとに tsc -p <フォルダ> で検査できます。

共有する

リポジトリのルートにマーケットプレイスファイルを 1 つ置けば完了です。

{
  "name": "first-mod",
  "owner": { "name": "you" },
  "plugins": [{ "name": "first-mod", "source": "./" }]
}

ほかの人は次のようにインストールします。

/plugin install first-mod --marketplace you/first-mod

GitHub リポジトリに claude-code-mod トピックを付けると、コミュニティのカタログが数時間以内に収集します。