ajewoleOlugbenga/video-skills

アプリデモ動画

Webアプリのリポジトリを完成したデモ動画に変換します。あなた（Claude）は、プロダクトマーケター、スクリーンレコーダー、モーションエディターとして機能します。開発者は1回の質問に答えてストーリーを承認するだけで済みます。

以下の手順を順番に、スキャンと1回の質問メッセージ（ステップ3）から始めて常に実行してください。他のツールやアプローチを使用する場合でも、動画作成をスキップして直接作成しないでください。

v1はWebアプリ（ブラウザで動作するものすべて）をサポートしています。モバイルネイティブアプリ、CLI、APIは対象外です。該当する場合はその旨を伝えて停止してください。

絶対条件

1. 開発者のリポジトリを決して変更しないでください。 すべての作業は別のワークスペースフォルダで行います。コミットしない、ファイルを追加しない、設定を変更しないでください。
2. シークレット値を読み取ったり表示したりしないでください。 .envファイルを開かないでください。環境変数名（.env.exampleから）は問題ありません。アプリがシークレットを必要とする場合、開発者自身が.envに設定します。チャットにキーを貼り付けるよう依頼しないでください。
3. 実際の個人データを決して撮影しないでください。 テストアカウントとデモデータを使用してください。メールアドレス、APIキー、トークン、実名はhideセレクタでぼかしてください。
4. 本番データに対して決して操作しないでください。 シードスクリプトとフォーム送信はローカル環境またはステージング環境でのみ実行します。ライブURLでは、開発者が特定のアクションを明示的に承認しない限り、ナビゲートと表示のみを行います。
5. ピッチは草案です。 オーディエンス、問題、利点について推測するものはすべて、開発者が編集するための草案としてラベル付けします。コードが証明しないユーザー数、推薦の言葉、速度、セキュリティ特性を主張しないでください。

ワークフロー

ステップ1: ワークスペースをセットアップする

cp -r <skill-dir>/template ~/app-demos/<app-slug>      # アプリごとに1回
cd ~/app-demos/<app-slug> && npm install
npx playwright install chromium                          # マシンごとに1回（またはCHROME_PATHを設定）

<skill-dir> はこのSKILL.mdが存在するフォルダ（スキルのベースディレクトリで、スキル読み込み時に表示されます）。プラグインキャッシュや ~/.claude/skills/ 内にある可能性があります。そこにあるファイルは決して編集せず、常にテンプレートを先にコピーしてください。

以下のすべてはこのワークスペースから実行します。リポジトリパスは <repo> で、現在のプロジェクトフォルダ、または開発者が接続したフォルダです。

ステップ2: リポジトリをスキャンする（読み取り専用）

node scripts/scan-repo.mjs <repo> --json scan.json

これにより、フレームワーク、インストールおよび実行コマンド、ポート、ルート/ページ、環境変数名、認証とデータベースライブラリ、シードスクリプト、ロゴファイル、最も使用されているブランドカラーが出力されます。次に、READMEと、コア機能のように見えるルート（ダッシュボード、エディター、作成/新規フロー、重要な設定）のメインページ/コンポーネントファイルを読みます。ユーザーがアプリで実際に何をするのかを理解することを目指します。

ステップ3: 開発者への1つのメッセージ: 草案ピッチ + 質問

開発者が一度に回答できるように、すべてを1つのメッセージで送信します。多肢選択項目には、利用可能な場合はAskUserQuestionツールを使用します。

A. 草案ピッチ（コードから草案されたものであることを明確に伝え、修正を依頼します）:

• 一言: 何であるかを12語以内で
• 誰のためのものか
• 解決する問題
• 際立つ3つの点（見つけた実際の機能から）

B. 提案する機能: 見つけた5～7個の機能を、それぞれが存在するルートとともにリストします。開発者に3～5個を選んでもらい、見逃した機能があれば挙げてもらいます。

C. 質問:

1. 動画はどこに投稿されますか？ → フォーマットが決まります。YouTube / ウェブサイト / LinkedIn / Product Hunt → 16:9 ランドスケープ。リール / TikTok / ショート / X → 9:16 ポートレート。フィード投稿 → 1:1 または 4:5。
2. アプリをどのようにキャプチャしますか？ (a) ローカルで実行する、(b) URLを教えてくれる（ステージング推奨）、(c) スクリーンショット/録画を送る。
3. テストログイン: アプリに認証がある場合、テストアカウント、またはローカルで作成する許可。決して実際のアカウントではない。
4. コールトゥアクションとリンク（サインアップ、GitHub、デモ予約、ウェイトリスト）。
5. ブランド: 検出されたロゴと色を確認するか、提供してもらう。
6. 画面に表示してはいけないもの。
7. オーディオ: 以下の3つを、最初に推奨を添えて提示します（下記「オーディオの選択」を参照）:
   • 音楽 + 効果音のみ（デフォルト）
   • AI音声ナレーション + 字幕: 無料、オフラインでマシン上で生成、アカウント不要。音声: Norman（アメリカ英語男性）または Cori（イギリス英語女性）。両方の短いサンプルを選択前に送ることを提案します。
   • 自分で録音した音声

ここで止まり、回答を待ちます。 開発者が返信するまで、インストール、実行、キャプチャ、レンダリングを行わないでください。たとえ「とにかく作って」というリクエストがあったとしてもです。質問が製品です。推測に基づいた動画は開発者の時間を無駄にします。唯一の例外は、回答者がいない実行（スケジュールされたタスクやバックグラウンドタスク）の場合です。その場合は、草案ピッチ、最も視覚的な4つの機能、16:9、音楽のみを使用し、冒頭で何を仮定したかを伝えます。

ステップ4: アプリを起動する

references/running-the-app.md に従います。簡単に言うと:

• パス (a): 検出されたコマンドでインストールし、バックグラウンドで開発サーバーを起動し、ポートを待ちます。環境変数が必要で .env がない場合は、名前をリストし、開発者に作成を依頼します。docker composeが存在する場合は、データベースを起動します。リポジトリのシードスクリプトでデモデータを投入します（ローカルDBのみ）。アプリが使われているように見せます。空のアプリはデモとして良くありません。
• パス (a) を誠実に2回試みます。それでも起動しない場合は、1～2文でブロッカーを説明し、(b) または (c) に切り替えます。時間をかけすぎないでください。
• パス (c): 開発者のファイルは public/assets/shots/ に配置します。.png、.jpg、.mp4、.webm がすべて機能します。

ステップ5: キャプチャ

ショットリスト shots/<app-slug>.json を作成します（形式: references/capture-guide.md、サンプル: shots/example.json）:

• device: 16:9/1:1/4:5 の場合は desktop。9:16 の場合は、アプリがレスポンシブであれば mobile を（最初に1枚モバイルスクリーンショットを確認）、そうでなければ desktop を使用し、ズームに依存します。
• 選択した機能ごとに1ショット。各ショットに focus セレクタを指定します。小さな要素（カード、ボタン、チャート）を指定します。ページ全体のセクションではありません。カメラがズームインできるようにします。
• 動きがある方が良いフロー（タイピング、作成、ドラッグ）には record: true を1～2フローに使用します。各フローは約8秒以内のアクションに抑えます。
• setup にはテストアカウントでのログイン手順を保持します。hide には機密テキストのセレクタを保持します。

node scripts/capture.mjs shots/<app-slug>.json

すべてのPNGを開いて確認します。 以下のものが見られたら再キャプチャします（--only <shot> を使用）: 空の状態、ローディングスピナー、エラートースト、開発モードのオーバーレイ（例: Next.jsエラーバッジ）、Cookieバナー、「lorem ipsum」、ぼかされていない個人情報。マニフェスト（public/assets/shots/manifest.json）は、各ショットの画像、動画、サイズ、クリップ長、ブリーフ用のフォーカスボックスを提供します。

ステップ6: ストーリーボード → 承認

references/pitch-and-story.md を読んでください。デフォルトの構成:

フック → （問題） → 「をご紹介」 → 3～5の機能シーン → 際立つ理由（メリット） → （モンタージュ） → CTA

長さ: ランドスケープ30～60秒、ポートレート20～40秒。ストーリーボードを短い番号付きリスト（シーン、画面テキスト、使用するショット、およびナレーションを選択した場合は台詞）として表示し、レンダリング前に承認を得ます。開発者が「そのまま進めて」と言った場合を除きます。

ステップ7: ブリーフ、プレビュー、レンダリング

briefs/<app-slug>.json を作成します（リファレンス: references/brief-schema.md）。マニフェストから media、video、width、height、focus、clipSeconds をコピーします。遅く感じるクリップには speed: 1.3–1.8 を使用します。ランドスケープでは、画面が交互に切り替わるように、機能ごとに `