codedrobe-one-shot-theme

CodeDrobe One-Shot Theme

一文から、完成した Codex テーマを作成します。実行時には公開されている @codedrobe/core のみを使用し、インジェクターを再作成したり、アプリのバンドルにパッチを適用したり、テーマの JavaScript を評価したりしないでください。

リクエストを解釈する

ユーザーの一文から、テーマのスラッグ、名前、カラーパレット、タイポグラフィの方向性、ホームのヒーロー構成、会話の透かし、短いタグラインを含む、趣味のよいデザインシステムを推定します。妥当にデザインできる詳細については質問しないでください。対象アプリが Codex ではない場合、必須の参考画像が不足している場合、または要求された操作がテーマ作成の範囲を実質的に超える場合に限り、質問してください。

install、apply、直接安装、直接装上、または同等の表現は、Core が必要とする場合に Codex を終了して再起動する許可とみなします。作成／エクスポートのみのリクエストは、再起動や適用の許可とはみなしません。

デザイン仕様を記録する

アートワークや CSS を作成する前に、次の項目を記録します。

• ネイティブのレイアウトを維持するか、範囲を限定したエディトリアルレイアウトにするか
• backgroundScope：home または workspace
• decorDensity：minimal、balanced、または rich
• ライト／ダークモードと、その視覚的な理由
• アートワークの焦点と、テキストを配置しやすい領域
• セマンティックカラーパレット
• 変更を許可するサーフェスと、維持するネイティブの形状／状態
• デスクトップおよび狭い画面の検証ビューポート

既定では、ネイティブのレイアウトを維持し、アートワークはホームのみに使用し、装飾はバランスよく配置します。ユーザーが会話画面で明示的に希望した場合に限り、workspace のアートワークを使用してください。依頼がライト、エディトリアル、花柄、紙、パステル、または生産性重視の場合は、ダークモードを既定にしないでください。

必要なものだけを読み込む

• ランナーの選択については、references/cli.md を読みます。
• ホストの設定と復元については、references/codex.md を読みます。
• Windows では、検出、再起動、適用、検証の前に references/windows.md を読みます。
• テーマの作成または修正の前に、references/one-shot-lessons.md を読みます。
• マニフェスト、画像、検証ノード、パッケージを変更する場合は、references/theme-authoring.md を読みます。
• 実行中のチェックについては、references/dom-snapshot.md と references/verification.md を読みます。
• 最終的な適用／検証の前、またはスクリーンショットに基づく修正後に、references/visual-acceptance-checklist.md を読みます。
• 2つ目の完全なデザイン例が役立つ場合に限り、references/doll-sister-example.md を読みます。

ワンショットワークフロー

1. references/cli.md で選択したランナーを使って、codedrobe apps --json と codedrobe detect --app codex --json を実行します。
2. ~/.codexskins/sources/<theme-slug>/ に書き込み可能なソースを作成し、~/.codexskins/exports/<theme-slug>.codedrobe-theme にエクスポートします。ユーザーがそこでバージョン管理されたソースを明示的に希望する場合に限り、プロジェクトのワークスペースを使用します。このインストール済み Skill を直接編集してはいけません。
3. assets/one-shot-starter/ をそのソースディレクトリにコピーします。
4. コンセプトにアートワークが役立つ場合は、利用可能な画像生成スキル／ツールを呼び出します。オリジナルのワイドヒーロー画像を生成し、被写体を右側に、UI用の余白を左側に配置します。横幅の広い Codex ヒーローで切れないよう、被写体の全体、手足、衣服、小道具、動きの軌跡を、上端と右端から8～12％のセーフエリア内に収めます。完成画像をテーマソース内の assets/hero.png にコピーします。プロジェクトのアセットを生成画像キャッシュにだけ残してはいけません。
5. theme.json のすべてのプレースホルダーを置き換え、トップレベルの CSS トークン、タグライン、縦書きシールラベル、ヒーロー画像のクロップ、レスポンシブ動作をカスタマイズします。rendererProfile: codex-theme-v1 は維持します。
6. 共有シェルのスタイルはルートに依存しないようにします。会話のアートワークは main.main-surface::before に配置し、ホームでは無効にします。大きなホーム用アートワークは .dream-home 内に配置します。両方のレイヤーを同時に表示してはいけません。2つのクロップは別々に扱います。ホームのヒーロー画像は高さに合わせてフィットさせ、右端にぴったり揃えます。ワークスペースの背景が必要な場合は、読みやすさを保つためのウォッシュを重ねて、会話キャンバス全体を覆うようにします。右側に目に見えるビットマップの端、空白の継ぎ目、恣意的なインセットを残してはいけません。
7. .codedrobe-theme をパックして検査します。ガード対象の .dream-home 構造に関する位置警告は、指定されたホーム検証ノードが存在し、セレクターが現在の Core プロファイルに一致する場合に限り許容されます。
8. CDP にすでに接続できる場合は、プライバシーに配慮した Core スナップショットでアクティブなコンテキストを取得し、probe を実行して、ウォッチャーを1つだけ起動して適用し、検証します。
9. Codex 内から適用する場合は、codedrobe-theme-manager を優先します。これにより、グローバルに管理されるウォッチャーが1つだけとなり、以前のアクティブなテーマに置き換わります。この Skill が利用できない場合は、バンドルされたプラットフォーム用ヘルパーを選択します。
   • macOS：scripts/macos_apply_theme.py --theme <absolute-package> --restart-existing を実行します。
   • Windows：node scripts/windows_apply_theme.mjs --theme <absolute-package> --restart-existing を実行します。 どちらのヘルパーも、Codex の再起動後もインストールが継続するよう、Core ウォッチャーを1つだけデタッチして起動します。同じテーマに対して別のウォッチャーを起動してはいけません。
10. Codex が戻ったら、ヘルパーのログを読み、Core の verify を絶対パスのスクリーンショットパスで実行し、スクリーンショットを確認します。テーマの ID／バージョン、hero、プロファイル、必須ランドマーク、オーバーフローがないこと、コンテンツの読みやすさを確認します。デスクトップ幅でホームと通常のタスクの両方を確認します。ホームの焦点となる被写体が右端の隙間なく全体表示されていること、ワークスペースの背景が元画像の境界を露出させず会話サーフェス全体を覆っていることを確認します。プロジェクトセレクターを監視しながら、ホームへ一度再読み込みするか切り替えます。Core が挿入される前のネイティブな最初のフレームが暗い場合は、最終的なプロジェクトドックを、読みやすいテーマ付きコントロールを備えた互換性のある暗いサーフェスとして設計し、黒から明るい色へのちらつきを避けます。ネイティブの幅、高さ、位置は維持します。横幅の広い構図が必要な場合は、独立したヒーローシェルだけを拡張します。アプリにパッチを適用したり、プリローダーを独自に作成したりしてはいけません。
11. references/visual-acceptance-checklist.md に記載された、該当するすべての状態で確認します。ネイティブのホバー時のみ表示されるコントロールと非表示のコントロールは、静的な色だけでなく、状態として検証します。選択中のプロジェクトラベルを修正するセレクターによって、非表示のプロジェクトクリアボタンを表示したり、SVG パスを再描画したり、外側のフッタースクリムの修正中にネストされたコンポーザーのフェードを削除したりしてはいけません。 完了レベルは個別に扱ってください。設計済み、静的検査済み、適用済み、実環境で検証済み、エクスポート済みを区別します。プレビューやパッケージ検査の成功を、実際のアプリが検証済みであるという主張にすり替えないでください。

必須の CSS 不変条件

• アプリケーションのルールは html.codedrobe-host-codex または html.codedrobe-codex-skin の下にスコープしてください。
• #codedrobe-codex-skin-chrome { pointer-events: none !important; } を含めてください。
• pointer-events: none を指定した会話アートワークのレイヤーは、1 つだけ含めてください。
• backgroundScope にワークスペースが含まれる場合、そのレイヤーで会話の表示領域全体を覆い、コントラストを確保するために独立した半透明のウォッシュを使用してください。auto <percent> のビットマップを領域内に限定したものは透かしであり、全面背景ではありません。また、画像の縁がはっきり見える状態にしないでください。
• .dream-home ではこのレイヤーを無効にし、幅の狭い画像ストリップではなく、少なくとも 250px の高さがある専用のホームヒーローを使用してください。
• Codex の横幅が大きいホームバナーに 2:1 の画像を配置する場合は、auto 100% や right center のように、高さに合わせる配置を優先してください。被写体の主要部分が切れる場合は cover を使用せず、隙間ができる右オフセットも追加しないでください。
• ネイティブのナビゲーション、プロジェクト選択、コンポーザー、スクロール、フォーカスリング、メニュー、動きを減らす設定が引き続き機能するようにしてください。
• 外部の @import、リモート CSS URL、スクリプト、ローカライズされたコピーを使ったセレクター、偽の全ウィンドウスクリーンショットオーバーレイは使用しないでください。

ルートとウォッチャーの動作

Codex はタスクと New task を切り替えるときにレンダラーを置き換える場合があります。そのため、一度だけの注入に成功しても、片方のルートには色が付き、もう片方にはテーマが適用されないことがあります。インストール済みテーマには、常に Core の --watch オーナーを 1 つだけ使用してください。このワークフローが所有するウォッチャーのみを停止または置き換え、ウォッチャーを重複させないでください。

Computer Use では Codex 自体を操作できません。この制限を回避しないでください。アクティブなルートには Core のスナップショットを使い、ルートのスタイル設定には信頼できるレンダラープロファイルを使ってください。実環境で検証したコンテキストとプラットフォームを正確に明記してください。このワークフローが Windows のハードウェア上で正常に完了するまでは、Windows のサポートをベータ版として扱ってください。

修復ループ

ユーザーからスクリーンショットが提供されたら、編集前に確認してください。変更箇所を絞ってバージョンを 1 回更新し、再パッケージ化して、以前から所有するウォッチャーを停止し、新しいウォッチャーを起動して、検証を行い、新しいスクリーンショットを確認してください。一般的な修復方法は references/one-shot-lessons.md に記載されています。

プライバシーに配慮したライブ DOM スナップショットを使って、表示されているノード、その親要素の階層、計算済みの色、背景、境界線、影、不透明度、ジオメトリを特定してください。症状を引き起こしている、最も範囲の狭いセマンティックレイヤーを修正してください。適用後にもう一度スナップショットを取得し、近くのネイティブレイヤーの計算済みの動作が変わっていないことを確認してください。アクティブなルートで一時的なネイティブコントロールを表示できない場合は、インストール済みアプリケーションのバンドルを読み取り専用で調べ、そのコンポーネントのクラスと状態の契約を確認してください。アプリケーションにファイルをパッチしたり、ファイルを取り出して戻したりしてはいけません。

プラットフォームヘルパーから空の応答が返った場合は、成功ではなく不明として扱ってください。Core の verify を実行し、インストール済みのバージョンを直近でパッケージ化したマニフェストと比較してください。所有するヘルパーを再試行するのは、実環境のバージョンが古い場合に限り、その後もう一度検証してください。パッケージ化またはヘルパーへの送信が終了コード 0 で完了しただけで、修復が実環境に反映されたと主張してはいけません。

完了

インストール済みのバージョン、パッケージのパス、スクリーンショットのパス、検証したコンテキスト、プラットフォームの証拠、マネージャーの復元コマンドを返してください。baseTheme を持つ Codex テーマの復元は 2 段階であることを説明してください。まず Core がレンダラーの状態を削除し、ディスク上のバックアップを復元します。次に、ヘルパーから restart-required が報告された場合は、Codex を完全に再起動する必要があります。承認された再起動後、新しい DOM スナップショットを取得し、アクティブなテーマやテーマクラスがないことを確認してください。パッケージ化だけ、または再起動前の復元だけを根拠に成功を主張してはいけません。

検証済みのパッケージをエクスポートした後、手動での提出ページ https://www.codexskins.org/submit/ と専用の codedrobe-theme-submitter スキルを案内してください。このクリエイタースキルからアップロードしてはいけません。また、作成または適用の承認を公開の承認として扱わないでください。