Communitygithub.com

cubeplexai/auto-demo-video

シナリオ → スクリプト → Playwrightシネマティック録画 → ハイライトパイプラインによる自動デモ動画作成。

auto-demo-video とは?

このスキルは、開発者が製品のライブデモ動画を完全に自動化するためのエンドツーエンドパイプラインです。シナリオYAMLファイルからスクリプトを生成し、Playwrightを使用したシネマティックな録画、編集、レンダリングまでを一貫して行います。主な特徴は、製品固有のロジックをリポジトリ内に混入させないという設計思想にあります。すべての製品固有の設定(ワークスペース名、ブランドプロンプト、テナンシーピッカー、テストIDなど)は、シナリオYAML、アダプター、環境変数を通じて外部から注入されます。このアーキテクチャにより、auto-demo-video自体は汎用的なツールとして使いまわし、各製品やマーケティングリポジトリで具体的なデモ内容を管理できます。対応プラットフォームは主にClaude CodeやCursorなどのAIエージェント開発環境で、`adv`コマンドラインインターフェースを通じて操作します。ワークフローは「計画→録画→編集→レンダリング」の順で進み、最終的に`final.mp4`が出力されます。

対応~Claude Code~Codex CLI~Cursor
npx skills add cubeplexai/auto-demo-video

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

auto-demo-video は何をしますか?

ライブ製品デモのための汎用パイプライン。

ハードルール

auto-demo-videoリポジトリに製品固有のロジックを追加しないでください (ワークスペース名、ブランドプロンプト、テナンシーピッカー、アプリのテストIDなど)。 これらはコンシューマアプリ/マーケティングリポジトリに保持し、以下の方法で渡してください:

  • scenario.yaml(手順、キャプション、プロンプト)
  • adapter: ./path/to/adapter.mjs + adapterOptions
  • 環境認証情報/storage-state.json

コマンド

adv plan   --scenario <yaml> [--code-root <dir>]
adv record --script <script.json>
adv edit   --meta <meta.json> [--target-sec 90]
adv render --plan <edit-plan.json>
adv all    --scenario <yaml> --out runs/job

アダプター

組み込み: generic-webのみ。

外部:

adapter: ./demos/adapter.mjs
adapterOptions:
  # アダプター用の自由形式

形状: export default { loginPath?, isAuthed?, afterLogin?, custom?, composerPlaceholders? }。

ワークフロー

  1. 製品リポジトリでシナリオとオプションの外部アダプターを作成。
  2. adv plan → script.jsonを確認。
  3. BASE_URLと認証情報(またはストレージ状態)を設定。
  4. adv record → メタデータ/スクリーンショットを確認。
  5. adv edit → adv render → final.mp4。
  6. 別のプロジェクトでRemotionパッケージ化(オプション)。

ドキュメント

  • docs/pipeline.md
  • docs/shotcraft-notes.md
  • schemas/*.json

関連スキル