mcpField
G
generate-video

generate-video

github.com/chachamaru127Creative & media3.2k51 installsUpdated 2w ago
Repository

About generate-video

A skill for generating product videos from a codebase through analysis, scenario planning, and parallel scene generation. It is explicitly invoked with `/generate-video` or from a parent media workflow, and requires Remotion to be set up.

Key features

  1. 01Analyze code and project assets
  2. 02Propose video scenarios for approval
  3. 03Generate scenes in parallel
  4. 04Support multiple product video formats
  5. 05Use optional AI-generated images

Use cases

  1. 01Create a teaser for a new project
  2. 02Produce an intro demo after UI changes
  3. 03Prepare release notes or onboarding videos
  4. 04Explain major architecture changes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/chachamaru127/claude-code-harness --skill generate-video

After installing, type/generate-videoin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

package.json
assets/backgrounds/
backgrounds.json
assets/sounds/
sounds.json
references/
analyzer.md
asset-customization.md
best-practices.md
direction-guide.md
generator.md
image-generator.md
image-patterns.md
image-quality-check.md
MIGRATION-11.2.md
naming-conventions.md
planner.md
visual-effects.md
remotion/
tsconfig.json
remotion/components/
BackgroundLayer.tsx
EmphasisBox.tsx
index.ts
ProgressIndicator.tsx
README.md
TransitionWrapper.tsx
schemas/
animation.schema.json
assets.manifest.schema.json
character.schema.json
direction.schema.json
emphasis.schema.json
schemas/examples/
scenario-example.json
scene-example.json
video-script-example.json

Details

From the project README

Generate Video Skill

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

起動契約

このスキルは user-invocable: false かつ disable-model-invocation: true です。 通常のユーザー発話(例: 「動画を作って」)で Claude が自動選択する前提にはしません。

  • 明示的な /generate-video コマンド、または親メディアワークフローから内部的に起動される時だけ使います。
  • allowed-tools は Claude Code 用です。Claude ではユーザー確認に AskUserQuestion を使えます。
  • Codex mirror では同等の確認は request_user_input 相当の計画モード入力に読み替えます。通常実行でそのツールがない場合は、既定値を提示して停止せず進め、重要な未確定事項だけユーザーへ確認します。
  • disable-model-invocation: true は「説明文だけを見てモデルが勝手に起動しない」という意味です。slash や親 workflow から明示起動された場合は本文手順に従います。

概要

/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 フロー

/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 + 連絡先

詳細テンプレート: ${CLAUDE_SKILL_DIR}/references/best-practices.md

音声同期ルール(重要)

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

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

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

詳細: ${CLAUDE_SKILL_DIR}/references/generator.md

BGM サポート

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

詳細: ${CLAUDE_SKILL_DIR}/references/generator.md

字幕サポート

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

詳細: ${CLAUDE_SKILL_DIR}/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 プレースホルダー使用)

Comments

Markdown supported