SyncTake コーディングエージェントスキル
このスキルは、コーディングエージェント（Claude Code、Cursor、Antigravity、OpenCode、Codex）に、Webアプリケーションの洗練されたナレーション付きビデオウォークスルーを自律的に制作する方法を指示します。
🎯 このスキルをアクティブにするタイミング
以下のようなリクエストがあった場合に、このワークフローをアクティブにしてください。
- "このプロジェクト/機能のデモ動画/ウォークスルーを作成して"
- "アプリの動作を示す動画を録画して"
- "この新しいUIの30秒/60秒ウォークスルー動画を作成して"
- "この機能をナレーション付き動画で紹介して"
🛠️ ステップ 0: 環境と依存関係の確認
ワークフローを実行する前に、必要なツールがインストールされていることを確認します。
- SyncTake CLIの確認:
synctake --help || pip install -e /path/to/synctake - Playwrightの確認（自律的なヘッドレスキャプチャ用）:
python -c "import playwright" 2>/dev/null || (pip install playwright && playwright install chromium)
📋 自律型エージェント 5ステッププレイブック
[1. UI調査] ──> [2. synctake.json作成] ──> [3. 開発サーバー起動] ──> [4. 自律パイプライン実行] ──> [5. 動画納品]
ステップ 1: コードベースとUIランドマークの調査
- ワークスペースからルート、コンポーネント、HTMLビューを検索します（例:
src/、pages/、app/、public/index.html）。 - 動画の主要な視覚的ランドマークを特定します:
- ヘッダー、ナビゲーション、ヒーローセクション (
#hero、header、.brand) - インタラクティブなコンポーネント、フォーム、ボタン (
#deploy-btn、button[type='submit']、select) - カード、メトリクス、グラフ (
[data-testid='metrics']、.card、.recommendation-grid)
- ヘッダー、ナビゲーション、ヒーローセクション (
- または、組み込みのUIインスペクターを実行します:
synctake plan ./public/index.html --prompt "<ユーザーガイダンス>" --duration <秒数>
ステップ 2: ウォークスルー仕様ファイルの作成 (synctake.json)
プロジェクトルートに synctake.json を作成します。
ペーシングとスクリプト作成のルール:
- Words-Per-Minute（WPM）: 140〜150 WPM（1秒あたり約2.4ワード）を目標にします。10秒のシーンには、およそ20〜24ワードを含めます。
- シーンのタイムスタンプ (
at): 厳密に増加している必要があります。 - 画面上のコールアウト:
titleとcalloutは短くインパクトのあるものにしてください（ネイティブのフローティングカードとして表示されます）。 - フォーカス: 実際の有効なCSSセレクタ（
#id、.class、[data-testid='...']）を使用します。 - ナレーション: 自然で会話調の文章を書いてください。生のコードシンボル、セレクタ、タイムスタンプを読み上げないでください。
{
"title": "機能ウォークスルー",
"duration_seconds": 30.0,
"voice": {
"provider": "system"
},
"scenes": [
{
"id": "01-overview",
"at": 0.0,
"title": "ライブクラスター概要",
"callout": "リージョン全体のリアルタイムヘルスとテレメトリーメトリクス",
"focus": "#metrics-card",
"text": "ようこそ！このウォークスルーでは、リアルタイムのクラスターヘルスと自動修復について見ていきます。"
},
{
"id": "02-actions",
"at": 12.0,
"title": "ワンクリックデプロイ",
"callout": "人間による承認を伴う自動検証",
"focus": "#deploy-btn",
"text": "クリック一つで、パイプラインが設定変更を検証し、ローリングアップデートを適用します。"
}
]
}
ステップ 3: 開発サーバーが起動していることを確認する
Webアプリケーションの開発サーバーがローカルポートで既にリッスンしているか確認します:
lsof -i :3000 -i :5173 -i :8000 || true
起動していない場合は、バックグラウンドで起動します:
- 静的HTMLの場合:
python3 -m http.server 5173 --bind 127.0.0.1 - Viteの場合:
npm run dev - Next.jsの場合:
npm run dev
ステップ 4: 自律パイプラインの実行
オールインワンの自律実行コマンドを実行します:
synctake run \
--url http://127.0.0.1:5173 \
--config ./synctake.json \
--out ./demo.mp4
ユーザーが音声参照クリップ（例: voice.wav）を提供した場合は、--ref-audio ./voice.wav を渡して声をクローンします。
synctake run が自動的に行うこと:
- ヘッドレス画面キャプチャ: Playwrightを介してChromiumを起動し、シーンキューに従ってステップ実行し、ホスト適応型フォーカスリングで要素をハイライトし、ネイティブコールアウトバッジを表示し、調整済みWebMを保存します。
- 音声合成: 明瞭な音声を合成するか（またはユーザーの声をクローンします）。
- ペーシングとスロット検証: 各オーディオクリップが割り当てられたシーン時間を超えていないことを確認します。
- マスターキャンバスアセンブリ: クリップを正確なキューに配置し、ポーズをデジタルサイレンスで埋め、調整済みの48kHzステレオオーディオを出力します。
- ロスレスマキシング: オーディオを放送規格 (-16 LUFS) にノーマライズし、世代損失ゼロで1080p H.264 MP4にマックスします。
ステップ 5: 完成した動画の納品
synctake run が完了したら:
- 出力動画が存在し、空でないことを確認します (
ls -lh ./demo.mp4)。 - 完成した動画成果物を、絶対パスリンクと共にユーザーに提示します:
"完成したウォークスルー動画はこちらです: demo.mp4!"