チュートリアルビデオは何をしますか？

「これの使い方を教えて」を、すぐに使えるMP4フォルダに変換します。Claudeがディレクター、脚本家、オペレーター、編集者を務めます。ユーザーは計画を承認し、脚本を承認し、結果を見るだけです。

仕組み（そしてなぜそうするのか）

ツールを理解する → インタビュー → 脚本（承認） → 録画なしリハーサル
   → 画面キャリブレーション → 各動画を録画 → tut prepare → tut plan/stills → tut render → 納品/

アーキテクチャを定義する3つの問題があります。これらを理解すると、以下のほぼすべてのルールが説明できます。

拡張機能のクリックはシステムマウスを動かさない。 そのため、画面録画にはカーソルが表示されません。そこで、ページに注入された recorder.js が、クリック、キー入力、ナビゲーションが発生した場所と時間を記録し、カーソル、クリックウェーブ、ズーム、コールアウトは後で編集時に描画されます。編集は未来を知っているため、カーソルはクリックの前にボタンまでスライドし、カメラはアクションの前にズームインします。
動画とイベントの同期。 各テイクの開始時と終了時に、__tut.flash() がページを0.5秒間マゼンタに塗りつぶします。編集者はこのフラッシュを動画内で見つけ、それによって正確な時間（ページの時計 → 動画の時間）と画面上のページの正確な矩形を、Retina座標やマルチモニターの計算なしに特定します。
Claudeはアクション間で遅い。 生の動画には長い停止部分があります。編集者はこれらの部分（同一フレームのためカットは見えない）をカットし、動きのある待機時間を高速化し、最終結果を字幕を読むのに十分な時間だけ静止させます。そのため録画中は急がないでください。急ぐとエラーを引き起こすだけです。

以下で使用するパス:

SKILL_DIR: このスキルのフォルダ（このファイルがある場所）。
TUT="$SKILL_DIR/scripts/tut"、REC="$SKILL_DIR/scripts/rec.sh"、WIN="$SKILL_DIR/scripts/chrome-window.sh"。
SERIE: シリーズのフォルダ。デフォルトはカレントディレクトリの ./tutoriais/<slug-of-series>/（ユーザーが別の場所を希望する場合は尋ねてください）。

すべての tut コマンドは最後に RESULT {json} という行を出力します。次のステップを決めるためにこの行を読んでください。

フェーズ0: 前提条件（セッションごとに1回）

$TUT doctor を実行します。初回はエンジン（Remotion）をインストールし、最初のレンダリング時にヘッドレスChrome（約140 MB）をダウンロードします。
Claude in Chromeのツールを一度のToolSearch呼び出しでロードします: select:mcp__claude-in-chrome__tabs_context_mcp,mcp__claude-in-chrome__tabs_create_mcp,mcp__claude-in-chrome__navigate,mcp__claude-in-chrome__computer,mcp__claude-in-chrome__javascript_tool,mcp__claude-in-chrome__find,mcp__claude-in-chrome__read_page。拡張機能が接続されていない場合は、ユーザーに /chrome を実行するよう依頼してください。これなしでは録画できません。
ユーザーに、マシン上で何が起きるかを一度だけ伝えます: macOSはターミナルアプリへの画面収録許可とChromeのオートメーション許可（ウィンドウ配置のため）を求めます。録画中はおやすみモードをオンにし、マウスやウィンドウを操作しないように伝えます。

フェーズ1: ツールを理解する

何かを尋ねる前に、教える対象を調べてください。良い質問はそれに依存します。

ローカルプロジェクト（リポジトリ）がある場合: READMEとドキュメント、ルートとページ、ナビゲーションメニュー、フォーム、オンボーディングを読んでください。コードではなく、エンドユーザーの視点（「求人を作成する」「同僚を招待する」）で機能をリストアップしてください。
URLの場合: Claude in Chromeで移動し、主要画面で filter: "interactive" を指定して read_page を使い、メニューを開いてください。

結果: 対象視聴者が実行できるタスクの簡潔なマップと、各タスクの開始画面。詳細は references/roteiro.md に。

フェーズ2: インタビューとシリーズ計画

AskUserQuestion を使用します。各質問には、フェーズ1のマップから得た具体的な選択肢と推奨事項を提示してください。ユーザーが答えを考え出さなくてもいいようにします。ユーザーと一緒に決めてください:

対象視聴者とレベル（誰が見るか、何を知っているか）。
シリーズの目的（オンボーディング、サポート削減、営業デモ、社内トレーニング）。
教えること: マップのタスクからの複数選択。
動画の数: あなたが提案してください。1動画 = 1つの成果（「求人を公開する方法」）、30秒～3分、3～8ステップ。
ビジュアル: プリセット aurora（ダーク）、grafite、または claro、ブランドカラーとロゴ。
録画環境: URL、Chromeに既にログインしているデモアカウント、架空のデータ、絶対に表示してはいけないもの。

その後、シリーズ計画を表で表示し（番号、タイトル、成果、推定時間）、OKを待ちます。

フェーズ3: 脚本（承認ゲート）

SERIE/serie.json と、動画ごとに SERIE/videos/<NN-slug>/roteiro.json を書き、references/roteiro.md のスキーマとテキストルールに従ってください。最も重要な点:

各ステップには、短く命令形の titulo（画面に大きく表示されるもの）、オプションの texto（どこでまたはなぜ）、あなたが実行する acoes、resultado_esperado があります。
インターフェースの名前は、画面上に表示されるとおりに正確に書いてください。見ている人はそのテキストを探します。

$TUT validate SERIE を実行し、各脚本の読みやすい表をユーザーに表示します。承認なしには録画しないでください。 録り直しは書き直しよりはるかにコストがかかります。

フェーズ4: リハーサル（録画なし）

各動画について、録画せずにChromeで手順を実行します。これにより、機能するセレクターと参照、予期しないポップアップ、遅い読み込み、事前に準備が必要なもの（データ、ログイン）を発見します。その後:

システムを初期状態に戻します（ユーザーが同意すれば、リハーサルで作成したものを削除）。
ログインが必要な場合は、ユーザーに手動でログインするよう依頼してください。パスワードを入力したり、ログイン画面を録画したりしないでください。
何か合わない部分があれば脚本を調整し（変更点をユーザーに伝えます）。

フェーズ5: ウィンドウの準備とキャリブレーション（シリーズごと、またはウィンドウが変更された場合）

references/gravacao.md の「ウィンドウとキャリブレーション」セクションに従ってください。要約:

recorder.js を注入します。
__tut.windowPlan(1280, 720) を実行します。返されるマーカーとboundsを使用して $WIN <marker> <bounds...> を実行します。
フルスクリーンで数秒間録画し、フラッシュを入れます: $REC start SERIE/.tut/calibracao --full → __tut.flash() → $REC stop ...。
$TUT calibrate SERIE を実行し、生成された viewport.png を確認します。

これにはページだけが表示され、ブラウザバー、他のウィンドウ、拡張機能の境界線や通知は表示されない必要があります。境界線が表示される場合は、captura.json で insets を設定します。

フェーズ6: 各動画の録画

完全なプロトコルは references/gravacao.md にあります。テイクの骨格:

$REC start SERIE/videos/<id>/take-1          # ページ領域のみ録画（キャリブレーションの切り抜き）
javascript_tool: __tut.flash()                # 初期フラッシュ（同期）
各ステップについて:
  javascript_tool: __tut.mark('start:<passo>')
  アクションを実行（computer: left_click / hover / key; 入力は __tut.type）
  重要なものをハイライト: __tut.callout('テキストまたはセレクター', '短いラベル')
  結果が画面に表示されるのを待つ
  javascript_tool: __tut.mark('end:<passo>')
javascript_tool: __tut.flash()                # 最終フラッシュ（時計のずれを補正）
javascript_tool: __tut.dump()  →  $TUT save-events SERIE/videos/<id>/take-1   （stdin経由でJSON）
$REC stop SERIE/videos/<id>/take-1
$TUT prepare SERIE/videos/<id>/take-1

録り直しを防ぐルール:

完全なページ読み込みの後は、必ずreorderを再注入してください。 以前のイベントはタブのセッションに保存されています。別のドメインに移動する前に、dump と save-events を実行してください。
ステップが途中で失敗した場合、__tut.mark('abort:<passo>') を使用し、前の状態に戻り、start:<passo> でやり直してください。最後の完全な試行が有効です。これで録画を停止しないでください。
入力する場合、フィールドをクリックした後は __tut.type('テキスト') を推奨します（テキストが一文字ずつ表示されます）。computer type はテキストが一度に現れます。
スクロールする場合、__tut.scrollTo('テキストまたはセレクター') を推奨します（スムーズスクロール）。編集者がカットするため、一時停止は無料です。急がないでください。
alert / confirm を発生させないでください: これらは拡張機能をフリーズさせます。ステップに「削除」が必要な場合は、事前にユーザーに伝えてください。

フェーズ7: 編集とレビュー

$TUT prepare SERIE/videos/<id>/take-N    # カット、同期、動きの計測 → take.json
$TUT stills  SERIE <id>                  # スチルの計画とグリッドを videos/<id>/qc/stills.jpg に生成

レンダリング前にスチルのグリッドを確認（画像を読む）してください。確認事項:

カーソルとクリックウェーブが正しい要素に重なっているか
コールアウトが要素を囲んでいるか
字幕が画面と一致しているか
ズームが空の領域にないか
機密データが表示されていないか

脚本（テキスト）を修正するか、問題のあるステップだけを take-2 で録り直してください。計画は、そのステップが完了している最新のテイクを使用します。その後:

$TUT render SERIE <id>                   # → SERIE/entrega/<id>.mp4 + チャプター + コンタクトシート

コンタクトシート（entrega/<id>.sheet.jpg）を開いて最終確認してください。視覚的な調整（テーマ、ズーム、音楽、イントロ、アウトロ）は references/edicao.md にあります。

フェーズ8: 納品

$TUT deliver SERIE を実行します。これにより、タイトル、時間、YouTubeに貼り付け可能なチャプターを含む entrega/LEIAME.md が生成されます。
entrega/ フォルダと要約（動画、時間、カバーした内容）をユーザーに表示します。
ファイルを送信できる場合は、最初のMP4を送信します。
$TUT clean SERIE を実行する前に尋ねてください。これにより生の録画 raw.mkv が削除され、容量が解放されます。

原則

脚本が指示し、録画が従う。 実際のインターフェースが脚本と異なる場合は、停止してユーザーと脚本を調整してください。録画中に即興で行わないでください。
1ステップ = 画面上の1つのアイデア。 字幕が2文必要な場合、おそらく2つのステップです。
説明するより見せる。 コールアウトを使用して要素を指し示します。字幕はアクションに名前を付けるだけです。
デフォルトでプライバシーを確保。 ページ領域のみ録画し、架空のデータを使用したデモアカウントを使用し、クエリ文字列をバーに表示しないでください。録画前に、表示されるべきでないものを閉じてください。
結果を目で確認。 スチルとコンタクトシートは、あなたが確認するために存在します。確認せずにユーザーに動画が良いと言わないでください。

参照

references/roteiro.md: ツールの発見、シリーズ設計、インタビューの質問、serie.json と roteiro.json のスキーマ、テキストルール、例。
references/gravacao.md: ウィンドウ、キャリブレーション、ステップごとのテイク、__tut API、エラー回復、Claude in ChromeとmacOSの落とし穴。
references/edicao.md: 編集者がカット、ズーム、カーソルを決定する方法、テーマとオーディオのオプション、QCチェックリスト、トラブルシューティング。

チュートリアルビデオ