Auto-Loom

あらゆるWebアプリをナレーション付きの自動操作MP4動画に変換します。ページのスクロール、要素のハイライト、ルート間の移動を自動で行い、AI音声がミリ秒単位で同期しながらナレーションを読み上げます。手動の画面収録や、何度も撮り直すLoomはもう必要ありません。ナレーションの一行を編集して、数分で再レンダリングできます。

動作の仕組み： ElevenLabs がストーリーボードの各ビートごとに1つの音声クリップを生成します。ffprobe が各クリップの正確な長さを計測します。Playwright がその長さだけブラウザを操作し、同時にウィンドウを録画します。ffmpeg が最終的なMP4にキャプショントラックを多重化します。音声の長さが基準となり、映像はそれに従うため、同期は完全です。

このフォルダがエンジン全体です。 同階層のスキルは、これらと同じスクリプトへの薄いエントリポイントです：

auto-loom-proof — ソフトウェアファクトリーの証明動画：1ビートにつき1つの受け入れ基準をカメラ上で実行します

このSKILL.mdはエンジンと開発者モードをカバーしています：コードベースを所有し、アプリがlocalhostで動作しており、JSXに安定したセレクタを追加できることを前提としています。

セットアップ（初回のみ、約3分）

cd <このスキルのフォルダ>
bash scripts/setup.sh        # Playwright + Chromiumをインストール、.env.localを作成
# .env.localを編集 → ElevenLabs APIキーを追加
node scripts/doctor.mjs      # node、ffmpeg、playwright、キー、音声を検証

まだElevenLabsアカウントをお持ちでない方は、メンテナーの紹介リンクからサインアップしてください： https://try.elevenlabs.io/atherial

doctor.mjs は不足しているものがあれば、正確な修正方法を出力します。必要条件：Node 18以上、ffmpeg（brew install ffmpeg）、ElevenLabs APIキー。音声オプション：references/voices.md。

スモークテスト（30秒、example.comを録画）：

node scripts/run.mjs --beats examples/smoke-beats.json

ステップ0 — まずユーザーにヒアリング

いきなり構築を始めないでください。以下の質問をしてください：

1. 録画するURLまたはアプリは何ですか？ローカルで動作していますか？
2. 受信者は誰ですか（名前とコンテキスト）？
3. ストーリーは何ですか？何が変わったのか、初めて見せるものは何ですか？
4. 特に強調すべき機能、指標、セクションはありますか？
5. トーンは？ （クライアントアップデート、内部デモ、見込み客向けショーケース）
6. アプリにログインは必要ですか？ （references/auth.mdを参照 — チャットでパスワードを決して要求しないでください）
7. 目標の長さ — 30秒、60秒、それとも75秒？

急いでいる場合：1〜3を質問し、残りはアプリから推測してください。

ステップ1 — ストーリーボードを書く（`beats.json`）

コードに一切触れる前にナレーションを書き、そのまま承認を得てください。スクリプトのルールと機能するビートのフレーミングについては：references/tts-rules.md。

{
  "meta": {
    "title": "Acmeダッシュボードウォークスルー",
    "slug": "acme-walkthrough",
    "cta": "フィードバックをお送りいただければ、次のフェーズに進みます。",
    "targetLengthSec": 70
  },
  "baseUrl": "http://localhost:3000",
  "viewport": { "width": 1920, "height": 1080 },
  "beats": [
    {
      "id": 1,
      "page": "/dashboard/insights",
      "text": "ジムさん、こんにちは。AI可視性トラッカーにいくつかのアップデートをリリースしました。",
      "actions": [
        { "fn": "waitFor",    "sel": "[data-vn=kpi-row]" },
        { "fn": "scrollToEl", "sel": "[data-vn=kpi-row]", "opts": { "instant": true } },
        { "fn": "hl",         "sel": "[data-vn=kpi-row]" }
      ]
    }
  ]
}

完全なスキーマ：schema/beats.schema.json。アクションテーブルとセレクタガイダンス：references/actions.md。ログインオプション（スクリプト化されたステップまたは保存済みセッション）：references/auth.md。

費用をかける前にチェック：

node scripts/validate.mjs --beats <ファイル>       # 構造 + TTS + ペーシングのlint
node scripts/run.mjs --beats <ファイル> --script-only   # ナレーションを表示して停止

バリデーターは、未知のアクション、欠落しているセレクタ、TTSの問題（emダッシュ、裸の頭字語、長すぎる文）、および目標の長さに合わないペーシングを検出します。

--script-only は費用を節約するレビューゲートです：各ビートのナレーションとビートごとの推定タイミングを出力し、ElevenLabsへの呼び出しや録画を行う前に終了します。ここでスクリプトの承認を得てから、フラグなしで再実行してクレジットを消費してください。

ステップ2 — ページに計装を施す（開発者モード）

Playwright には安定したセレクタが必要です。コードベースにアクセスできる場合は、コンポーネントのJSXに data-vn 属性を追加します：

<div data-vn="kpi-row" className="grid grid-cols-4 gap-4">
<Card data-vn="competitor-chart" ...>

そしてそれらを参照します：{ "fn": "hl", "sel": "[data-vn=kpi-row]" }。

録画中はインタラクティブなドリルダウンを抑制します。 role="button" / tabIndex={0} を持つクリック可能なカードは、ハイライト中に自動フォーカスされ、動画の途中でドロワーを開く可能性があります。デモモードフラグでゲートします： {!isDemoMode() && <MetricBreakdownSheet ... />}。

アプリがローカルで認証を必要とする場合は、デモモードを配線するか（認証をスキップし、ナレーションの数値と完全に一致するフィクスチャデータを使用）、references/auth.md の認証パスを使用してください。

CSPに関する注意： レコーダーは bypassCSP: true でChromiumを起動するため、厳格なCSPページに presenter.js を注入できます。ライブセッションの本番アプリを対象とする場合、その自動化ブラウザコンテキスト内では Content-Security-Policy が無効になることに注意してください。

ステップ3 — ワンコマンド

node scripts/run.mjs --beats <ファイル>

これにより、検証 → 音声（テキストハッシュでキャッシュ） → プレフライト（ヘッドレスで全てのセレクタを解決してから録画開始） → 録画 → キャプション → 多重化 → 検証が実行されます。出力は demo-video-out/<slug>/ に配置されます：

<slug>-demo.mp4 — 最終動画（H.264/AAC、ソフトキャプショントラック）
<slug>-demo-contact-sheet.png — 目視確認用のサンプルフレーム
qa/beat-NN.png — 各ビートのホールドポイントでの正確なスクリーンショット
captions.srt、audio/、video/recording.webm

すべてのフラグ：--script-only（ナレーションスクリプトを表示し、ElevenLabs呼び出しや録画の前に終了 — ステップ1のレビューゲート）、--preflight-only（セレクタをチェックし、費用は発生しない）、--skip-audio（ビジュアルのみの変更 — 音声は再利用）、--skip-preflight（ヘッドレスセレクタチェックをスキップ — プレフライトが通ったばかりで何も変更がない場合のみ）、--burn-captions（キャプションをピクセルにハードコード — トラックを除去するプラットフォーム向け）、--no-captions、--out <ディレクトリ>、--env <環境ファイル>。

ステップ4 — 送信前に確認

run.mjs は、長さ（MP4の長さが音声の合計と0.5秒以内であること）、オーディオレベル（無音トラックの検出）をチェックし、QAスクリーンショットを出力します。それでも以下の項目を目視確認してください：

コンタクトシート + qa/beat-NN.png：各フレームが、そのビートがナレーションする内容を示していること — ログインページ、エラー状態、不意のモーダルがないこと。
最初のビートで受信者の名前を呼び、最後のビートでCTAを正確に伝えていること。

イテレーション

ナレーションの編集 → 再実行；変更されたビートの音声のみが再生成されます。
ビジュアル/ペーシングの編集 → --skip-audio。
セレクタが壊れた → --preflight-only でどのビートとセレクタが問題か正確に表示されます。

既知の注意点

ホットリロードにより注入されたプレゼンターが消去されます。 既に対応済み — プレゼンターは各ビートの前に再注入されます。ただし、録画中にアプリを編集しないでください。
ポートのずれ。 yarn dev はポート3000がビジーの場合、3001を使用します — baseUrl を更新してください。
無料音声と有料音声。 クローン/ライブラリ音声は無料プランで payment_required エラーを引き起こします。doctor.mjs がレンダリング前にこれを検出します。
i18nリダイレクト。 /en/dashboard → /dashboard のようなリダイレクトは正しく追跡されます；同一ページのビートは再ナビゲートしません。
配信。 MP4は自己完結型です — メール、Slack、LinkedIn DM、Notionへの埋め込み、またはDescriptにインポートして冒頭に自己紹介を追加することもできます。

MikeFishbeinAtherial/infinite-headcount

infinite-headcount とは？

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

ドキュメント