Claude Code IDEワークスペースModsを構築する

これはあなたのターミナルを超高速のclaude codeアプリに変えます <role> あなたはシニアTypeScriptエンジニアです。Claude Codeのmodを構築します。小さなモジュールを作成し、各モジュールをテストし、検証した結果のみを報告します。 </role> <variables> AUTHOR_NAME = "あなたの公開名" MARKETPLACE = "あなたのマーケットプレイス名" LICENSE = "MIT" PANE_COLUMNS = 48 </variables> <context> modはClaude Codeのプラグインです。ファイルhooks/hooks.jsonは1つのhooksモジュールを指定します。hooksモジュールはregister(on, options)をエクスポートします。各フックはon('event', matcher, async ($, e, next) => result)です。"$"はmods APIです。"e"はイベントです。"next(e)"は他のmodとClaude Codeを実行します。 Claude Codeターミナルセッション内にIDEスタイルのワークスペースが必要です。ユーザーはファイルを読み、検索し、diffを確認し、タスクを実行し、セカンドウィンドウなしでセッション間を移動します。他のユーザーがパブリックマーケットプレイスからこれらのmodをインストールするため、modはクリーンなマシンで読み込まれ、ツール(git、rg、cargo)がない場合に失敗してはなりません。 公式ドキュメント(必要なページを読んでください): - https://t.co/i4akoKobgO - https://t.co/WPCOsxEplS - https://t.co/IeRIo28W71 - https://t.co/bQM1hlDd5j - 組み込みmodソース: https://t.co/XYpFTigXbE (最初に"diff"を読んでください。これはボタンと独自のスクロールを持つペインです) </context> <source_of_truth> mods APIはリリース間で変更されます。2つのソースが矛盾する場合は次の順序を使用します: 1. Claude Codeが各modの.claude-plugin/types/に書き込む型宣言。これらはインストールされたバージョンを説明します。 2. "claude plugin validate"の出力。 3. ドキュメントページ。 4. このプロンプト。 コードを書く前に/plugin-authoringを実行してください。イベント、メソッド、要素、またはプロップを使用する前にclaude-code/index.d.tsを読んでください。そのファイルで名前を検索してください。そのファイルにない名前を使用しないでください。このプロンプトがインストールされたバージョンにないものを指定した場合、代替を発明しないでください。APIがサポートする最も近いバージョンを構築し、その違いをLIMITS.mdに記録してください。 </source_of_truth> <api_rules> Claude Codeはhooksモジュールに対して静的解析を行います。これらのルールは検証をグリーンに保ちます: - 各API呼び出しを完全に記述してください: $.fs.read(...)、$.ui.open(...)。"$"または名前空間を変数に代入しないでください。"$"を分割代入しないでください。 - "$"を同じファイルのトップレベルで宣言された関数にのみ渡してください。インポートされた関数、メソッド、またはフック内で定義された関数に"$"を渡さないでください。 - 各イベント名をon(...)内の文字列リテラルとして記述してください。イベント名のリストをループしないでください。 - register内で"on"という名前の2番目の変数を宣言しないでください。 - ESモジュールを使用してください。ファイルの先頭でimport宣言を使用してください。requireは使用しないでください。動的import()は使用しないでください。 - プラグインディレクトリ内のファイルのみを相対パスでインポートしてください。唯一のベアインポートは"claude-code"です。 - プラグイン名を"claude-"で始めないでください。 結果: hooksモジュール内のすべての"$"呼び出しを保持してください。純粋なロジック(パーサー、ツリーモデル、検索ランキング、フォーマッター)は、プレーンデータを受け取りプレーンデータを返す別のファイルに配置してください。純粋なファイルを直接テストしてください。 設計する制限: - 1つのフックは独自の実行時間10秒を持ちます。 - $.fs.readと$.fs.write: 1ファイルあたり4 MiB。1つのText文字列と1つのCode要素: 10,000文字。長いファイルはページングしてください。 - $.store: 合計4 MiBのJSON、マシン上のすべてのセッションで共有。各アイテムに独自のキーを与えてください。各リストを制限してください。 - $.process.run: デフォルトで30秒。 - 再描画: 表示中のペインでは毎秒30回、他のサイトでは10回。 - modが単独で開くペインは144カラム以上でのみ表示されます。ユーザーコマンドまたはプレスが開くペインは各幅で表示されます。コマンドとプレスからペインを開いてください。 キーボードルール: - modはTabまたは矢印キーをバインドできません。Tabはコントロール間を移動します。UpとDownはコントロール間を移動するかスクロールします。 - Buttonホットキーは1桁または1つの小文字です。Inputがフォーカスされている間、各プリント可能キーはInputに送られます。 - 各コントロールに一意のキーを与えてください。テストはキーでコントロールを押します。 - Claude Codeにはタブ要素がありません。タブをプレーンなボタンの行として描画してください。 状態: - モジュール変数: リロードごとに失われます。失われてもよい値に使用してください。 - $.state: セッション中持続し、その値を読み取るサイトを再描画します。各値をtypes/index.d.tsで宣言し、そのファイルをマニフェストで指定してください。 - $.store: セッション間で持続します。設定、最近のセッション、プロジェクトに使用してください。 </api_rules> <repository_layout> .claude-plugin/marketplace.json 各プラグインに1エントリ、マーケットプレイス名 = MARKETPLACE plugins/file-explorer/ plugins/workspace/ plugins/ide-usage/ plugins/ide-statusbar/ README.md LICENSE PROGRESS.md LIMITS.md tests.json 各プラグイン: .claude-plugin/plugin.json name、version 0.1.0、description、author = AUTHOR_NAME、license = LICENSE、必要に応じてtypes hooks/hooks.json { "modules": ["./register.ts"] } hooks/register.ts "$"を呼び出す唯一のファイル hooks/lib/*.ts 純粋なロジック types/index.d.ts PluginStateとmodが追加する任意の名前空間 tests/*.test.ts "claude plugin test"用のテスト </repository_layout> <mod name="file-explorer"> コマンド: /explorerはペイン(id "explorer"、title "Explorer"、focus true、columns PANE_COLUMNS)を開きます。コマンドをimmediate: trueで登録して、ターン中に機能するようにしてください。2回目の/explorerはペインを閉じます。/explorer <path>はそのパスを開きます。 ヘッダー行: 単語EXPLORER、次にBack、Forward、Up、Close。BackとForwardは開かれたフォルダとファイルの履歴を移動します。 ヘッダーの下に1つのInput。その目的はタブによって変わります: - Filesタブ: プレースホルダー"Find files"。Enterはルート以下のファイル名とパスを検索します。検索は大文字小文字を無視します。500件の一致で停止し、次を表示: N files match "query" (first 500, scan stopped)。一致を親フォルダ付きのツリーとして表示します。一致したテキストをマークします。空のクエリはツリーを復元します。 - Codeタブ: プレースホルダー"Find in file, :line, or /regex/"。プレーンテキストは各出現箇所を検索します。":42"は42行目に移動します。"/re/"は正規表現を使用します。"match 2 of 5"を表示します。ボタンnとpは次の一致と前の一致に移動します。 タブ: Files、Code、Diff。 Filesタブ: - ルート行: ルートフォルダ名と完全なパス。最初のルートはセッションの作業フォルダです。Upはルートを親フォルダに移動します。 - アクション行: New File、New Folder、Refresh、Collapse、More。New FileとNew FolderはInputで名前を尋ね、選択されたフォルダにアイテムを作成します。MoreはRename、Delete、Copy path、Show hidden filesを保持します。Deleteは$.ui.askで確認を求めます。 - ツリー: ユーザーがフォルダを開いたときに1つのフォルダレベルを読み取ります。フォルダを先に、次にファイルを名前順でソートします。フォルダ状態のマーカー、既知のファイルタイプの短いタイプタグ(json、md、ts、js、py、rs、go、sh)、シンボリックリンクの"name → target"を表示します。空のフォルダには"(empty)"を表示します。非表示ファイルがオンの場合を除き、.gitとnode_modulesをスキップします。 - 選択とページング: 1つの選択された行。ボタンは選択を上下に移動し、フォルダを開き、フォルダを閉じ、ファイルを開きます。範囲を表示します。例: "7-49 of 329"。e.props.scroll.bodyRowsに収まる行のみを描画します。 Codeタブ: - パスのブレッドクラム、次に"N lines · size"。 - 行番号と構文色。Code要素を使用します。ファイルをページングして、要素が10,000文字より大きくならないようにします。 - 4 MiBより大きいファイルまたはバイナリファイルの場合、サイズとメッセージを表示します。ファイルを読み取らないでください。 - 現在の一致と現在の行をハイライトします。 Diffタブ: - 開いているファイルの未コミットのdiff(git diff for that path)を表示します。diffモードでCode要素を使用します。 - 追加行と削除行の数を表示します。 - ClaudeがEdit、Write、またはMultiEditでファイルを編集したとき、next(e)が戻った後にhttps://t.co/Lb6btDn0iWフックでパスを記録します。ペインが開いている場合、そのファイルを選択し、Diffタブを表示します。自分でペインを開かないでください。 - フォルダがgitリポジトリでない場合、1行でその旨を表示します。 他のmodは、このmodがmods APIに追加する名前空間を通じてファイルを開きます: https://t.co/crzRXVIH3H({ path, line, tab })。名前空間をtypes/index.d.tsで宣言してください。modが他のmodのためにメソッドを追加する方法については、組み込みの"telemetry"modを読んでください。 </mod> <mod name="workspace"> file-explorerに依存します(plugin.jsonのdependenciesにリストしてください)。 コマンド: /workspaceはナビゲーターペイン(id "workspace"、title "Workspace"、columns PANE_COLUMNS)を開きます。 ナビゲーターの配置: ペインの文書化された位置はトランスクリプトの隣のドックであり、Claude Codeは開いている各ペインにそのタイトルでタブを付けます。ペインを左側に配置するフィールドを型で検索してください。存在する場合、ナビゲーターを左に、ツールを右のドックに配置します。存在しない場合、ナビゲーターはドック内のもう1つのペインです。結果をLIMITS.mdに記録してください。 ナビゲーターの内容、上から下へ: 1. タイトルCLAUDE CODEとNew chatボタン。New chatは新しい会話を開始する組み込みコマンドを実行します。コマンド名を$.command.listで見つけてください。 2. WORKSPACE: 各ツールに1つのボタン、この順序: Files、Terminal、Browser、Source Control、Problems、Run Tasks、Outline、To-do Comments、Timeline、Usage、Model Router。プレスはそのツールペインを開き、フォーカスを与えます。開いているツールをマークします。 3. RECENTS: 最新の5セッション、"Show more"付き。各行はタイトル、プロジェクト名、経過時間(8m、22h、3d)を表示します。タイトルはセッションの最初のプロンプトで、収まるように切り詰めます。行のプレスはそのセッションのプロンプトを行の下に表示します。現在のセッションをマークします。 4. PROJECTS: 各プロジェクトフォルダとそのセッション数。プレスはそのプロジェクトのセッションを表示します。 セッションインデックス: prompt.submitフックで、{ id、cwd、repo、title、prompts[]、updatedAt }を$.storeのキー"session:<id>"に書き込みます。各セッションの最新50プロンプトと最新200セッションを保持します。他のセッションが同じストアに書き込むため、各書き込みの前にストアを再度読み取ってください。Claude Code自身のトランスクリプトファイルを読み取ったり解析したりしないでください。 最近のセッションを開く: セッションを切り替えまたは再開するサポートされたメソッドを型で確認してください。存在しない場合、"claude --resume <id>"を$.ui.copyでコピーし、その旨のトーストを表示します。 ツール。各ツールは独自のid、短いタイトル、Refreshボタンを持つ1つのペインです。各ツールはデータがない場合またはプログラムがない場合に1つの明確な行を表示します。 1. Files: セッションフォルダでhttps://t.co/crzRXVIH3Hを呼び出します。2番目のツリーは描画しません。 2. Terminal: セッションフォルダで$.process.spawnで1つのコマンドを実行するInput。出力をペインにストリーミングします。最後の500行を保持します。終了コードを表示します。50コマンドの履歴を保持します。Stopボタンはプロセスを終了します。これはコマンドランナーであり、ターミナルエミュレーターではありません。READMEでその旨を述べてください。 3. Browser: URL用のInput。$.http.fetchでフェッチします。ステータスコード、ページタイトル、読みやすいテキストをMarkdownとして表示し、要素の制限に切り詰めます。リンクをリンクを読み込むボタンとして表示します。"Open in system browser"ボタンはオペレーティングシステムのopenコマンドを使用します。httpとhttpsのみを許可します。 4. Source Control: ブランチ、先行および遅延カウント、変更されたファイルをステータスと"+added −removed"でgitから表示します。ファイルのプレスはhttps://t.co/crzRXVIH3Hをtab "diff"で呼び出します。ボタン: Stage、Unstage、Stage all。commit Inputは$.ui.askでの確認後にステージされたファイルをコミットします。push、pull、reset、または変更の破棄はしないでください。 5. Problems: プロジェクトのチェックコマンドを実行し、各問題を"file:line message"として重大度マーク付きでリストします。コマンドを検出: tsconfig.jsonにはtsc --noEmit、Cargo.tomlにはcargo check、go.modにはgo vet、pyproject.tomlにはruff check(ruffがインストールされている場合)。ユーザー設定は検出されたコマンドを置き換えます。プレスはhttps://t.co/crzRXVIH3Hをその行で呼び出します。Refresh時とターン終了後にのみ実行し、2つのチェックを同時に実行しないでください。 6. Run Tasks: セッションフォルダを表示します。package.jsonスクリプト、Makefileターゲット、justfileレシピ、Cargo.toml(build、test、clippy)、pyproject.tomlスクリプト、go.mod(build、test、vet)でタスクを見つけます。見つからない場合、次を表示: No task found (package.json, Makefile, justfile, Cargo.toml, pyproject.toml, go.mod)。各タスクに1つのボタン。プレースホルダー"Run a command, then Enter"の1つのInput。出力をストリーミングし、終了コードと時間を表示します。 7. Outline: エクスプローラーで開いているファイルのシンボルを行番号付きで表示: 関数、クラス、構造体、インターフェース、定数、Markdown見出し。各言語(ts、js、py、rs、go、md)に1つの小さなパターンテーブルを使用します。ネストされたシンボルをインデントします。プレスはhttps://t.co/crzRXVIH3Hをその行で呼び出します。 8. To-do Comments: プロジェクトでTODO、FIXME、HACK、NOTEコメントを見つけます。rgがインストールされている場合はrgを使用します。ない場合、$.fs.listでツリーを歩き、.git、node_modules、target、distをスキップします。タグでグループ化します。"file:line text"を表示します。300アイテムに制限します。プレスはhttps://t.co/crzRXVIH3Hをその行で呼び出します。 9. Timeline: このセッションの各プロンプト、ツール呼び出し、ターン終了の1行を新しい順に時計時間付きで表示します。EditとWriteにはパスと行数を表示します。編集行のプレスはhttps://t.co/crzRXVIH3Hをtab "diff"で呼び出します。300行を保持します。 10. Usage: $.session.usage()を読み取ります。コンテキストパーセント、トークン、ウィンドウをバー付きで表示します。各レート制限を使用パーセントとリセット時間付きで表示します。フィールドに値がある場合、コストを表示します。session.measureフックで各ターンのトークン数を記録し、最後の30ターンを小さなバーグラフとして描画します。ターミナルではRasterを、他のサーフェスではテキストを使用します(e.surfaceを確認)。 11. Model Router: メインセッションのモデルと各サブエージェントの開始をそのタイプ、モデル、状態付きで表示します。Selectで3つのモード: Off、Suggest、Auto。Offは記録のみ。Suggestはルールが選択するモデルを表示し、何も変更しません。Autoはagent.spawnフックでサブエージェントのモデルをルールテーブル(サブエージェントタイプまたはタスクキーワード → モデル)から設定します。ルールテーブルはユーザーがペインで編集し、$.storeに保存されます。ルール: メインセッションのモデルを決して変更しない、呼び出し元が指定したモデルを保持する、ルールが失敗した場合は開始を変更せずに続行する。モデル名をセッションと設定から読み取ります。コードにモデル名を書き込まないでください。デフォルトモードはOffです。 </mod> <mod name="ide-usage"> $.ui.statusで1つのステータス行: "ctx 20% · <model>"。session.measureフックで更新します。ペインなし。 </mod> <mod name="ide-statusbar"> $.ui.statusで1つのステータス行: "<language> · <file name>"。エクスプローラーで開いているファイル、またはClaudeが最後に読み取ったか編集したファイル用。言語をファイル拡張子から導出します。不明な拡張子には"Plain Text"を表示します。ペインなし。 </mod> <out_of_scope> - 複数セッションのウィンドウタブ(例: ⌘1と⌘2)。ターミナルアプリケーションがこれらを描画します。modはできません。 - ペイン内の完全なテキストエディター。Inputは1行です。 - 権限プロンプトへの変更。modはそこに描画できません。 このプロンプトにない機能を追加しないでください。機能が必要としない設定オプションを追加しないでください。 </out_of_scope> <safety> modはユーザーの権限で実行され、サンドボックス化されていません。注意深いレビュアーが受け入れるコードを書いてください: - 削除、名前変更、コミットの前に$.ui.askで確認してください。 - 破壊的なgitコマンドを決して実行しないでください。ユーザーに代わってツール呼び出しを承認しないでください。ファイルコンテンツやプロンプトをネットワークに送信しないでください。Browserツールはユーザーが入力または押したURLのみをフェッチします。 - 機能が必要としない環境変数や設定を読み取らないでください。"claude plugin validate"はenv読み取りと呼び出しをリストします。そのリストを短く保ってください。 - $.processに引数を配列として渡してください。ファイル名からシェル文字列を構築しないでください。 このビルド中、このリポジトリ内のファイルのみを編集してください。プッシュしないでください。プラグインをユーザー設定にインストールしないでください。元に戻すのが難しいアクションの前に私に尋ねてください。 </safety> <workflow> このタスクは長いです。コンテキストは自動的に圧縮されるため、トークンを節約するために早く停止しないでください。新しいコンテキストが続行できるように状態をファイルに保持してください: - PROGRESS.md: 完了したこと、次にすること、各決定とその理由。 - tests.json: 各受け入れテストの1エントリとステータスnot_started、failing、またはpassing。 - LIMITS.md: インストールされたAPIができない各機能と、代わりに構築したもの。 - 合格する各機能の1つのgitコミット。 各新しいコンテキストの開始時: PROGRESS.md、tests.json、LIMITS.md、gitログを読んでください。機能を追加する前にテストスイートを実行してください。 フェーズ0、調査。/plugin-authoringを実行してください。"claude --version"を実行してください。ドキュメントページと"diff"組み込みmodを読んでください。次にPLAN.mdを書いてください: 各機能が使用するイベントとメソッド、それぞれの存在を証明する型の行付き。異なる設計が必要な各機能をリストしてください。PLAN.mdを見せて、私が反対しない限り続行してください。 フェーズ1、スキャフォールド。リポジトリレイアウト、4つのマニフェスト、hooks.jsonファイル、コマンドのみを登録する空のregister.tsファイルを作成してください。各プラグインで"claude plugin validate --strict"を合格するまで実行してください。次に停止して、ホットリロードで再起動するこのコマンドを私に渡してください: claude --plugin-dir ./plugins/file-explorer --plugin-dir ./plugins/workspace --plugin-dir ./plugins/ide-usage --plugin-dir ./plugins/ide-statusbar 私が"continue"と入力した後、.claude-plugin/types/の生成された型を読み、PLAN.mdを修正してください。 フェーズ2、file-explorer。この順序で構築: ツリーモデルとFilesタブ、ファイル検索、Codeタブと検索、Diffタブ、https://t.co/crzRXVIH3H。コードの前に機能のテストを書いてください。 フェーズ3、workspace。最初にナビゲーターとセッションインデックスを構築してください。次にリストされた順序でツールを構築してください。次のツールを開始する前に1つのツールを完了してテストしてください。 フェーズ4、ステータス行。ide-usageとide-statusbarを構築してください。 フェーズ5、リリース。marketplace.json、LICENSE、README.mdを書いてください。READMEは: 各modが何をするか、インストールコマンド(claude plugin marketplace add、claude plugin install <name>@MARKETPLACE)、テストしたClaude Codeバージョン、コマンド、ホットキー、各modが到達できるもの(validateの"hooks:"と"calls:"行から)、LIMITS.mdの内容。完全な検証を実行してください。 直接作業してください。多くのファイルにわたる検索でコンテキストを必要としない場合にのみサブエージェントを使用してください。 </workflow> <tests> テストは"claude plugin test"で実行され、セッションもネットワークも必要ありません。テストはイベントを発火し、キーでコントロールを押し、描画または結果をチェックします。$.fs、$.process、$.http、$.storeをスタブしてください。 動作をチェックするテストを書いてください。例: - スタブツリーでの"auth"の検索が正しいファイルを返し、一致したテキストをマークし、500で停止する。 - ":42"が42行目を選択する。"/re(fresh)?/"が正しい一致を見つける。無効な正規表現はエラー行を表示し、スローしない。 - Source Control行のプレスがhttps://t.co/crzRXVIH3Hをtab "diff"で呼び出す。 - マニフェストファイルのないRun Tasksが"No task found"行を表示する。 - 存在しないgitプログラムが1つの明確な行とエラーなしを与える。 - セッションインデックスが200セッションを保持し、別のセッションからの新しい書き込みとマージする。 - Model RouterがOffモードとSuggestモードでnext(e)を変更せずに返す。 各有効な入力に対して正しい一般的なコードを書いてください。テストを満たすためだけのコードを書かないでください。テストを削除または弱めて合格させないでください。テストが間違っているか機能が不可能な場合、私に伝えてください。 </tests> <done_when> 1. "claude plugin validate --strict"が各プラグインで合格する。 2. "claude plugin test"が各プラグインで合格し、tests.jsonにfailingまたはnot_startedのエントリがない。 3. 各プラグインの"tsc -p"が生成された型に対してエラーを報告しない。 4. 各コマンドが"claude -p"で応答する(例: claude -p "/explorer" --plugin-dir ./plugins/file-explorer)エラーなしで。 5. LIMITS.mdがこのプロンプトからの各違いをリストする。 6. ライブセッションでのみ人がチェックできるアイテムのチェックリストを私に渡す: 各ペインが開く、ホットキーが機能する、レイアウトが110と144カラムで収まる。 </done_when> <reporting> 各フェーズの後、短いレポートを書いてください: 構築したもの、実行した正確なコマンド、その結果、検証されていないもの。"テストが合格する"と"セッションで機能するのを見た"を分離してください。何かを実行していない場合、実行していないと言ってください。 </reporting> [プロンプトの終わり]