codedrobe-theme

CodeDrobe テーマ

公開されている @codedrobe/core CLI のみをランタイムとして使用します。このスキルは手順の説明に限定し、インジェクター、起動スクリプト、パッケージパーサー、アプリケーションパッチャーをスキル内に再実装しないでください。

リクエストの振り分け

1. 対象アプリを明示的に特定します。サポート対象やデフォルト設定が不明な場合は、codedrobe apps --json を実行します。
2. インストール済み、npm、または Bun のコマンドランナーを選ぶ前に、references/cli.md を読みます。
3. 対象に応じたリファレンスのみを読みます。
   • Codex：references/codex.md
   • WorkBuddy：references/workbuddy.md
   • QoderWork：references/qoderwork.md
   • TRAE SOLO：references/traework.md
4. テーマの作成、画像、CSS、パッケージ化、またはレガシー形式からの変換については、references/theme-authoring.md を読みます。
5. リクエストに添付画像またはローカルのビジュアルリファレンスが含まれる場合は、references/reference-image.md を読みます。
6. 新しい CSS の作成または修正については、references/dom-snapshot.md と references/css-templates.md を読みます。
7. Miku Future Beats / 初音未来 の完全な例については、references/miku-future-beats-example.md を読みます。
8. プローブ、検証、スクリーンショット、ノードの欠落、CDP の失敗、またはアプリの更新については、references/verification.md を読みます。
9. CodeDrobe ストアにテーマを公開または申請するには、references/publish.md を読みます。

よくあるリクエストの解釈

• 「参考这张图片，帮我生成一个 Codex 皮肤」：提供された画像を確認し、実行中の Codex の DOM スナップショットから Codex 用のテーマを作成してパッケージ化し、Codex のネイティブ UI で検証します。
• 「把这个视觉风格同时做成 Codex 和 WorkBuddy 皮肤」：ターゲットごとに CSS を分け、名前付き画像アセットを共有するテーマパッケージを 1 つ作成します。
• 「用玩偶姐姐示例改成蓝色版本」：同梱のサンプルを編集可能なプロジェクトにコピーし、トークンとアセットを変更して、実行中のセレクターを更新し、リクエストされた両方のコンテキストで検証します。
• 「这个主题更新应用后错位了」：最新のスナップショットを取得し、テーマ CSS とテーマ固有の検証ノードを修正してから、再パッケージ化し、スクリーンショットを比較します。
• 「帮我安装这个 .codedrobe-theme」：提供されたパッケージを確認、プローブ、適用、検証します。検証に失敗し、ユーザーから修正を求められた場合を除き、再作成しないでください。
• 「从商店装一个复古主题到 Codex」：codedrobe theme search でスラッグを特定します（複数候補が一致する場合は選択を確認します）。続いて codedrobe theme download を実行します（整合性を検証し、~/.codedrobe/themes に保存します）。その後、通常の確認 → プローブ → 適用 → 検証の手順を実行します。
• 「把这个主题发布到 CodeDrobe 商店」：theme.catalog の掲載メタデータを完成させてパッケージ化し、ユーザーに確認したうえで codedrobe theme publish を実行します（--submit は別途確認が取れた場合のみ使用します）。

指定された対象アプリは明示されたものとして扱います。対象が指定されておらず、提供されたパッケージや現在のタスクからも推測できない場合は、起動や適用を行う前に、簡潔な質問を 1 つだけします。

既存のテーマを適用する

1. 適用する前にパッケージを確認します。
2. アプリケーションを検出し、ユーザー指定のインストールパスや CDP ポートを解決します。
3. 選択したテーマで実行中のレンダラーをプローブします。互換性はウィンドウごとに判定します。必要なアダプターまたはテーマノードが不足しているウィンドウはスキップされ、適用が失敗するのは条件を満たすウィンドウが 1 つもない場合のみです。アプリがまだ読み込み画面にある状態でプローブすると、すべてのランドマークが欠落していると報告されます。互換性がないと判断する前に、ルートランドマークが表示されるまで待ちます。
4. テーマを適用します。実行中のアプリケーションを終了して再起動する許可をユーザーから得ていない限り、--restart-existing は追加しないでください。
5. インストールしたテーマを検証し、見た目の確認が重要な場合は絶対パスを指定してスクリーンショットを撮影します。
6. テーマが両方のコンテキストをスタイル設定する場合は、ホーム画面と通常の会話の両方を確認します。

references/cli.md の説明に従ってコマンドランナーを選択した後、以下の形式でコマンドを使用します。

codedrobe theme inspect /absolute/theme.codedrobe-theme
codedrobe probe --app <app-id> --theme /absolute/theme.codedrobe-theme
codedrobe apply --app <app-id> --theme /absolute/theme.codedrobe-theme
codedrobe verify --app <app-id> --theme /absolute/theme.codedrobe-theme --screenshot /absolute/preview.png

テーマの作成または修復

1. 提供された参考画像を確認し、CSS を記述する前に簡潔なビジュアルブリーフを作成します。参考スクリーンショットをウィンドウ全体に重ねて表示してはいけません。
2. ニュートラルなベースには assets/theme-starter/ を、複数アプリに対応する完全なサンプルには assets/examples/miku-future-beats/ をコピーします。インストール済みの Skill を直接編集してはいけません。
3. テーマの適用対象となる各アプリのコンテキストを開き、それぞれについて個別に codedrobe dom snapshot を取得します。テンプレートだけからセレクターを推測してはいけません。
4. スナップショットからセマンティックな候補を選び、html.codedrobe-host-<app-id> の下にアプリ固有の CSS を記述します。
5. 共通のアートワークは名前付きの images に保存し、アプリ固有のセレクターは該当するターゲットの CSS に記述します。
6. アダプターのランドマークは汎用的なものに保ち、テーマのレイアウトに関する前提はテーマ固有の検証ノードに記述します。
7. Core でパッケージ化し、出力を確認した後、実際のレンダラーでプローブして適用します。
8. ホーム画面と会話画面のスクリーンショットをもとに反復します。静的な CSS、スナップショット、またはパッケージの検証だけで成功したと判断してはいけません。

復元

アプリケーションデータの削除やホスト設定の手動編集ではなく、Core の復元機能を使用します。

codedrobe restore --app <app-id>

CodeDrobe のレンダラー状態とテーマスタイルが消去されたことを確認します。Codex の場合は、トランザクション方式で保存されたベーステーマのバックアップが存在していたときに、それが復元されていることも確認します。

ガードレール

• アプリケーションバンドル、app.asar、または WindowsApps のファイルにパッチを適用したり、置き換えたり、再署名したり、所有権を取得したりしてはいけません。
• CDP はループバックのみにバインドし、起動、適用、監視、検証、復元で一貫した単一のポートを使用します。
• ユーザーから明示的な許可を得ずに、既存のアプリケーションを終了または再起動してはいけません。
• 同じレンダラーに対して、競合する複数のテーマウォッチャーを実行してはいけません。
• テーマパッケージは信頼できない入力として扱います。テーマの JavaScript を評価したり、外部 CSS リソースを許可したりしてはいけません。
• 装飾レイヤーは操作できない状態に保ち、ネイティブのナビゲーション、入力欄、メニュー、アクセシビリティの動作を維持します。
• 承認されていない画像サービスに、非公開の参考画像をアップロードしてはいけません。
• 公開には codedrobe theme publish のみを使用し、即席のエンドポイントを使用してはいけません。公開とレビューへの提出には、それぞれユーザーの明示的な確認が必要です。また、サインインにはユーザーが承認したデバイスフローを使用します。