フレーム生成
既存のスクリーンショットを frame-kit でフレーム付きPNGに変換します。描画はすべて frame-kit が行います。このスキルはツールの場所を特定し、実行し、結果を確認してカバー画像を選びます。プロジェクトのページを先にスクリーンショットする場合は、generate-project-frames を使用してください。
1. frame-kit の場所を特定して確認する
フォルダを <frame-kit> と呼びます。cli.mjs と frame-kit という名前の package.json を持つ最初のものを次の順序で探します:
$FRAME_KIT_DIR- PATH 上で
frame-kitコマンドが指すフォルダ（readlink -f "$(command -v frame-kit)"のフォルダ） ~/projects ~/code ~/dev ~を深さ 4 まで検索、node_modulesはスキップ（複数一致した場合はどれか尋ねる）- ユーザーに尋ねる。ない場合は
git clone https://github.com/CrziDev/frame-kitを提案する
その後:
node_modulesがない場合 →<frame-kit>でnpm installを実行する。node <frame-kit>/cli.mjs --helpを実行し、表示されるオプションからのみコマンドを構築する。--resolutionまたは--fitがない場合、インストールが古いので省略し、ユーザーにgit pullするよう伝える。- 「Chromium not found」→
<frame-kit>でnpx playwright install chromiumを実行する、またはCHROME_PATHを設定する。
パスをスキルファイルに書き込まないでください。
2. フレーム化
node <frame-kit>/cli.mjs single <画像|フォルダ> --out <フレーム化ディレクトリ> [オプション]
--out: 常に渡します。デフォルトは<入力ディレクトリ>/framed/で、生のフォルダ内にネストされます。フレーム化された画像はソースから分離してください。--url "<ホスト>/{name}": アドレスバーのテキスト。{name}はファイル名からNN-プレフィックスを除いたものです。アプリの実際のホストとパスがわかっている場合はそれを使用し、そうでない場合は省略します。--style paper: 領収書、請求書、印刷物。フォルダ実行では1つのスタイルが使用されるため、該当ファイルのみを--style paperと同一--outで個別に再実行します。--resolution standard|high|max: デフォルトはmax(3840×2400)。READMEやクイックプレビューにはstandard(1920×1200)、ウェブやスライドにはhigh(2560×1600) を使用します。解像度が高いほどフレームとテキストが鮮明になりますが、スクリーンショットの詳細が増えるわけではありません。1バッチにつき1つの解像度を使用します。--fit auto|contain|cover: デフォルトはauto（スクリーンショット全体、非常に縦長のページは上部から切り抜き）。トリミングを修正する場合のみ変更します。
終了コード 1 は一部のファイルが失敗したことを意味しますが、他のファイルは書き込まれ、失敗は stderr にリストされます。原因（読み取り不能または破損した画像、サポートされていないタイプ、50 MB 超過）を修正し、それらのファイルのみ再実行します。すべてのファイルが失敗した場合は、Chromium が原因である可能性があります。
3. カバー画像（フォルダ入力のみ）
画像を確認し、互いに補完し合う2枚を選びます:
- 裏（back）: 製品の概要（ダッシュボード、分析、ホーム）、横長、サムネイルサイズで読めるもの。
- 表（front）: アプリの機能を示す画面、実際のコンテンツ、裏とは異なるレイアウトのもの。
- 絶対に選ばないもの: ログイン、空の状態、エラーページ、非常に長い全ページショット、領収書、または同じ画面を2回。
node <frame-kit>/cli.mjs cover <裏> <表> --back-url "…" --front-url "…" --out <フレーム化ディレクトリ>/00-cover.png（同じ --resolution）。フレーム化された画像ではなく、ソースのスクリーンショットを渡します。表示する価値のある画像が1枚だけの場合、またはユーザーが見出しを欲している場合？ headline を使用します（--help 参照）。
4. 確認と報告
node <このスキル>/scripts/verify-frames.mjs <入力> <フレーム化ディレクトリ> --resolution <プリセット>を実行し、すべての入力に対して、適切なサイズの有効なPNGとカバー画像があることを確認します。外観は判断しません。- 各出力PNG（とカバー画像）を確認します。空白または部分的に読み込まれたスクリーンショット、切り取られたコンテンツ、読めないほど小さいテキスト、間違ったスタイル（ブラウザウィンドウ内の領収書）、間違ったアドレスバーがないか確認します。影響を受けるファイルのみをオプション調整後に再実行し、再確認します。画像を表示できない場合はその旨を伝えます。
- 報告: フレーム化されたフォルダ、失敗または再実行されたファイル、カバー画像のペア、そして2枚が互いにどのように補完し合うかを一文で説明します。