← ClaudeAtlas

demo-videolisted

CommandMate の 30 秒デモ動画(日本語版・英語版)を隔離環境で全自動生成する。絵コンテ駆動のシーン録画・テロップ焼き込み・ffmpeg 合成・尺検証まで。「デモ動画」「demo video」「デモを録画」等の指示で使う。
Kewton/CommandMate · ★ 40 · Code & Development · score 79
Install: claude install-skill Kewton/CommandMate
# demo-video CommandMate の 30 秒デモ動画を全自動生成する。`demo-video.sh` 一発で `demo-30s.ja.mp4` と `demo-30s.en.mp4` が出る。 ```bash .claude/skills/demo-video/scripts/demo-video.sh # ja + en .claude/skills/demo-video/scripts/demo-video.sh --check # 依存+絵コンテ検証だけ .claude/skills/demo-video/scripts/demo-video.sh --locale ja --gif --out ~/Desktop/cm-demo ``` 出力先の既定は `~/Desktop/commandmate-demo/`。**リポジトリ外**である。mp4 / GIF / 中間 PNG は**コミットしない**(配布は GitHub Release アセット等)。生成後に `git status` がクリーンであることが受入条件のひとつ。 ## 設計判断 **実 LLM は使わない。** 実セッションは非決定的で、生成に数分かかり 30 秒に収まらない。代わりにキャプチャ済み ANSI 出力をタイミング付きで再生する「偽エージェント」を tmux セッションで動かす。 置き換えるのは **LLM だけ**で、モックは 1 つも入れていない。CommandMate から見た入力は tmux pane の中身だけなので、`status-detector.ts` / response poller / サイドバーの状態ドットはすべて製品コードのまま動く。偽エージェントが差し込まれるのは `tmux capture-pane` が返すバイト列の出所だけである。 **テロップは HTML → PNG → ffmpeg overlay** で焼き込む。`drawtext` は日本語に `fontfile` の明示が要り、`:` や `'` のエスケープ規則のせいで絵コンテの文字列をそのまま渡せない。HTML なら意匠が CSS 1 箇所に集約でき、文字列は `textContent` で入るので絵コンテがマークアップを注入することもない。 **ロケールはフル録画方式。** `--locale ja` はアプリ UI ごと日本語にして撮り直す。テロップだけ差し替えると、画面は英語・字幕は日本語という動画になる。日英の文言は絵コンテに**直書き**で、生成時に機械翻訳はしない(人間がレビューできない文字列を画面に出さないため)。 ## 構成 ``` demo-video/ ├── SKILL.md ├── scripts/ │ ├── demo-video.sh # パイプライン全体(依存確認 → ロケールごとに録画 → 合成 → 尺検証) │ ├── env-up.sh # 隔離デモ環境の起動(seed repo 生成 → サーバ起動 → Ready 確認) │ ├── env-down.sh # 停止・後片付け(PID 経由の kill のみ。pkill は使わない) │ ├── fake-agent.sh # カセット再生(tmux セッション作成も担当) │ ├── record-scenes.ts #