motion-graphics

AI 動画向けモーショングラフィックス

remotion-best-practices および cinematic-camera と併用してください。このスキルは、要件の聞き取り、調査、実物のアセット、参考例の選定、ビジュアル品質、納品の承認を担当します。

実行に関する必須条件

すべてのビルドで scripts/promptible-gate.mjs を実行し、合格する必要があります。

一般的なパス：

• Claude Code：.claude/skills/motion-graphics/scripts/promptible-gate.mjs
• その他のエージェント：.agents/skills/motion-graphics/scripts/promptible-gate.mjs

スクリプトに BUILD AUTHORIZED と表示されるまで、コンポジションのコードを書かないでください。DELIVERY AUTHORIZED と表示されるまで、レンダリング結果を納品しないでください。コマンドが失敗した場合は、必ず作業を停止してください。

ステージ 1 — 簡潔な要件の聞き取り

未確定の項目だけを確認します。

1. フォーマット：4:3 の半画面 Instagram 挿入素材（1440×1080） または 9:16 の全画面 Instagram（1080×1920）。明示的に依頼された場合に限り、16:9 を使用します。
2. 表面：暖色系の明るい配色、すっきりしたダーク配色、明るいグリッド、または 暗いグリッド。
3. 該当する台本の箇所、尺、製品名、検証済みの主張、提供されたアセット。

ダークを暗黙に既定の選択肢にしないでください。表面の選択をユーザーに任された場合は、暖色系の明るい配色を使用します。

ステージ 2 — 調査と実物のアセット

references/research-and-assets.md と references/logo-library.md を読みます。

コンセプトの作成前に、目的に必要な最小限の調査を行います。

• ユーザーから提供されたアセットを最優先し、そのまま使用してください。描き直したり、置き換えたりしないでください。
• 一般的な製品については、assets/logos/ に同梱されている適切なロゴをプロジェクトにコピーし、出典情報を保持してください。
• 見つからない場合は、信頼できるページを 1～3 件確認します。公式ブランドキットまたはホームページ、公式ドキュメントまたは製品ページ、次に信頼できる厳選アイコンソースの順に確認してください。
• 透明な SVG を優先してください。ロゴのスクリーンショット、検索結果のサムネイル、背景に市松模様やグレーが焼き込まれた画像、非公式の再作成物、リモートアセットへの直リンクは使用しないでください。
• ダッシュボードや製品 UI には、実際に提供されたスクリーンショットや録画、または公式公開製品ページ・ドキュメントのスクリーンショットを入手してください。入手できない場合はユーザーに確認し、ダッシュボードを捏造しないでください。
• ビジュアルの構成、用語、ブランドカラー、および該当する箇所に関連する具体的な操作や状態を調査してください。裏付けのない指標、非公開情報、主張をコピーしないでください。
• アセットとメモは .promptible/research/ にキャッシュしてください。製品、ソース、アセットのハッシュ、参考例の仕組みに変更がない場合は、キャッシュを再利用してください。

必要なビジュアルモードだけを選択します：logo-system、product-ui、terminal、editorial、または abstract。すべてのグラフィックにニュースレター、ダッシュボード、ターミナル、または複雑なカメラワークを無理に盛り込まないでください。

次の見出しを含む .promptible/research-brief.md を作成します。

## Product or concept
## Authoritative sources
## Real visual language
## Closest approved mechanism
## Motion plan
## Avoid

次に、以下を実行します。

node <skill-dir>/scripts/promptible-gate.mjs research \
  --project . \
  --research-mode authentic \
  --visual-mode product-ui \
  --product "Slack" \
  --reference kickbacks-same-run-editor \
  --brief .promptible/research-brief.md \
  --source https://slack.com/ \
  --logo public/research/slack.svg \
  --surface public/research/slack-dashboard.png

製品名のないコンセプト制作では、--research-mode abstract --visual-mode abstract を使用します。ブリーフと承認済み参考例との比較は引き続き必要ですが、不要なウェブやロゴの調査は省略できます。

ステージ 3 — 検証済み参考例の事前確認

references/approved-references.md を読みます。色ではなく、ストーリーの仕組みに基づいて選択してください。依頼により具体的な新しいコンセプトを作成することもできますが、最も近い承認済みの仕組みから、カメラの文法、スケール、抑制、因果に基づく動きを明示的に引き継ぐ必要があります。組み合わせられる仕組みは最大 2 つです。

以下を実行します。

node <skill-dir>/scripts/promptible-gate.mjs init \
  --project . \
  --research .promptible/research-manifest.json \
  --format 9:16 \
  --background warm-light \
  --claim-source user \
  --beat "Exact visual idea being supported" \
  --duration 6

init は調査とアセットを再検証し、同梱の承認済み MP4／コンタクトシートを SHA-256 で検証して、.promptible/render-brief.json を作成します。

同梱の MP4／コンタクトシートと調査した製品の根拠を実際に確認します。次の内容を含む .promptible/reference-observations.md を作成します。

## Composition
## Camera
## Identity
## Research match
## Anti-pattern

次に、以下を実行します。

node <skill-dir>/scripts/promptible-gate.mjs inspect \
  --project . \
  --observations .promptible/reference-observations.md

実装が許可されるのは、BUILD AUTHORIZED のみです。

ステージ 4 — 構築

調査で確認したアイデンティティと、選定したリファレンスの因果メカニズムを使用します。最初の提示から具体性が感じられる仕上がりにし、修正を促すためのテンプレートのようなものにしないでください。

必須ルール：

• ネオン、グロー、ブルーム、発光するエッジ、色付きのシャドウ、グラデーションのオーブやウォッシュ、シアンと紫のグラデーション、グラスモーフィズム、サイバーパンク風のライティング、雰囲気だけのAIスタイリングは一切使用しないでください。
• 汎用的なレシート、請求書、ドシエ、クリップボード、浮遊カード、バーコード、ゴム印、証明書、価格カード、偽のダッシュボード、または相互に関連のないカードグリッドを代替案として使用しないでください。
• 現実的なダッシュボードを使用できるのは、提供された証拠または信頼できる製品情報に基づく場合に限ります。表示されている構造を忠実に再現し、指標、主張、コントロール、製品の状態を決して捏造しないでください。
• UI、ロゴ、価格、順位、エンゲージメント、シリアル番号、証拠を捏造しないでください。
• 冗長な説明テキストは使用しないでください。実際のデータ、製品 UI、コマンド、コード、ファイル名、短い構造ラベルは使用できます。
• モーションでは、因果関係、拡大、置き換え、ナビゲーション、または状態変化を明らかにしてください。ロゴの切り替えや実際の UI 操作で意図が明確に伝わる場合は、動きを控えめにしても構いません。
• 行が現れる静止した中央オブジェクトをゆっくりズームするだけの表現は、シネマティックな演出ではありません。
• 大きく目立つ焦点オブジェクトを少数に絞ってください。現在のアクションは中央に配置し、目的のサイズでも全体が表示され、読み取れるようにしてください。
• 暗いシーンは任意です。暗くする場合はニュートラルなチャコールと平坦なアクセントを使用し、パネルを発光させないでください。

コンセプトを選ぶ前に references/rejected-patterns.md を読んでください。

ステージ 5 — 候補の証拠

候補をレンダリングします。3 フレームのコンタクトシートと ffprobe の JSON を生成します。6 秒の場合の例：

mkdir -p .promptible
ffmpeg -y -hide_banner -loglevel error -i out/candidate.mp4 \
  -vf "fps=3/6,scale=480:-1,tile=3x1:padding=12:margin=12:color=white" \
  -frames:v 1 .promptible/candidate-contact-sheet.jpg
ffprobe -v error -select_streams v:0 \
  -show_entries stream=width,height:format=duration -of json \
  out/candidate.mp4 > .promptible/candidate-probe.json

次に、以下を実行します：

node <skill-dir>/scripts/promptible-gate.mjs candidate \
  --project . \
  --render out/candidate.mp4 \
  --contact-sheet .promptible/candidate-contact-sheet.jpg \
  --probe .promptible/candidate-probe.json

ステージ 6 — 独立したビジュアル批評

ビルダー自身が自分の成果を評価してはいけません。次のものを用意し、クリーンな状態で独立した批評担当エージェント／サブエージェントを起動してください：

• references/visual-critic.md
• 調査ブリーフ／マニフェストと本物のアセット
• 選定済みの承認された MP4／コンタクトシート
• 候補の MP4／コンタクトシート
• .promptible/render-brief.json

批評担当は実際のメディアを検査し、templates/critic-output.example.json に一致する JSON を返します。独立したレビューを実行できない場合は停止してください。自分で承認してはいけません。

ステージ 7 — 納品ゲート

node <skill-dir>/scripts/promptible-gate.mjs qa \
  --project . \
  --critic .promptible/critic.json

このゲートでは、ハード要件への違反、8/10 未満のカテゴリー、平均 8.5 未満、変更または欠落のある調査・証拠、独立していないレビューを拒否します。DELIVERY AUTHORIZED が出るまで修正を続けてください。

技術および納品ルール

• useCurrentFrame()、spring()、interpolate() を使ってモーションを制御してください。CSS アニメーションは使用しないでください。
• 移動が有効な場合は、静止 → 移動 → 静止の流れにしてください。アクションは静止中に完了させてください。
• 最後は安定したエディターの静止画で終えてください。
• 型チェックを行うか、意味のある最小限のビルド検証を実行してください。
• 承認後に限り、正確な寸法、再生時間、レンダーコマンド、エディターへの配置に関する注記を添えて MP4 を納品してください。