VirtualPirate/create-product-demo-video-skill

プロダクトデモ動画の作成

ユーザーが説明したフローのデモ動画を構築します。出力先は新しい demo/vN/ フォルダです。

唯一の絶対ルール：すべての画面は実際のUIの転写であり、印象に基づくものではありません。 レイアウト、コピー、コンポーネントをでっち上げたデモは、デモがないよりも悪質です。視聴者に存在しない製品を教えてしまうからです。各画面のマークアップを作成する前に、必ずソースを読んでください。

入力

/create-product-demo-video <実行してほしいこと> — フローの説明。曖昧な場合（「製品をアピールして」など）は、最も狭い範囲で完全な、最後に目に見える価値が得られるフローを選び、どのフローを選んだかを一行で示し、それを構築してください。質問をしてブロックしないでください。

手順

1. フローをルートにマッピングします。 プロンプトを、ユーザーが通過する実際のルートの順序付きリストに変換します。最初にルーターを見つけてください — routes/ ディレクトリ、app/ ツリー、<Routes> ブロック、ルートマニフェスト — そして存在するパスのみをリストアップします。フローに、後続の画面が存在するために事前に作成する必要があるエンティティ（プロジェクトスコープのレポートの前のプロジェクトなど）が必要な場合は、その画面を含めるか、そのエンティティを必要としない範囲を選択してください — 必要な手順を黙ってスキップしないでください。

2. すべての画面のソースを読みます。 各ルートについて：ルートファイル、それがレンダリングするコンポーネント、アプリの共有レイアウトコンポーネント（シェル、ページヘッダー、空の状態）、およびそのデザインシステムのプリミティブ（components/ui/ またはそれらがある場所）。また、デモに表示される文字列を生成するもの — プレビューヘルパー、派生名、バックエンドのレンダリング/テンプレートサービス — もすべて読みます。文字列は一字一句そのままコピーし、製品コピーを言い換えないでください。

3. スキャフォールドを作成します。 mkdir -p demo/vN（次の未使用のN — 既存のvNを上書きしない）、次に assets/skeleton.html を demo/vN/index.html に、assets/record.mjs を demo/vN/record.mjs にコピーします。assets/ はこの SKILL.md の隣、スキルがインストールされている場所（プラグインキャッシュディレクトリ、~/.claude/skills/、またはプロジェクトの .claude/skills/）にあります。スキル自身のディレクトリからパスを解決し、デモ対象のリポジトリからは決して解決しないでください。スケルトンには、プレースホルダーシェル、トークンスケール、および再生エンジンが含まれています。 スコア付きデモの場合は、assets/music/ から選択したトラックも demo/vN/music.mp3 にコピーしてください — 音楽 を参照。スキルフォルダを参照するのではなくコピーすることで、後で vN/ を再録音可能に保ちます。これは record.mjs がバージョンごとにコピーされるのと同じ理由です。

4. スケルトンをこの製品に適合させます。 REPLACE: とマークされたものはすべてプレースホルダーであり、どのシーンを書く前にも交換する必要があります。すべての画面がこれを継承するからです。

   index.html 内の項目	置き換え先
   PRODUCT	アプリの名前、アドレスバーに表示されるホスト名、および実際のロゴSVG
   NAV	実際のナビゲーションから転写したサイドバー — 同じセクション、同じ順序、同じラベル
   TOPBAR	実際のトップバー。アプリにないコントロールは削除
   :root トークン	アプリのスタイルシートからの :root ブロック。色・半径・タイポグラフィを一致させる
   ICONS	アプリが実際に使用しているアイコンセットのパスデータ
   フローで使用しないオプションのCSSブロック（サードパーティ画面、配信パネル）は削除します。

5. シーンを書きます。 画面ごとに1つの <section class="scene" data-scene="N"> を順番に配置します。スケルトンのCSSクラス（.pagehead、.card、.btn、.seg、.opt、.chip、.scopeid、.statusbadge、.empty、.input、.pillbar、.toast）を再利用します。これらはTailwind/shadcnスタイルのシステムの出力に似せて作られています。実際のコンポーネントのクラスと照らし合わせて調整し、単に想定しないでください。新しいCSSは、スケルトンにないコンポーネントに対してのみ追加し、そのコンポーネントの実際のクラスから派生させてください。

6. play() を書きます。 タイトルカード → 画面 → アウトロ。キャプションを使用して各ステップに名前を付け、スクリプトの上部で CAPTIONS を設定します — スタイル、および steps = 実行が行う say() 呼び出しの数。操作はポインターヘルパーを介して行い、視聴者が何がクリックされているかを追跡できるようにします。

7. 録画します。 node demo/vN/record.mjs → demo/vN/out/product-demo.mp4。--gif を追加すると900pxのGIFになります。demo/vN/music.* ファイルは自動的に検出されます。--music <path> は別の場所のファイルを指定し、--music-db <n> はレベルを調整し、--no-music は無音を強制します。

8. 見て確認します。 フレームを抽出して画像を読みます — これは必須であり、これがレイアウトのバグを見つける方法です。

   for t in 5 12 20 28 36 44; do ffmpeg -y -loglevel error -ss $t \
     -i demo/vN/out/product-demo.mp4 -frames:v 1 /tmp/f$t.png; done
   

   確認：特大アイコンがないか、折り返しでクリップされていないか、ポインターがクリックしようとしている要素に正しく配置されているか、テキストが一行に折りたたまれていないか。修正して、きれいになるまで再録画します。

   フレームは音声を表示できません。 スコア付きデモでは、ストリームとランプも確認します — volumedetect は情報レベルでログを出力するため、-v error ではその出力が抑制されます。

   ffprobe -v error -select_streams a:0 -show_entries stream=codec_name,duration \
     -of default=nw=1 demo/vN/out/product-demo.mp4
   for w in "-ss 0 -t 0.25" "-ss 12 -t 0.5" "-sseof -0.25"; do \
     ffmpeg -hide_banner -nostats $w -i demo/vN/out/product-demo.mp4 \
       -af volumedetect -f null - 2>&1 | grep mean_volume; done
   

   期待値：動画の長さと約0.05秒以内の aac ストリーム、max_volume が0 dB未満、先頭と末尾の平均が中央の平均よりかなり小さいこと — これがフェードが機能したことの証明です。

9. demo/vN/README.md を書きます — ルート、ソースファイルマッピング、再生時間、このバージョンが録画された CAPTIONS スタイルと音楽トラック、そしてフローが意図的にスキップするものを含むシーンテーブル。demo/README.md を更新して新しいバージョンをリストアップします。

パス、再生時間、サイズを報告し、ユーザーが視聴できるようにmp4を開きます — macOSでは open、Linuxでは xdg-open、Windowsでは start。

エンジンAPI

play() 内で使用可能：

呼び出し	効果
scene(n)	シーン n にクロスフェード、アドレスバーを URLS から更新
tap(sel, ms)	要素にポインターを移動してクリック（リップル + プレス）
moveTo(sel, ms) / click(sel)	2つの半分。間に状態変化が必要な場合に使用
hideCursor() / place(x, y, 0)	シーンに入るときにポインターをリセット
say(text, opts?) / hush()	キャプションの入/切。{ at: sel } は coach キャプションを固定、{ step: n } はインデックスを強制
type(el, text, ms)	<span> への1文字ずつのタイピング
wait(ms)	待機
reveal(el)	moveTo によって自動呼び出し — .main をスムーズスクロールし、折り返しより下のターゲットを表示可能にする

最後に window.__demoDone = true を設定します（スケルトンが既に実行します）— レコーダーはこれを待ちます。

キャプションデザイン

const CAPTIONS = { style: 'pill', steps: 6 } は URLS とともにエンジンの先頭に配置します。4つのスタイルはすべてスケルトンに含まれています。say() はどれを選んでも同じ呼び出しです。動画ごとに選択：

style	説明	いつ選ぶか
pill (デフォルト)	インクカプセル、下部中央	短くてマーケティング向けのもの。最も隠蔽が少ない、キャプションあたり約10語
lower-third	左寄せブロック、ステップインデックスと進捗トラック付き	長めのフローで、視聴者に順序を感じさせたい場合。GIFで最も読みやすい
rail	ウィンドウの下の68pxの帯、チャプタードット	ドキュメントやサポートクリップで、何も隠してはいけない場合。アプリの高さを消費 — 以下参照
coach	操作中の要素に固定された吹き出し、残りは暗転	フォローアロングのチュートリアル。すべてのキャプションに { at: sel } が必要。それがないものは pill にフォールバック

steps はインデックス、進捗トラック、レールのドットを制御します。say() の呼び出しを数えて設定します。設定しないと、実行は 05 / 06 と表示されたまま終了します。スタイルがわからない場合？ index.html をブラウザで開き、CAPTIONS.style を切り替えてください — ページは R でリプレイされるため、録画せずに4つすべてを比較できます。

音楽

オプションであり、トラックが存在しない限りオフです。BGMはエンコード時にミックスされます — Playwrightはオーディオを一切キャプチャしないため、デモページやエンジンには何の影響もありません。

node demo/vN/record.mjs                      # demo/vN/music.* が存在すれば使用、なければ無音
node demo/vN/record.mjs --music ~/beds/x.mp3  # 明示的なパスがスケルトン内のファイルより優先
node demo/vN/record.mjs --music-db -4        # BGMをより小さく
node demo/vN/record.mjs --no-music           # スケルトン内にトラックがあっても無音

• バンドルされたトラックは assets/music/ にあり、その LICENSES.md にはファイルごとに1行ずつ記載されています。検証可能なCC0/CC-BYラインなしでトラックが出荷されることはありません — 無認可のmp3は、このスキルをインストールする全員の問題です。不明な場合は、リポジトリ外に置き、--music <path> で渡してください。
• レベルは正規化され、設定はされません。 すべてのトラックは−18 LUFS、−1.5 dBのトゥルーピーク天井に駆動されるため、バージョン間でBGMを交換しても手動調整なしで一致します。--music-db はそのターゲットをシフトします。ゲインを追加するわけではありません。
• フェードは自動です — イン1.5秒、アウト2.5秒、アウトは実際の動画の長さに合わせて計時されます。
• 動画より長いトラックを選んでください。 それより短いものはループされ、その継ぎ目が聞こえます。レコーダーはループが必要な場合に警告を出します。60秒以上あれば、通常の40〜60秒のデモをカバーできます。
• ボーカルなし、急激なドロップなし。 視聴者は同時にキャプションとUIコピーを読んでいます。
• オーディオはmp4にのみ配置されます。 webmは無音の生キャプチャであり、GIFにはオーディオトラックがまったくありません — 音楽のみの変更は --gif 出力では見えません。

規約

• ステージは固定の 1280×800 のモックブラウザ です。そのうち44pxがブラウザクロムで、アプリ用に 1280×756 が残ります。スケルトンには48pxのものが含まれています。