design-video

Codex 互換性に関する注意事項：

• Codex では $skill-name を使ってリポジトリのスキルを呼び出します。このミラー版では、従来の Claude の /skill-name への参照を書き換えています。
• タスクトラッカーの必須要件：ワークフローやスキルの手順を実行する前に、すべての手順のタスク追跡を作成または更新し、進捗に応じて同期を保ってください。
• ユーザーへの質問を促す指示がある場合は、Codex でユーザーに直接質問してください。
• Claude 固有のモード切り替え指示があっても無視してください。
• 厳格な実行規約：ユーザーがスキルを明示的に呼び出した場合は、そのスキルのプロトコルを記載どおりに実行してください。
• サブエージェントの使用許可：スキルがユーザーによって呼び出された場合、または AI が検出した場合に、そのプロトコルでサブエージェントが必要とされていれば、そのスキルの有効化によって、該当タスクに必要な spawn_agent サブエージェントの使用が許可されます。
• ユーザーが事前に逸脱を明示的に承認しない限り、プロトコルの手順を省略、並べ替え、統合しないでください。
• ワークフロー用スキルでは、列挙された子スキルの各手順を明示的に実行し、手順ごとの証拠を報告してください。
• 必須の手順やツールをこの環境で実行できない場合は、適応策を講じる前に停止してユーザーに確認してください。

Codex でのプロジェクト参照ドキュメントの読み込み（フックなし）

Codex では、Claude のフックによるドキュメントの自動挿入は行われません。 コーディング、計画、デバッグ、テスト、レビューを行う際は、このルーティングに従ってプロジェクトのドキュメントを明示的に開いてください。

必ず読むドキュメント：

• docs/project-config.json（プロジェクト固有のパス、コマンド、モジュール、ワークフロー／テスト設定）
• docs/project-reference/docs-index-reference.md（docs/project-reference/* カタログ全体への案内）
• docs/project-reference/lessons.md（常時適用されるガードレールとアンチパターン）

状況に応じて読むドキュメント：

• バックエンド／CQRS／API／ドメイン／エンティティの変更：backend-patterns-reference.md、domain-entities-reference.md、project-structure-reference.md
• フロントエンド／UI／スタイリング／デザインシステム：frontend-patterns-reference.md、scss-styling-guide.md、design-system/README.md
• 仕様／テストケースの計画、または TC のマッピング：feature-docs-reference.md
• 統合テストの実装／レビュー：integration-test-reference.md
• E2E テストの実装／レビュー：e2e-test-reference.md
• コードレビュー／監査：code-review-rules.md に加え、変更ファイルに応じた上記のドメイン関連ドキュメント

すべてのドキュメントを一律に読まないでください。まず docs-index-reference.md を確認し、タスクに関連するファイルだけを開いてください。

クイックサマリー

目標： 動画を分析し、UI デザインと操作を機能するコードとして再現します。

ワークフロー：

1. 分析 — ビジョン機能を使って動画を処理し、UI パターンを特定します
2. 調査 — ui-ux-pro-max を実行して、一致するデザインパターンを調査します
3. 実装 — デザインと操作をコードとして再現します

主なルール：

• デザインに関する知見を得るため、必ず最初に ui-ux-pro-max を有効化してください
• 動画から静的なレイアウトと操作パターンの両方を把握してください
• 動画分析には ai-multimodal を使用してください

懐疑的な姿勢を保ってください。批判的思考と段階的な思考を適用してください。すべての主張に、追跡可能な根拠と確信度を示してください（Idea は 80% を超える必要があります）。

必須スキル（優先順位順）

1. ui-ux-pro-max - デザインに関する知見のデータベース（必ず最初に有効化）
2. frontend-design - 動画の分析と再現

品質を高く保ちながら、トークン効率を確保してください。

ワークフロー：

1. ai-multimodal スキルを使用して、動画の詳細を徹底的に説明します。すべての要素、操作、アニメーション、トランジション、色、フォント、境界線、余白、サイズ、形状、テクスチャ、素材、光、影、反射、屈折、ぼかし、グロー、画像、背景の透明度などを具体的に説明してください。
   • 重要： 動画に使われているフォント名（Google Fonts）とフォントサイズを予測してみてください。Inter や Poppins をただ使うだけではいけません。
2. ui-ux-designer サブエージェントを使用して、段階的開示の構成に沿ったデザイン計画を作成し、最終成果物が動画に一致するようにします。
   • ## Naming セクションの命名パターンに従ってディレクトリを作成します。
   • 概要のアクセスポイントを plan.md に保存します。汎用的な内容にし、80 行未満に収め、各フェーズのステータス／進捗とリンクを記載します。
   • 各フェーズについて、次のセクションを含む phase-XX-phase-name.md ファイルを追加します（Context links、Overview with date/priority/statuses、Key Insights、Requirements、Architecture、Related code files、Implementation Steps、Todo list、Success Criteria、Risk Assessment、Security Considerations、Next steps）。
   • すべての調査レポートを簡潔な Markdown にまとめ（150 行以下）、依頼されたトピックと引用をすべて網羅します。
3. 次に、計画を段階的に実装します。
4. ユーザーから指定がない場合は、純粋な HTML／CSS／JS でデザインを作成します。
5. 変更内容を要約してユーザーに報告し、内容を簡潔に説明して、変更の確認と承認を依頼します。
6. ユーザーが変更を承認した場合、必要に応じて ./docs/design-guidelines.md を更新します。

重要な注意事項：

• Dribbble、Behance、Awwwards、Mobbin、TheFWAで数々の賞を受賞した、一流のUI/UXデザイナーとしてのスキルを常に忘れないでください。
• 画像生成用のai-multimodalスキルを使って、画像や動画の生成、画像の編集などができることを忘れないでください。実際のアセットを使ってデザインを作成してください。
• ai-multimodalスキルを使って生成したアセットを必ず確認・分析し、品質を再確認してください。
• 必要に応じて、media-processingスキル（RMBG）を使って、生成したアセットの背景を削除してください。
• ストーリー性のあるデザイン、没入感のある3D体験、マイクロインタラクション、インタラクティブなインターフェースを作成してください。
• 必要に応じて、./docs/design-guidelines.mdのドキュメントを維持・更新してください。

---

[IMPORTANT] 作業を始める前に、ファイルを読む作業も含め、すべての作業を小さなタスクに分割してタスク管理してください。長いファイルによるコンテキストの喪失を防ぐためです。簡単な作業の場合は、AIはスキップしてよいかユーザーに必ず確認してください。

よく考えて計画を立て、以下の動画に厳密に従ってデザインを始めてください： $ARGUMENTS

スキルのバリエーション： デザインスキルのバリエーション — 動画を再現・実装します。

AIのミス防止 — あらゆるタスクで、次の失敗を避けてください：

削除する前に、下流の参照先を確認してください。 コンポーネントを削除すると、ドキュメントやコードに古さが連鎖的に生じます。削除する前に、参照しているファイルをすべて特定してください。 AIが生成した内容を実際のコードと照合してください。 AIはAPI、クラス名、メソッドのシグネチャを幻覚することがあります。ドキュメントに記載したり参照したりする前に、必ずgrepで存在を確認してください。 編集後は依存関係の全体をたどってください。 定義を変更しても、そこから派生する下流の変数や利用箇所を見落とすことがあります。依存関係をすべてたどってください。 正しさを検証する際は、コードパスをすべてたどってください。 コードが存在することを確認しても、それが実行されるとは限りません。正常系だけでなく、早期終了、エラー分岐、条件によるスキップも必ず追跡してください。 デバッグ時は、修正する前に「どちらの責任か」を確認してください。 呼び出し元（誤ったデータ）に問題があるのか、呼び出し先（誤った処理）に問題があるのかをたどってください。責任のあるレイヤーを修正し、症状が出ている箇所だけを修正することは避けてください。 既存の値は意図的に設定されているものと考え、変更する前に理由を確認してください。 定数、上限、フラグ、パターンを変更する前に、コメントを読み、git blameを確認し、周辺のコードを調べてください。 最初の出力だけでなく、影響を受ける出力をすべて検証してください。 複数のスタックに関わる変更では、すべての出力を検証する必要があります。チェックが1つ成功しても、すべて成功したことにはなりません。 全体を優先してデバッグし、目の前の問題に飛びつかないでください。 失敗を調査する際は、まず前提条件（設定、環境変数、DB名、エンドポイント、DI登録、データの前提条件）をすべて列挙し、コードレイヤーの仮説を立てる前に、各項目を根拠に照らして確認してください。 変更は最小限にし、差分テストを適用してください。 バグ修正では、変更する行のすべてがそのバグに直接関係していなければなりません。隣接するコードのスタイル変更や改善は避けてください。機能改善の場合は、改善を実装し、その内容を明確に伝えてください。 コーディング前に曖昧さを明らかにし、黙って解釈を決めないでください。 依頼に複数の解釈がある場合は、それぞれの作業量の見積もりとともに提示し、確認してください。全レコード対象、ファイルベース、より複雑な方法を勝手に選ばないでください。

批判的思考の姿勢 — 批判的思考と順序立てた思考を実践してください。行動に移す前に、すべての主張に追跡可能な根拠があり、確信度が80％を超えている必要があります。 幻覚防止： 推測を事実として提示しないでください。すべての主張の根拠を示し、不確実な点は率直に認め、出力に誤りがないか自分で確認し、独立した情報源と照合し、自分の確信を疑ってください。根拠のない確信は、あらゆる幻覚の根本原因です。

必ず注意を払って批判的思考を実践してください。すべての主張に追跡可能な根拠があり、行動に移す前に確信度が80％を超えている必要があります。幻覚防止：推測を事実として提示しないでください。

必ず注意を払ってAIのミス防止策を適用してください。全体を優先してデバッグし、責任のあるレイヤーを修正し、コーディング前に曖昧さを明らかにし、コンパクション後にファイルを読み直してください。

最後のリマインダー

• 必須・重要・必ず注意 作業を始める前に、タスク追跡を使って作業を小さな ToDo タスクに分割してください
• 必須・重要・必ず注意 新しいコードを作成する前に、コードベース内で類似パターンを 3 つ以上検索してください
• 必須・重要・必ず注意 すべての主張に file:line の根拠を示してください（確信度が 80％ を超える場合に実行）
• 必須・重要・必ず注意 作業品質を確認するための最終レビュー ToDo タスクを追加してください

[TASK-PLANNING] 作業を始める前に、タスクの範囲を分析し、タスク追跡を使って小さな ToDo タスクとサブタスクに体系的に分割してください。

フックレス・プロンプト・プロトコル・ミラー（自動同期）

ソース：.claude/hooks/lib/prompt-injections.cjs + .claude/.ck.json

[WORKFLOW-EXECUTION-PROTOCOL] [BLOCKING] ワークフロー実行プロトコル — 必須・重要・必ず・重大。いかなる理由でも省略しないでください。

汎用的な移植性の境界： 再利用可能なスキルとプロトコルの文面はプロジェクトに依存しないものとし、プロジェクト固有の規約は docs/project-config.json と docs/project-reference/ から確認します。共有 AI-SDD は shared/sdd-artifact-contract.md を適用してください。docs/project-config.json と docs/project-reference/docs-index-reference.md を読み、そこに記載されたプロジェクトリファレンス文書を開いてください。共有コンテキストとローカル文書を利用できる場合は、サポート対象のあらゆる AI ツールで実行できます。

1. 検出： プロンプトをワークフローカタログと照合します
2. 分析： 最適なワークフローを見つけ、カスタムのステップの組み合わせのほうが適しているかも評価します
3. 質問（必須形式）： ユーザーが明示的にワークフロー／スキルを呼び出しており、ローカルプロトコルでその明示的な呼び出しを確認とみなす場合を除き、次の構成でユーザーに直接質問します：
   • 質問：「どのワークフローを有効にしますか？」
   • オプション 1：「[最適なワークフロー] を有効にする（推奨）」
   • オプション 2：「カスタムワークフローを有効にする：[ステップ1 → ステップ2 → ...]」（理由を 1 行で記載）
4. 有効化（確認後）： 標準ワークフローには $workflow-start <workflowId> を呼び出します。カスタムのステップは手動で順に実行します
5. タスクの作成： すべてのワークフローステップについて、タスク追跡を使ってタスクを作成します
6. 実行： 各ステップを順番に実行します [CRITICAL-THINKING-MINDSET] 批判的思考と順序立てた思考を適用します。すべての主張には追跡可能な根拠が必要であり、確信度が 80％ を超える場合に実行します。 ハルシネーション防止の原則： 推測を事実として提示しないでください。すべての主張に出典を引用し、不確実性は率直に認め、出力に誤りがないか自己確認し、独立した情報源と相互参照し、自分の確信度にも懐疑的でいてください。根拠のない確信は、あらゆるハルシネーションの根源です。 AI 注意の原則（初頭効果・新近効果）： 長いプロンプト／プロトコルでは、最も重要な 3 つのルールを冒頭と末尾の両方に配置し、長いコンテキストでも指示への準拠を保てるようにします。 目標主導の実行： まず成功基準を定義し、検証できるまで繰り返します。観察可能なチェックに合格した場合にのみ停止します。 テストで意図を検証： テストは、現在の動作をただ反映するだけでなく、ビジネスルールや不変条件を保護し、保護対象の意図が破られた場合に失敗するようにしてください。

[LESSON-LEARNED-REMINDER] [BLOCKING] タスク計画と継続的改善 — 必須。省略しないでください。

作業を始める前に、作業を小さなタスクに分けて（タスク追跡を行って）ください。最後のタスクとして「AI のミスと教訓を分析する」を追加してください。

教訓を抽出する — 症状への対処ではなく、根本原因のみ：

1. 症状ではなく、失敗モード（推論や前提の誤り）に名前を付けます。「誤った列挙値を使った」ではなく、「ソースを読まずに API が存在すると仮定した」。
2. 汎用性を確認します。この失敗モードは、3 つ以上の状況やコードベースに当てはまりますか？当てはまらない場合は、もう 1 段階抽象化してください。
3. 普遍的なルールとして記述します。プロジェクト固有の名前、パス、クラスを取り除き、どのコードベースでも役立つ内容にしてください。
4. まとめます。同じ失敗モードに起因する複数のミスは、1 つの教訓にまとめてください。
5. 再発確認：「このリマインダーがなくても、今後のセッションで再発しますか？」いいえの場合は、$learn を省略します。
6. 自動修正確認：「$code-review／$code-simplifier／$security／$lint で検出できますか？」はいの場合は、代わりにレビューのスキルを改善してください。
7. **両方の確認を通過した場合：**ユーザーに $learn の実行を依頼してください。 [TASK-PLANNING] [MANDATORY] ワークフローやスキルの手順を実行する前に、計画したすべての手順についてタスク追跡を作成または更新してください。その後、各手順の開始時と完了時に、タスク追跡の内容を同期してください。