スキル自身の言葉で
Puppeteer を通じてヘッドレス Chrome を起動し、完全にレンダリングされた DOM をキャプチャして CSSOM ルールをインライン化し、画像を base64 データ URI に変換することで、実行中の Web アプリから単一の自己完結型 HTML ファイルを生成します。React/Vite、Next.js、Angular、Vue/Nuxt、Svelte、Storybook など、どのフレームワークでも動作し、MockPage.jsx は不要です。
このスキルは、処理を進める前に 2 つのキャプチャ戦略のどちらを使うかをエージェントに必ず確認させ、Puppeteer によるスナップショットを推奨し、ローカルサーバー起動後に確認のため一旦停止させます。フラグでは待機時間、ビューポート、ダークモード、固定要素の削除、canvas のインライン化、ログインが必要なページ向けの認証スクリプトを指定できます。アプリをローカルで実行できない場合は、付録の手順に従い React コンポーネントを手動の MockPage.jsx にフラット化します。
生成されるもの
- キャプチャした各ルートごとの自己完結型 HTML ファイルで、スタイルはインライン化され、画像は base64 として埋め込まれます。
- ホーム、価格、ダッシュボードなど複数のビューをキャプチャする場合は、ルートごとに 1 ファイルになります。
- canvas フラグを使用した場合、canvas 要素からシリアライズされたチャートが base64 画像になります。
仕組み
- 01ユーザーに戦略を選ばせる
抽出を開始する前に、エージェントは A/B 比較を提示し、Puppeteer ルートを推奨した上で、明確な選択を待ちます。
- 02ルートごとにスナップショットスクリプトを実行する
URL ごとに 1 つのコマンドを実行し、各キャプチャを .stitch 内の個別ファイルに書き出します。ネットワークがアイドルになった後、一定の待機時間が入ります。
- 03スクリプトにページをインライン化させる
CSSOM ルール、リンクされたスタイルシート、画像、srcset のソース、同一オリジンのアイコンフォントがファイルに折り込まれるため、実行中のサーバーに依存する必要がありません。
- 04フレームワークに応じてフラグを調整する
待機時間や URL はスタック毎に異なります。たとえば、フレームワークがサーバーレンダリングされたマークアップをハイドレートする場合は、より長い待機時間が必要です。
- 05ログインが必要なページを認証する
認証モジュールが Puppeteer セッション内で実行され、その後スクリプトはセッションを維持したまま元の URL に戻ります。
- 06必要な場合のみモックにフォールバックする
アプリが全く起動できない場合、付録のルートではライブレンダリングをキャプチャする代わりに、コンポーネントを 1 つの JSX ファイルにフラット化します。