AgentSkillsCN

generate-video

自动化发布流程:更新 CHANGELOG、提升版本号,以及创建标签。当用户提及发布、提升版本号,或创建标签时,可优先选用此技能。切勿用于:发布规划讨论、版本号的提及,或随意的“赶紧上线吧”式闲聊。

SKILL.md
--- frontmatter
name: generate-video
description: "プロダクトデモ動画を自動生成。百聞は一見にしかず、を体現。Use when user mentions '/generate-video', video generation, product demos, or visual documentation. Do NOT load for: embedding video players, live demos, video playback features. Requires Remotion setup."
allowed-tools: ["Read", "Write", "Edit", "Grep", "Glob", "Bash", "Task", "AskUserQuestion", "WebFetch"]
disable-model-invocation: true
argument-hint: "[demo|arch|release]"
context: fork

Generate Video Skill

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


概要

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

機能詳細

機能詳細
ベストプラクティスSee references/best-practices.md
コードベース分析See references/analyzer.md
シナリオプランニングSee references/planner.md
並列シーン生成See references/generator.md
視覚効果ライブラリSee references/visual-effects.md
AI画像生成See references/image-generator.md
画像品質判定See references/image-quality-check.md

Prerequisites

  • Remotion がセットアップ済み(/remotion-setup
  • Node.js 18+
  • (オプション)GOOGLE_AI_API_KEY - AI画像生成用

/generate-video フロー

code
/generate-video
    │
    ├─[Step 1] 分析(analyzer.md)
    │   ├─ フレームワーク検出
    │   ├─ 主要機能検出
    │   ├─ UIコンポーネント検出
    │   └─ プロジェクト資産解析(Plans.md, CHANGELOG等)
    │
    ├─[Step 2] シナリオ提案(planner.md)
    │   ├─ 動画タイプ自動判定
    │   ├─ シーン構成提案
    │   └─ ユーザー確認
    │
    ├─[Step 2.5] 素材生成(image-generator.md)← NEW
    │   ├─ 素材必要判定(イントロ、CTA等)
    │   ├─ Nano Banana Pro で2枚生成
    │   ├─ Claude が品質判定(image-quality-check.md)
    │   └─ OK → 採用 / NG → 再生成(最大3回)
    │
    └─[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

音声同期ルール(重要)

ナレーション付き動画では以下を厳守:

ルール
音声開始シーン開始 + 30f(1秒待機)
シーン長さ30f + 音声長さ + 20f余白
トランジション15f(隣接シーンとオーバーラップ)
シーン開始計算前シーン開始 + 前シーン長 - 15f

事前確認: ffprobe で音声長さを確認してからシーン設計

詳細: references/generator.md

BGM サポート

項目推奨値
ナレーションありbgmVolume: 0.20 - 0.30
ナレーションなしbgmVolume: 0.50 - 0.80
ファイル配置public/BGM/

詳細: references/generator.md

字幕サポート

ルール
字幕開始音声開始と同じ
字幕duration音声長 + 10f
フォントBase64埋め込み推奨

詳細: references/generator.md

視覚効果ライブラリ

インパクトのある動画向けエフェクト集:

エフェクト用途
GlitchTextHook、タイトル
Particles背景、CTA収束
ScanLine解析中演出
ProgressBar並列処理表示
3D Parallaxカード表示

詳細: references/visual-effects.md

Notes

  • Remotion未セットアップの場合は /remotion-setup を案内
  • 並列生成数はシーン数に応じて自動調整(max 5)
  • 生成された動画は out/ ディレクトリに出力
  • AI生成画像は out/assets/generated/ に保存
  • GOOGLE_AI_API_KEY 未設定時は画像生成をスキップ(既存素材 or プレースホルダー使用)