今まで試していたこと（MCP・Google Stitch・Antigravity・SKILL）を総まとめで作成した唐揚げブラウザ V2 の流れまとめ

1. 唐揚げブラウザプロジェクトをルートにして開く

V2 を使うときは、唐揚げブラウザ用プロジェクト（karaageProject など）をエディタのワークスペースルートとして開きます。
すると .agent や .vscode、karaage-browser などが一覧でき、SKILL が有効になります。

図：唐揚げブラウザプロジェクトをルートにして開いた状態。右は Simple Browser で本体と対象ページを表示した例。（クリックで拡大）

2. Stitch で HP 作成・ローカル保存

まず Google Stitch MCP で HP を作成し、ダウンロード用 URL をチャットで指定してローカルに保存します。
「Stitch のダウンロード用 URL をこのパスに保存して」と指示すると、Invoke-WebRequest -Uri "【URL】" -OutFile "【保存先フルパス】" で保存されます。
ドメインは contribution.usercontent.google.com（.google 抜けで失敗するので要確認）。

図：Stitch で HP 作成し、Invoke-WebRequest でローカル保存した後の会話。（クリックで拡大）

3. 唐揚げブラウザで開く ― SKILL 発動とショートカット

「唐揚げブラウザで開いて」と指示すると、SKILL が発動し、SKILL.md や tasks.json を参照したガイドが返ります。
AI は直接エディタの画面を開けないため、Alt + K のショートカット（または Ctrl+Shift+P →「Simple Browser: Show」）で唐揚げブラウザを開きます。

図：唐揚げブラウザで開く指示後。SKILL 発動により詳細ガイドと Alt+K の案内が表示される。（クリックで拡大）

4. アドレスが二つあること・対象は相対パスで指定

唐揚げブラウザではアドレスが二つあります。一つ目は唐揚げブラウザ本体（例：http://localhost:8000/karaage-browser/index.html）。二つ目は iframe 内に表示する「対象となるページ」で、プロジェクトルートからの相対パスで指定します。
相対パスはエクスプローラーでファイルを右クリック →「Copy Relative Path」（Ctrl+K Ctrl+Shift+C）で取得できます。

図：対象 HTML を右クリックで「Copy Relative Path」を選び、唐揚げブラウザの対象アドレス欄に貼り付ける。（クリックで拡大）

5. 要素の調節・編集 ― 動画で確認

ここから先は、Antigravity 内で要素選択・Copy Element Data・チャットで指示……とすべて完結します。
以下の動画を参照してください。

動画：Antigravity 内で唐揚げブラウザを使い、要素を細かく調節・変更する流れ（すべて Antigravity 内で完結）。