Skip to content
video logo

Video Generation Skills

video

Generates product demo videos, architecture explanations, and release note videos. Use when user mentions video generation, product demos, or visual documentation. Requires Remotion setup.

SKILL.md

Full skill instructions

Video Generation Skills

プロダクト説明動画の自動生成を担当するスキル群です。


概要

/​generate-video コマンドの内部で使用されるスキルです。 コードベース分析 → シナリオ提案 → 並列生成のフローを実行します。

機能詳細

機能詳細
ベストプラクティスSee references/​best-practices.md
コードベース分析See references/​analyzer.md
シナリオプランニングSee references/​planner.md
並列シーン生成See references/​generator.md

Prerequisites

  • Remotion がセットアップ済み(/​remotion-setup)
  • Node.js 18+

/​generate-video フロー

/​generate-video
    │
    ├─[Step 1] 分析(analyzer.md)
    │   ├─ フレームワーク検出
    │   ├─ 主要機能検出
    │   ├─ UIコンポーネント検出
    │   └─ プロジェクト資産解析(Plans.md, CHANGELOG等)
    │
    ├─[Step 2] シナリオ提案(planner.md)
    │   ├─ 動画タイプ自動判定
    │   ├─ シーン構成提案
    │   └─ ユーザー確認
    │
    └─[Step 3] 並列生成(generator.md)
        ├─ シーン並列生成(Task tool)
        ├─ 統合 + トランジション
        └─ 最終レンダリング

実行手順

  1. ユーザーが /​generate-video を実行
  2. Remotion セットアップ確認
  3. analyzer.md でコードベース分析
  4. planner.md でシナリオ提案 + ユーザー確認
  5. generator.md で並列生成
  6. 完了報告

動画タイプ(ファネル別)

タイプファネル長さ目安自動判定条件構成の芯
LP/広告ティザー認知〜興味30-90秒新規プロジェクト痛み→結果→CTA
Introデモ興味→検討2-3分UI変更検出1ユースケース完走
リリースノート検討→確信1-3分CHANGELOG更新Before/​After重視
アーキテクチャ解説確信→決裁5-30分大規模構造変更実運用+証拠
オンボーディング継続・活用30秒-数分初回セットアップAha体験への最短パス

詳細: references/​best-practices.md

シーンテンプレート

90秒ティザー(LP/広告向け)

時間シーン内容
0-5秒Hook痛み or 望む結果
5-15秒Problem+Promise対象ユーザーと約束
15-55秒Workflow象徴ワークフロー
55-70秒Differentiator差別化の根拠
70-90秒CTA次の一手

3分Introデモ(検討向け)

時間シーン内容
0-10秒Hook結論+痛み
10-30秒UseCaseユースケース宣言
30-140秒Demo実画面で完走
140-170秒Objectionよくある不安1つ潰す
170-180秒CTA行動喚起

共通シーン

シーン推奨時間内容
イントロ3-5秒ロゴ + タグライン
機能デモ10-30秒Playwrightキャプチャ
アーキテクチャ図10-20秒Mermaid → アニメーション
CTA3-5秒URL + 連絡先

詳細テンプレート: references/​best-practices.md

Notes

  • Remotion未セットアップの場合は /​remotion-setup を案内
  • 並列生成数はシーン数に応じて自動調整(max 5)
  • 生成された動画は out/ ディレクトリに出力