modscode EN

Claude Code · Mods · コード参考書

Claude Code Mods のコード参考書。

実際の Mod のコードを読んで、そのまま作り始められる。modscode は GitHub の公開 mod のコードを読み、やりたいことごとに該当するコードを集め、各 Mod の画面をコードから再現しています。ターミナルでもデスクトップアプリでも。

コードを読む 図鑑を見る

3,676本の Mod を掲載
4,178本の公開 Mod を GitHub で読んだ
10のパターン別コード

入れる前に、必ず自分で確かめてください。Mod はサンドボックスなしで、あなたの権限で動きます。modscode は安全を保証しません。

作りたいものからコード例へ

ペイン（パネル）会話の横に開くパネル。ボタン・一覧・グラフに。6 本 · $.ui.openプロンプト上の帯（バンド）プロンプトのすぐ上の帯。状態や使用量を 1〜2 行で。6 本 · on('ui.render', { component: 'AbovePrompt' })ステータスラインプロンプトの下の 1 行。$.ui.status で。6 本 · $.ui.status(text)トースト（通知）数秒で消える短い知らせ。6 本 · $.ui.toast(text, { timeoutMs })ツール呼び出しを止める（deny）rm -rf や force push を止める。PreToolUse の mod 版。6 本 · on('tool.call', { tool: 'Bash' })プロンプトを書き換える送る前に文を直す・Claude だけが読む文を足す。6 本 · on('prompt.submit')スラッシュコマンドを足す/名前 で動くコマンドを、コードで。6 本 · $.command.register$.store で状態を残すセッションをまたいで値を保存。6 本 · $.store.get設定項目（userConfig）使う人が変えられる設定を plugin.json で。6 本 · plugin.json userConfigClaude が呼べるツールを足すMCP サーバーなしで、Claude 用のツールを。6 本 · $.tool.register

実例: プロンプト上の帯（バンド） · reviewer2 — In sessions opened at the Rev2Agent root, Reviewer 2 adds a one-line aside in a speech bubble above the prompt after each answer, beside an avatar whose expression fits it.

.claude/skills/reviewer2/hooks/register.ts:455
on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
  const shown = bubble
  const isPending = shown === null && pendingTurns.size > 0 && !e.props.isWorking
  if ((shown === null && !isPending) || e.props.hasSurvey || e.props.view?.agentId !== undefined) {
    return next(e)
  }
  let mine: RenderElement
  if (e.surface === 'terminal') mine = drawTerminal($, e, shown)
  else if (e.surface === 'desktop' || e.surface === 'vscode') mine = drawDesktop($, e as RenderInput<'AbovePrompt', 'desktop'>, shown)
  else return next(e)
  const { Box } = $.ui.resolve(e)
  const below = await next(e)
  return below ? Box({ flexDirection: 'column', children: [mine, below] }) : mine
})
パターンをすべて見る

スターの多い Mod

GitHub のスターの多い順です。

  1. 1blast-radiusSee what a risky command would change before it runs.deepseek-ai · ターミナル＋デスクトップ・ペイン・バンド★ 244419
  2. 2replay-theaterStep through the last turn's edits, one diff at a time.deepseek-ai · ターミナル＋デスクトップ・ペイン・バンド★ 244419
  3. 3ruview-liveRuView live sensing in Claude Code: /ruview opens a pane beside the transcript with three views: an overview of your CSI nodes (ESP32, Realtek) and 60 GHz radar (rates, loss, RSSI, presence, device-reported vitals, alerts), a live CSI ampl…ruvnet · ターミナル＋デスクトップ・ペイン・ステータスライン★ 96675
  4. 4my-modA Claude Code mod scaffolded by ruflo-plugin-creator: counts the session's tool calls in a status line, adds /my-mod-status, and keeps a classic hook as the fallback where function hooks are off.ruvnet · ターミナル＋デスクトップ・ステータスライン★ 73986
  5. 5ruflo-adrADR lifecycle management — create, index, reconcile, supersede, check compliance, and link Architecture Decision Records to code via AgentDB hierarchical store + causal edges (supersedes/amends/depends-on/related)ruvnet · フックだけ★ 73986
  6. 6ruflo-agentAgent runtimes for ruflo — local WASM-sandboxed agents (rvagent: 10 wasm_agent_*/wasm_gallery_* MCP tools, built on @ruvector/rvagent-wasm + @ruvector/ruvllm-wasm per ADR-070) plus Anthropic Claude Managed Agents as a cloud backend (manage…ruvnet · フックだけ★ 73986
  7. 7ruflo-agentdbSubstrate plugin for Ruflo memory: AgentDB controller bridge (15 agentdb_* MCP tools), RuVector ONNX embeddings (10 embeddings_* tools incl. RaBitQ 32x quantization), and WASM HNSW pattern router (3 ruvllm_hnsw_* tools). As a mod (ADR-445)…ruvnet · フックだけ★ 73986
  8. 8ruflo-agntcyAGNTCY/Outshift Internet-of-Cognition runtime integration for Ruflo — SLIM secure transport for cross-host agent coordination, CASA intent-scoped tool authorization enforcement, optional IOC Layer 9 coordination events, and AGNTCY identity…ruvnet · フックだけ★ 73986
  9. 9ruflo-ai-teamGive Claude a tenant-isolated AI team that divides work, coordinates progress, recalls approved context, and returns evidence-backed results.ruvnet · フックだけ★ 73986
  10. 10ruflo-aidefenceAI safety scanning, PII detection, prompt injection defense, and adaptive threat learningruvnet · フックだけ★ 73986
ランキングをすべて見る

コードが載るまで

01

探す

約 1,000 の GitHub リポジトリから、hooks モジュールを持つ mod を探します。

02

読む

ソースを 1 つのコミットで文字として取得して解析します。動かしません。描く画面は JSX から再現します。

03

切り出す

載せる条件を満たす mod から、ペイン・ツール呼び出しを止める・スラッシュコマンドなど、やりたいことごとに該当するコードをライセンス付きで切り出します。

04

自分で確かめる

各ページに、コードが触るもの（通信・プログラム・ファイル・鍵）を出します。読んで判断してから入れてください。

載せる条件

自分で作る人へ

MCP コネクタを入れると、Claude が「ボタン付きのペイン」「rm -rf を止める」のようなパターンで実際の Mod のコードを探し、ライセンス付きで写して作れます。

https://modscode.com/mcp
コネクタを入れる

よくある質問

Claude Code の Mods とは？

mod は、JavaScript か TypeScript のフックで Claude Code の見た目と動きを変えるプラグインです。ターミナルの Claude Code とデスクトップアプリの Code タブで、会話の横のペイン、プロンプトの上のバンド、ステータスライン、トーストを描け、スラッシュコマンドを足したり、ツール呼び出しを止めたり書き換えたりもできます。

mod の作り方を学ぶには？

コード参考書（/ja/code/）で、ペイン・バンド・ステータスライン・トースト・ツール呼び出しを止める・プロンプトの書き換え・スラッシュコマンド・$.store・userConfig ごとに、最小の形と実際の Mod のコードを読めます。フォルダーで claude --plugin-dir . を実行すると、入れずに 1 セッションだけ読み込んで試せます。

settings.json のフック（PreToolUse）やステータスラインとの違いは？

settings.json のフックとステータスラインはシェルのコマンドを動かします。mod は Claude Code の中で動く JavaScript の関数で、tool.call で { deny } を返して止めたり、$.ui.status でステータスラインを出したり、ペインやボタンを描いたりできます。

どんな Mod が載る？

GitHub の公開 mod のうち、コードを確かめやすい形のものです（モジュールをすべて読めた、コードが Mod の中で完結、圧縮・eval・符号化した塊がない、外への呼び出しがその場の $ で見える）。詳しい条件は「載せる条件」のページにあります。

載っている Mod は安全？

modscode は保証しません。Mod はサンドボックスなしで、あなたの権限で動きます。各ページに、コードが触るもの（通信・プログラム・ファイル・環境変数・ソースの鍵）を出しています。コードを読み、読んだコミットを入れてください。

Windows で動く？

ターミナルの Claude Code もデスクトップアプリも Windows で動きます。Windows にないプログラム（tail・date・open など）を起動する Mod は、そのページで印を付けています。そのプログラムは Windows では動きません。

動かさずにどうやって画面を描く？

JSX を TypeScript のパーサーで解析し、Claude Code が受け取る要素の木を組み立て直します。動かしたときにだけ決まる文字は、見本の値で埋めます。

コードは使っていい？

最小の形と雛形は modscode が書いたもので、自由に使えます。Mod 自身のコードは、ライセンスが許すときはその全文を付けて載せ、そうでなければリンクにしています。写すときは著作権表示を残してください。