exiao/skills

Remotion動画

Remotion（React）を使用してアニメーション動画を作成します。公式のremotion-devベストプラクティスに加え、Bloom固有のコンポジションを含みます。

クイックルーター

タスクに応じて該当するルールファイルを参照してください。

コアアニメーション

タスク	ルールファイル
補間、イージング、スプリング	references/rules/timing.md
アニメーションの基礎	references/rules/animations.md
テキストアニメーション（タイプライター、単語単位など）	references/rules/text-animations.md
シーントランジション（スライド、フェード、ワイプ、フリップ）	references/rules/transitions.md
シーケンス（遅延、トリム、持続時間制限）	references/rules/sequencing.md
トリミング（先頭・末尾のカット）	references/rules/trimming.md

メディア

タスク	ルールファイル
画像（Imgコンポーネント）	references/rules/images.md
動画（埋め込み、トリム、音量、速度、ループ）	references/rules/videos.md
オーディオ（インポート、トリム、音量、速度、ピッチ）	references/rules/audio.md
オーディオ可視化（スペクトラム、波形）	references/rules/audio-visualization.md
タイムラインに同期したGIF	references/rules/gifs.md
フォント（Google Fonts、ローカル）	references/rules/fonts.md
アセット（画像/動画/オーディオのインポート）	references/rules/assets.md

キャプションとナレーション

タスク	ルールファイル
キャプション生成（音声の文字起こし）	references/rules/transcribe-captions.md
SRTキャプションのインポート	references/rules/import-srt-captions.md
キャプション表示（アニメーション付き字幕）	references/rules/display-captions.md
字幕の概要	references/rules/subtitles.md
AIナレーション（ElevenLabs TTS）	references/rules/voiceover.md

高度な機能

タスク	ルールファイル
3Dコンテンツ（Three.js / React Three Fiber）	references/rules/3d.md
チャート（棒、円、折れ線、株価）	references/rules/charts.md
地図（Mapbox）	references/rules/maps.md
Lottieアニメーション	references/rules/lottie.md
ライトリークオーバーレイ	references/rules/light-leaks.md
透明動画レンダリング	references/rules/transparent-videos.md

セットアップと設定

タスク	ルールファイル
コンポジション、スチル、フォルダ、デフォルトprops	references/rules/compositions.md
動的メタデータ（calculateMetadata）	references/rules/calculate-metadata.md
Zodスキーマによるパラメータ化	references/rules/parameters.md
RemotionでのTailwindCSS	references/rules/tailwind.md
テキスト測定（フィット、オーバーフロー）	references/rules/measuring-text.md
DOMノードの測定	references/rules/measuring-dom-nodes.md

FFmpegとメディアユーティリティ

タスク	ルールファイル
FFmpeg操作（トリム、無音検出）	references/rules/ffmpeg.md
動画からのフレーム抽出	references/rules/extract-frames.md
動画の長さを取得	references/rules/get-video-duration.md
動画の寸法を取得	references/rules/get-video-dimensions.md
オーディオの長さを取得	references/rules/get-audio-duration.md
動画がデコード可能か確認	references/rules/can-decode.md

---

remotion-bits コンポーネントキット

事前に構築されたアニメーションコンポーネント。インストール: npm install remotion-bits

主要コンポーネント: AnimatedText（単語/文字/行のリビール）、ParticleSystem（紙吹雪、雪、蛍）、GradientTransition、Scene3D（3Dカメラ移動）、Typewriter、CodeBlock（シンタックスハイライト付きタイピング）。

完全なカタログと使用例はreferences/remotion-bits.mdを参照してください。

---

Bloomプロジェクト

プロジェクトの場所: ~/clawd/remotion-videos/

remotion-videos/
├── src/
│   ├── Root.tsx          # すべてのコンポジションがここに登録されます
│   ├── ProductDemo.tsx   # メインの製品デモコンポーネント
│   ├── schema.ts         # props用のZodスキーマ
│   ├── scenes/           # 個別のシーンコンポーネント
│   │   ├── TerminalTyping.tsx
│   │   ├── FileScanning.tsx
│   │   ├── ScoreReveal.tsx
│   │   ├── ResultsSummary.tsx
│   │   └── TextOverlay.tsx
│   └── Composition.tsx
├── public/               # 静的アセット
├── out/                  # レンダリング出力
├── remotion.config.ts
└── package.json

既存のコンポジション

ID	サイズ	使用例
ProductDemo	1080x1080	Twitter/Instagram スクエア
ProductDemoVertical	1080x1920	TikTok/Reels/Shorts 縦長
BloomDemo	1080x1080	Bloomブランド スクエア
BloomDemoVertical	1080x1920	Bloomブランド 縦長

全コンポジション: 15秒 @30fps（450フレーム）。

Propsスキーマ（ProductDemoProps）

{
  command: string;           // 表示されるターミナルコマンド
  files: Array<{             // スキャンアニメーション用ファイルリスト
    name: string;
    errors: number;
    warnings: number;
  }>;
  score: number;             // 表示するスコア（0-maxScore）
  maxScore: number;          // 最大スコア値
  statusLabel: string;       // 例: "Critical", "Moderate Risk"
  statusColor: string;       // ステータスの16進数カラー
  resultLines: string[];     // サマリー調査結果
  title: string;             // 動画タイトルテキスト
  logoText: string;          // ブランド/製品名
}

---

事前コンポジション: 実際のBloomスクリーンショット

動画でBloomアプリのUIを表示する場合は、最初に実際のスクリーンショットを取得してください。

1. PhoneAgentブリッジを起動（~/clawd/skills/phoneagent/SKILL.md参照）
2. 実行: python scripts/capture_bloom_screenshots.py --feature <portfolio|stock_detail|watchlist> --output public/screenshots/<feature>
3. コンポジション内でスクリーンショットを参照: staticFile("screenshots/<feature>/home.png")

ブリッジが実行されていない場合は、正常にフォールバックします。

---

レンダリング

cd ~/clawd/remotion-videos

# ブラウザでプレビュー（Remotion Studio）
npm run dev

# MP4にレンダリング
npx remotion render ProductDemo out/product-demo.mp4

# TikTok用に縦長でレンダリング
npx remotion render ProductDemoVertical out/product-demo-vertical.mp4

# カスタムprops
npx remotion render ProductDemo out/custom.mp4 --props='{"command":"my command","score":85}'

# GIFとしてレンダリング
npx remotion render ProductDemo out/demo.gif --image-format=png --codec=gif

# 特定のフレーム範囲
npx remotion render ProductDemo out/clip.mp4 --frames=0-150

新規コンポジションの作成

1. シーンコンポーネントをsrc/scenes/に作成
2. メインコンポジションをsrc/に作成
3. Zodスキーマをsrc/schema.tsで定義
4. src/Root.tsxに寸法を指定して登録:
   • スクエア: 1080x1080（Twitter、Instagram）
   • 縦長: 1080x1920（TikTok、Reels、Shorts）
   • 横長: 1920x1080（YouTube）

---

レンダリング後QA

レンダリング後は必ずQAを実行してください:

python scripts/visual_qa.py out/video.mp4 "目標の説明"
# またはラッパースクリプトを使用:
./scripts/render_and_verify.sh BloomDemo out/demo.mp4 "ここに目標"

指摘された問題を修正し、再レンダリングしてください。QAに合格していない動画は納品しないでください。

---

ヒント

• ソーシャルメディア用には15〜30秒の動画を保つ
• モバイル表示には高コントラストの色を使用する
• キャプション/テキストオーバーレイを追加する（ほとんどの視聴者はミュートで視聴）
• 公開前にスクエアと縦長の両方をテストする
• ソーシャルメディアでは30fpsでレンダリング（高モーションの場合は60fps）
• アニメーションをゼロから構築する前にremotion-bitsコンポーネントを使用する