demo-producer

デモプロデューサー

あらゆる種類のコンテンツに対応する、汎用的なデモ動画作成ツールです。

ツールのバージョン（2026-Q2）： VHS >= 0.11、Remotion >= 4.0.448。VHS 0.11 では以下が追加されました。

• Wait キーワード — 条件ベースの待機機能により、Sleep N に代わるものです（Wait "prompt>" は、指定した文字列が表示されるまで待機します）。プロンプトの表示時間が一定でない場合は、Sleep ではなく Wait を使用してください。
• ScrollUp N / ScrollDown N — 録画セッション中に明示的なスクロール操作を行います。TUI アプリや、less のような長い出力をデモする際に便利です。

イベントを利用できず、固定の表示タイミングを設定する場合に限り、既存の Sleep N を使用してください。

クイックスタート

demo-producer                    # Interactive mode - asks what to create
demo-producer skill explore      # Create demo for a skill
demo-producer plugin ork     # Create demo for a plugin
demo-producer tutorial "Building a REST API"  # Custom tutorial
demo-producer --live 4           # Live preview via dev --live (4-hour public funnel)

--live モード（M127 #1565）

--live N は dev --live N を呼び出す薄いラッパーです。portless --funnel の背後で開発スタックを起動し（Tailscale Funnel 経由で公開）、有効期限を N 時間として .claude/state/live-demos.jsonl に記録します。また、顧客向けメールやドキュメントページへの埋め込みに使用できる公開 URL と <iframe> スニペットを出力します。

demo-producer --live 4

# Internally runs:
dev --live 4
# → public URL: https://app.your-tailnet.ts.net
#   iframe: <iframe src="..." />
#   expires: 2026-05-03T20:00Z

doctor は、24 時間を超えたライブデモが放置されないよう警告します。終了するには dev stop を実行してください。Tailscale CLI のインストールが必要です（--live の実行時のみ必要で、静的なデモ録画モードでは不要です）。

重要：タスク管理は必須です（CC 2.1.16）

ほかの作業を始める前に、進捗を追跡するタスクを作成してください。

# 1. Create main task IMMEDIATELY
TaskCreate(
  subject="Demo Producer: {topic}",
  description="Creating polished demo video for content showcase",
  activeForm="Producing demo for {topic}"
)

# 2. Create subtasks for each production phase
TaskCreate(subject="Content analysis", activeForm="Analyzing content for demo")
TaskCreate(subject="Script & storyboard", activeForm="Generating script and storyboard")
TaskCreate(subject="Record & compose", activeForm="Recording terminal and composing video")
TaskCreate(subject="Final output", activeForm="Rendering final video outputs")

# 3. Set dependencies for sequential phases
TaskUpdate(taskId="3", addBlockedBy=["2"])
TaskUpdate(taskId="4", addBlockedBy=["3"])
TaskUpdate(taskId="5", addBlockedBy=["4"])

# 4. Update status as you progress
TaskUpdate(taskId="2", status="in_progress")  # When starting
TaskUpdate(taskId="2", status="completed")    # When done

対応するコンテンツの種類

種類	ソース	例
skill	skills/{name}/SKILL.md	demo-producer skill commit
agent	agents/{name}.md	demo-producer agent debug-investigator
plugin	plugins/{name}/plugin.json	demo-producer plugin ork
marketplace	Marketplace のインストールフロー	demo-producer marketplace ork
tutorial	カスタムの説明	demo-producer tutorial "Git workflow"
cli	任意の CLI ツール	demo-producer cli "npm create vite"
code	コードの解説	demo-producer code src/api/auth.ts

対話型フロー

引数なしで起動すると、4 つの質問をします。

質問 1：コンテンツの種類

What type of demo do you want to create?

○ Skill - OrchestKit skill showcase
○ Agent - AI agent demonstration
○ Plugin - Plugin installation/features
○ Tutorial - Custom coding tutorial
○ CLI Tool - Command-line tool demo
○ Code Walkthrough - Explain existing code

質問 2：フォーマット

What format(s) do you need?

☑ Horizontal (16:9) - YouTube, Twitter
☑ Vertical (9:16) - TikTok, Reels, Shorts
☐ Square (1:1) - Instagram, LinkedIn

質問 3：スタイル

What style fits your content?

○ Quick Demo (6-10s) - Fast showcase, single feature
○ Standard Demo (15-25s) - Full workflow, multiple steps
○ Tutorial (30-60s) - Detailed explanation, code examples
○ Cinematic (60s+) - Story-driven, high polish
○ Scrapbook (15-35s) - Warm paper, fast cuts, social proof collage (Anthropic style)

質問 4：音声

Audio preferences?

○ Music Only - Subtle ambient background
○ Music + SFX - Background + success sounds
○ Silent - No audio

パイプラインアーキテクチャ

詳細を確認するには、Read("references/demo-pipeline.md") を読み込み、パイプラインの全体図、生成コマンド、出力構成を確認してください。

コンテンツ検出 -> コンテンツ分析 -> スクリプト生成 -> ターミナルスクリプト -> VHS レコーダー -> Remotion コンポーザー -> 最終出力（横長／縦長／正方形）。

完了条件と予算

完了条件。 完了とは、要求されたすべてのフォーマットのバリエーションがレンダリングされ、出力ディレクトリに書き込まれ、ffprobe で検証済みであること（再生時間がゼロではなく、各バリエーションの解像度が想定どおりであること）、そして完了を知らせる PushNotification が送信されていることを指します。

予算：動画ごとのレンダリング再試行は最大 2 回、フォーマットのバリエーションは最大 3 種類、各バリエーションの経過時間は最大 45 分（合計 135 分）です。完了条件またはいずれかの上限に達した時点で停止し、未レンダリングのバリエーションを明示して報告してください。

テンプレートシステム

デモのスタイルに応じた、4 つのテンプレートアーキテクチャがあります。詳細な設定と SkillDemoConfig インターフェースを確認するには、Read("references/template-system.md") を読み込んでください。

テンプレート	用途	再生時間	主な機能
TriTerminalRace	複雑さの比較	15-20s	3 分割パネル、難易度を色分け
ProgressiveZoom	チュートリアル、手順の解説	20-30s	ズームトランジション、段階的な表示
SplitThenMerge	ビフォー／アフター、変換	15-25s	画面分割 -> 1 つに統合
ScrapbookDemo	プロダクトローンチ、ソーシャルプルーフ	15-35s	温かみのある紙の質感、速いカット

コンテンツの種類（skill、agent、plugin、tutorial、cli、code）に応じたテンプレートは、Read("references/skill-category-mapping.md") で対応付けられています。

Remotion のコンポジション

詳細を確認するには、Read("references/remotion-composition.md") を読み込み、フォルダー構成、新しいコンポジションの追加方法、フォーマットバリエーションのプレフィックスを確認してください。

コンポジションは、フォーマット（横長、縦長、正方形）とスキルカテゴリーごとに Production/ 以下に整理されています。

カスタマイズオプション

ビジュアルテーマ

• ダークモード（デフォルト）：暗い背景、ネオンのアクセント
• ライトモード：すっきりとした白、控えめなシャドウ
• ターミナル：純粋なターミナルの美学
• シネマティック：高いコントラスト、ドラマチックなライティング
• スクラップブック：温かみのある紙（#F0F0E8）、セリフ体のタイポグラフィ、素早いカット、ミックスメディアコラージュ

オーディオプリセット

• アンビエント：控えめな背景音、効果音なし
• テック：電子音のビート、UIサウンド
• コーポレート：プロフェッショナルですっきりとした音
• エネルギッシュ：アップテンポでテンポの速い音

完了時のPushNotification（CC 2.1.110+）

VHSの録画とRemotionのレンダリングは、動画1本あたり通常10～45分かかります。また、複数のバリエーションをすべて制作する場合（横長＋縦長＋正方形）は、1時間を超えることがあります。すべての出力ファイルを書き込み、検証した後、PushNotificationを呼び出して、動画のレビュー準備ができたことをユーザーに知らせてください。

PushNotification(
  message=f"ork:demo-producer complete — {topic}: {variants_count} variants · {output_dir}",
  status="proactive"
)

ルール全文：Read("${CLAUDE_PLUGIN_ROOT}/skills/chain-patterns/rules/push-notification-on-completion.md")。

ベストプラクティス

1. 焦点を絞る - 動画1本につき、機能または概念を1つにします
2. 説明より実演 - 実際の使い方を実演します
3. 実データを使う - 実際のコマンド出力を見せます
4. 文脈を含める - デモの前に簡単なセットアップを行います
5. CTAで締めくくる - インストールコマンドを必ず含めます

ターミナルシミュレーションのパターン

詳細を読み込む：TypeScriptのパターン（固定ヘッダー＋スクロールするコンテンツ、エージェントのカラーパレット、タスクのスピナーアニメーション）については、Read("references/terminal-simulation.md")を参照してください。

スロップの回避

詳細を読み込む：テキスト密度のルール、時間の圧縮、よくあるスロップのパターン、フックのスタイルについては、Read("rules/slop-avoidance.md")を参照してください。

基本ルール：画面に表示する価値のないコンテンツは削除してください。

ルールのクイックリファレンス

ルール	影響度	対象範囲
analyzer-patterns（rules/analyzer-patterns.mdを読み込む）	MEDIUM	Frontmatterの解析、フェーズの検出、例の抽出
production-pipeline（rules/production-pipeline.mdを読み込む）	HIGH	プリプロダクション、ストーリーボード作成、録画、VHS、manim
production-composition（rules/production-composition.mdを読み込む）	HIGH	Remotionのコンポジション、オーディオミキシング、サムネイル、キャプション
slop-avoidance（rules/slop-avoidance.mdを読み込む）	HIGH	テキスト密度、時間の圧縮、フックのスタイル

関連スキル

• video-production：動画制作の全工程（録画、コンポジション、音声、ペース配分）

参照資料

Read("references/<file>")で必要に応じて読み込みます：

ファイル	内容
template-system.md	テンプレートアーキテクチャとSkillDemoConfigインターフェース
content-types.md	コンテンツタイプの詳細仕様
format-selection.md	プラットフォーム要件と複数フォーマットへの対応
script-generation.md	スクリプトのテンプレートと生成パターン
demo-pipeline.md	パイプラインアーキテクチャ、生成コマンド、出力構造
remotion-composition.md	Remotionのフォルダー構成とコンポジションガイド
skill-category-mapping.md	スキルカテゴリーのマッピングとコンテンツタイプのテンプレート