プロジェクトフレーム生成は何をしますか？

現在のプロジェクトの最良のページをスクリーンショットし、フレーム加工します。このスキルは、ページの発見、アプリケーションの準備、生のスクリーンショット品質を担当します。必須サブスキル: generate-frame がフレーム加工とカバー画像を担当します。そのステップ1を最初に実行し（frame-kitを見つけて確認）、失敗した場合は停止してください。<frame-kit> は解決されたパスです。

出力は混在しません：生画像 → ~/Pictures/<project>-portfolio/raw/、フレーム加工済み → ~/Pictures/<project>-portfolio/framed/。

1. スキャン

ユーザー向けページを見つけます：ルート、ページ/ビューコンポーネント、管理リソース（Filament、Nova…）、ナビゲーションメニュー。コードを読んでアプリの実行方法、存在するロール、および各ロールが見るページを確認します。ポート番号、URL、ログイン情報を推測せず、アプリを実行するかユーザーに確認して検証してください。

2. 最大5ページの提案

この製品がどのような種類のものかを判断し、ページを実際の機能を最もよく示す順にランク付けします。問いは次の通りです：この製品を一枚の画像で見知らぬ人に理解させるには？

製品	最も強いページ
ビジネス/管理アプリ（POS、CRM、在庫管理）	実際のデータがあるコアワークフロー、次にダッシュボード、データ豊富なリスト
ダッシュボード/分析	メインダッシュボード、1つのドリルダウン、1つのレポート
コンテンツ/マーケティング/Eコマースサイト	ランディング/ヒーロー、リストページ、詳細ページ、カートまたはチェックアウト
エディター/ビルダー/クリエイティブツール	コンテンツを表示しているキャンバス、次にギャラリーまたはプロジェクトリスト
開発者ツール/ドキュメント	使用中のメインUI、結果/出力ビュー

ログインページ、単なるフォーム、設定ページ、エラーページ、およびほぼ重複するページはスキップします。5ページ未満でも構いません。各ページを名前、パス、ロール、1行の理由とともにリストしてください。

3. 質問

AskUserQuestionを使用し、マルチセレクト（質問ごとに最大4オプション、必要なら2つに分割）でユーザーに確認します。ユーザーが選択するまでキャプチャを開始してはいけません。また、ライト/ダーク（アプリに両方がある場合のみ）、使用するロール/アカウントも尋ねてください。認証情報はユーザーの環境または既存のセッションから取得し、スクリプト、ファイル、出力に書き込んだり、アクセス制御を回避したりしてはいけません（選択したロールが見られないページはスキップされ、強制されません）。

4. アプリケーションの準備

アプリが実行されていない場合は、空いているポートで起動し、起動したものは停止することを忘れないでください。
選択したページを開きます。空またはプレースホルダーデータの場合は、その旨を伝え、現実的なデモデータを提供します。シーディングには明示的な同意が必要で、別のデータベースまたは使い捨てデータベースに保存し、開発データベースには同意なしに触れてはいけません。データベースへの書き込みよりも、UIが作成できる状態（カートにアイテムを追加するなど）を優先します。
ユーザーのプロジェクトに依存関係やファイルを追加しないでください。スクリプトはスクラッチパッドに置きます。

5. キャプチャ

<this skill>/scripts/capture.mjs から capturePages をインポートするスクラッチパッドスクリプトを作成します：

import { capturePages } from '<this skill>/scripts/capture.mjs';
const results = await capturePages({
  frameKit: '<frame-kit>', outDir: '<raw dir>', colorScheme: 'light',   // バッチ内で統一されたスキーム
  storageState: process.env.APP_STORAGE_STATE,        // 保存されたセッション; または login: async (page) => {...} process.env を読み取り
  setup: (ctx) => ctx.addInitScript(() => localStorage.setItem('theme', 'light')),  // アプリ独自のテーマ切り替えがあれば
  pages: [{ name: '01-dashboard', url: 'http://localhost:8000/admin', prepare: async (page) => { /* カートを開く、ツアーを閉じる… */ } }],
});
console.log(JSON.stringify(results, null, 2));

これはバッチ全体で1つの1440×900 @2xのコンテキストを使用し（PNGは2880×1800）、ネットワークアイドル、フォント、遅延コンテンツを待ち、ページごとに issues を報告します：コンソール/ページエラー、HTTP ≥ 400、リダイレクト（通常はログイン不足）、壊れた画像、表示中のスピナー/スケルトン、オーバーレイ/クッキーバナー、空のチャートコンテナ。ファイル名は提案順に NN-<slug>.png と名付けます。アプリ固有のセレクタは loadingSelectors/overlaySelectors/hideCss（トースト、デバッグバー）を介して渡します。

インタラクティブ画面（カート、エディター、ボード）は、最初に prepare でサンプルコンテンツを追加する必要があります。

問題があるページごとに：修正し（オーバーレイを閉じる、要素を待つ、ログインする）、そのページだけ再撮影します。または、ユーザーに修正不可能であることを伝えて削除します。害がないと判断した警告（例：ファビコン404）は問題ありませんが、その旨を伝えてください。次に、すべてのPNGを読み取り、実際のコンテンツが表示され、半分読み込みの状態でないこと、公開すべきでない個人データ（メールアドレス、トークン、実在の顧客名）が含まれていないことを確認します。不明な場合はユーザーに確認してください。

6. フレーム加工

generate-frameのステップ2〜4を実行し、生画像フォルダを入力として使用します：--out <framed dir>、--url "<app host>/{name}"、--resolution（デフォルトは最大）。部分的な失敗は報告し、隠さないでください：失敗したファイルのみを再撮影または再フレーム加工します。生画像フォルダ、フレーム加工済みフォルダ、カバーペア、削除したページとその理由、および制限事項（例：画像が検査されていないこと）を報告します。

プロジェクトフレーム生成