norahe0304-art/30x-video

Remotion Beautiful Videos

まるで50,000ドルの代理店が制作したかのような、40秒のプロダクトローンチ動画を作成します。秘訣は、コードで構築され、スプリングアニメーションを適用したプロダクトUIモックアップ（実際のダッシュボード、会話インターフェース、コードエディタ、データ可視化など）を構築することです。

使用するタイミング

ユーザーがブランド名を指定したり、URLを入力してプロダクトローンチ/マーケティング/デモ動画を作成したい場合。

使用しない場合（このスキルを無理に使わず、他の場所にルーティングしてください）: 既存の長い動画から短いクリップを抽出する場合（それはショート/再編集ジョブです）; 既存の人物の談話映像にキャプションを追加する場合; ユーザーの映像素材をNLEスタイルで編集する（リタイム/リカラー/リオーダー）場合; ビートに同期した歌詞動画が必要なベアな音楽トラックがある場合。このスキルはブランドのWebプレゼンスからローンチ動画を構築します — コードで構築されたUIモックアップ、実際に収集されたアセット、5幕のナラティブ。入力が紹介するブランドや製品でない場合、これは間違ったツールです。

技術スタック

Remotion 4.x（scaffoldは4.0.484以上に固定） + React 19 + TypeScript + Zod + lucide-react + @remotion/transitions + @remotion/google-fonts + @remotion/paths + @remotion/light-leaks + @remotion/media + @remotion/effects（公式のgradient/checkerboard/emboss/gridlines — 手作りのCSS代替よりも推奨）

システム前提条件 — 自動的に処理されます

ユーザーに何かをインストールするよう要求しないでください。手動で command -v チェックを実行しないでください。 オーケストレーター（scripts/url-to-video.ts）には組み込みのプリフライトがあり、不足しているツールを検出し、何が不足しているかを出力し、brew/apt/dnf/pacman/npm を介してインストールします — これらはすべてステップ1内で行われます。

必要なツール（すべて不足していれば自動インストール）:

ツール	理由
ffmpeg	オーディオトリム、loudnorm、ビデオトリム、volumedetectの健全性チェック
yt-dlp	ブランドのデモ動画 + YouTubeからのロイヤリティフリーBGMを収集
aubiotrack	analyze-audiomap.py + レガシーbeat-sync.tsのための劣化モードビートフォールバック（aubioパッケージ経由）
playwright	ヘッドレスでのホームページスクリーンショットレンダリング

プリフライトフラグ（これらを url-to-video.ts に渡す）:

• --yes — プロンプトなしで自動インストール（Claudeとして実行する場合はこれを使用します。TTYがないため）
• --no-install — インストールをスキップし、劣化モードで実行（ビート→フォールバック、スクリーンショット→フェッチのみ）

自動インストールが失敗するプラットフォーム（ロックダウン環境、sudoなし）に遭遇した場合、オーケストレーターはツールごとの手動インストールコマンドを出力し、劣化したまま続行します。実行を決して中止しないでください — 劣化した出力でも何もないよりはましです。

音楽マップアナライザー（scripts/analyze-audiomap.py、ステップ4）は独自のプリフライトを搭載しています。初回実行時にlibrosa/numpy/soundfileをpipインストールし、インストールが失敗した場合（または--no-installが渡された場合）、aubiotrackに劣化します — オーディオマップはその後bpm + beats_secのみを持ち、他のすべてのフィールドはnull、rhythmic: false（グリッドは下流では信頼されません）になります。

BGMジェネレーター（scripts/generate-bgm.py、ステップ2 ティア②）も同じプリフライト形状を持ちます。pip-installs transformers/torch/soundfile/numpy（plain → --break-system-packages → --user）; インストールが失敗した場合、ブロックする代わりにyt-dlpフォールバックヒントを表示して終了します — BGMソーシングは劣化し、決して停止しません。生成されたトラックは、他のBGMとまったく同様にanalyze-audiomap.pyに流れ込みます。

URL-to-Video V2 出力契約

推奨パス: V2インテークオーケストレーターを実行し、その後生成されたプロジェクトをRemotionで改良します。

node --experimental-strip-types <インストールされたスキルディレクトリ>/scripts/url-to-video.ts https://brand-site.com --out ./<ブランド名>-launch-video

オーケストレーターは以下を出力する必要があります:

• brand-report.json
• scene-constitution.json
• asset-manifest.json
• story.md
• review.md
• public/brand/*、オプションで public/brand/beat-map.json、src/theme.ts、およびscaffoldが消費する生成済みインテークデータを含む完全なRemotionプロジェクトディレクトリ

回帰テストパス:

node --experimental-strip-types <インストールされたスキルディレクトリ>/scripts/benchmark-suite.ts --match stripe-fintech --offline --reuse-brand-dir ./public/brand --install --verify --render

ベンチマークランナーは、ベンチマークごとの benchmark-result.json ファイルとスイートサマリーを出力する必要があります。これにより、V2の変更を議論する代わりに耐圧テストできます。

このスキルは、ワンクリックでの最終レンダリングに最適化されていません。Claudeまたは人間がRemotion内で最後の10〜20%をプッシュできる、ビデオチーム品質のファーストカットに最適化されています。

核となる哲学

1. 抽象的なグラフィックではなく、プロダクトUIモックアップを構築する。 UIそれ自体がアニメーションです。
2. 最初に収集し、次にデザインする。 すべての色、フォント、ロゴは実際のブランドサイトから取得されます。
3. ペーシングは贅沢品。 40秒でコンテンツに息継ぎの余地が生まれます。機能を決して急がない。
4. テンプレートよりもセンス。 「AIが作った」ように見えるなら、再デザインしてください。
5. 1つのフォントファミリー、ウェイト階層。 300〜600の範囲のみ、太字（700+）は決して使用しない。

三層構造

• 現象層: 公式ウェブサイトの証拠を収集する。ScreenshotProofは必須。VideoProofは推奨。視覚的証拠がなければ、信頼できる動画はありません。
• 本質層: 証拠からDesignArchetypeを推論する。判断を研ぎ澄ますために関連資料を使用するが、ブランドを上書きするためには決して使用しない。
• 哲学層: 構築する前に反射的なデフォルトを拒否する。センスは利便性に勝る。信頼性は派手さに勝る。プロダクトの現実はテンプレートのエネルギーに勝る。

このスキルは、以下のスキルから明示的にアイデアを取り入れています:

• agent-browser — 推奨される現象層収集ツールとして（ヘッドレス、画面を乗っ取らない）
• awesome-design-md — エンタープライズデザインアーキタイプリファレンスライブラリとして
• taste-skill — 実行規律のソースとして
• Impeccable — フィニッシュゲートと反単一文化語彙のソースとして

上記はいずれもハードな依存関係ではありません。それらの価値は、このスキルの思考とゲートに埋め込まれています。

ルール

詳細な説明とコード例については、個別のルールファイルを参照してください:

デザインシステム

• rules/typography.md - フォントウェイト（最大600）、サイズ階層（最小24px）、テキストの安全性
• rules/color.md - ブランドの極性、ニュートラルな色合い、60-30-10ルール、アクセントの不透明度レベル
• rules/layout.md - グリッドシステム、4pxスペーシングスケール、セーフゾーン、ボーダー半径の階層、重なり防止
• rules/composition.md - 独自のコンポジション則: ゼロ真空の雰囲気ベース、フルブリードモーメント、編集部的200-320pxタイポ、リアルアセット優先、コンポジションの多様性 — さらに、コンポジショナルな「スロップブラックリスト」（ハブアンドスポークのピルダイアグラム、中空カードのトリプティック、中央寄せオブジェクトの空白、永遠のスプリング+きらめきオープニング）と薄い証拠のためのプレイブック（スコア < 40 → ロゴのジオメトリからブランド世界を育てる、空のカードは決して使わない）

ビジュアルコンテンツ

• rules/ui-mockups.md - プロダクトUIの構築、密度、タイトルバー、シンタックスカラーリング、カーソルシミュレーション、ジャイアントターミナル下部上昇スペック（実証済みのジオメトリ + コンテンツ契約 + 失敗リスト）
• rules/cards.md - 千鳥配置のカードグリッド、インテリアフィルテクニック、アニメーション化されたカードボディ、重複なし
• rules/data-viz.md - SVGチャート、アニメーション化されたメトリクス、tabular-nums、ステータスバッジ、アンチヒーローメトリック
• rules/artifact-catalog.md - 任意の幕をデザインする前に読むこと: 15の実戦テスト済みの独自アーティファクトファミリー（ソースポインタ付き） + 足場目録 + クロスプロダクションヒーローローテーション台帳（~/.media/hero-ledger.jsonl） — 多様性はゲートであり、提案ではありません

モーションとプロダクション

• rules/motion.md - スプリング、easeOutExpo、文字単位のスタッガー、タイミング基準、ホールド・アンド・スナップ、有機的なAE語彙（ウィグル/オーバーシュート/アイドルフロート/lookAt — 兄弟スキル remotion-motion から配線）
• rules/transitions.md - TransitionSeries、ライトリーク、流動的な背景、ノイズテクスチャ、パララックス
• rules/cinematic.md - フィルムグレイン、ビネット、きらめくスイープ、カラーグレーディング、グラスモーフィズム、レンダリング設定
• rules/beat-sync.md - audiomap.jsonからのBGM駆動タイミング: 無条件に信頼される1つのアナライザー、rhythmic: trueの場合のビートグリッドスナッピング、そうでない場合のエネルギーフェーズ/サイレンスペーシング、エネルギーピークでのホールド・アンド・スナップ
• rules/narration-sync.md - ボイスオーバー/キャプション動画のみ: ビジュアルをささやきの単語タイムスタンプにビートロック、キャプション/ブランドワードのクリーンアップ、文境界カットスナッピング

戦略と品質

• rules/creative-moves.md - すべての「惊艳」評価から抽出された5つのクリエイティブジェネレーター — イディオムの直訳、ロゴジオメトリからの成長、制約の錬金術、意味的反転、ドメイン固有の証明
• rules/taste.md - AIスロップブラックリスト、デザイン原則、UXの法則、自己レビューチェックリスト、ペーシング
• rules/narrative.md - 5幕構造、見出し/UIリズム、ストーリーアーク、ロゴコンステレーション
• rules/narrative-templates.md - 業界固有のナラティブテンプレート（AI SaaS、FinTech、DevTool、E-Commerce、Healthcare、Cybersecurity、Collaboration）
• rules/workflow.md - ブランドスクレイピング、アイコンシステム、アセット戦略、動画埋め込み、ファイル構成、BGM多様性義務（ブランド由来のムード + グローバル台帳による重複排除 — 同じトラックを二度と使わない）
• rules/media-resolve.md - アセット解決カスケード（台帳 → 採用 → プログラム的 → カタログ → Web）と.media/manifest.jsonlフリーズ台帳; プログラム的優先: ドットマップ世界地図、simple-iconsマーク、LobeHub AIモデルロゴをインラインで着色可能なコンポーネントとして
• rules/archetypes.md - 高品質なデザインリファレンスから抽象化されたエンタープライズデザインアーキタイプ
• rules/finish-gate.md - Impeccableスタイルのフィニッシュプロトコル、反単一文化チェック、レンダリングブロック基準
• rules/qc-gates.md - 4つのエビデンスベースQCゲート: アセット監査（ステップ2.5）、幕ごとのフレーム証拠（ステップ4）、批評ループ配線（ステップ7.5）、誠実な開示（ステップ8）。エビデンスのみ — レンダリングされたピクセル + Read、grepは不可

リファレンスファイル（コードパターン）

• references/animations.md - FadeIn、ScaleIn、SplitText、Typewriter、CountUp、AnimatedPath
• references/audio.md - オーディオ同期、ビート検出、ボイスオーバーダッキング、ElevenLabs TTS with-timestamps VOパイプライン（無料の単語タイミング、制限付きキーの処理、VO_CUES由来のダック）
• references/components.md - GradientMesh、GlassPanel、FilmGrain、ProductFrame、BrandIcon
• scaffold/src/components/Transitions.tsx - 7つのトランジションファミリー（whipPan/maskWipe/push/zoomPunch/blurDissolve/flashThrough/glitchCut） — fade()のドロップイン置換; すべてフェードの動画は違反です
• scaffold/src/components/ShaderFX.tsx - GPU ShaderPlane（liquidWarpはプロダクション対応; silk/lensはWIP） — --gl=angleでレンダリング（scaffoldレンダリングスクリプトに組み込み）
• scaffold/src/components/Captions.tsx - 単語タイムスタンプキャプション、6スタイル（karaoke/scalePop/weightShift/neonGlow/kineticSlam/editorial）
• references/lottie.md - @remotion/lottie統合、推奨ソース
• references/visual-effects.md - 階層化ビジュアルエフェクトライブラリリファレンス（lottie、motion-blur、confetti、flubber、three.js）

Remotion APIリファレンス（バンドル済み）

このスキルは、Remotion APIパターンのための完全な remotion-best-practices リファレンスをバンドルしています。Remotion固有のAPI知識が必要な場合はこれらをロードしてください:

• remotion-best-practices/rules/videos.md - 動画の埋め込み、トリミング、音量、速度、ループ
• remotion-best-practices/rules/audio.md - オーディオのインポート、トリミング、音量、速度、ピッチ
• remotion-best-practices/rules/timing.md - 補間曲線、リニア、イージング、スプリング
• remotion-best-practices/rules/transitions.md - シーントランジションパターン
• remotion-best-practices/rules/compositions.md - コンポジション、スチル、フォルダ、デフォルトプロップ
• remotion-best-practices/rules/sequencing.md - シーケンスディレイ、トリム、期間制限
• remotion-best-practices/rules/fonts.md - Google Fontsとローカルフォントの読み込み
• remotion-best-practices/rules/images.md - Imgコンポーネントの使用法
• remotion-best-practices/rules/charts.md - 棒グラフ、円グラフ、折れ線グラフ、株価チャートパターン
• remotion-best-practices/rules/light-leaks.md - @remotion/light-leaksオーバーレイエフェクト
• remotion-best-practices/rules/lottie.md - @remotion/lottie統合
• remotion-best-practices/rules/text-animations.md - タイポグラフィアニメーションパターン
• remotion-best-practices/rules/calculate-metadata.md - 動的コンポジションメタデータ
• remotion-best-practices/rules/voiceover.md - ElevenLabs TTSによるAIボイスオーバー
• remotion-best-practices/rules/parameters.md - Zodスキーマパラメーター化
• remotion-best-practices/rules/ffmpeg.md - 動画トリミングのためのFFmpeg操作

ワークフロー（8ステップ + 4つのエビデンスゲート）

このワークフロー内で4つのエビデンスベースのQCゲートが実行されます — アセット監査（ステップ2.5）、幕ごとのフレーム証拠（ス...