page-inspector

ページインスペクター — 現在のページレイアウトとスタイルをキャプチャ

すべてのブラウザー操作（ナビゲーション、スクリーンショット、ビューポートのエミュレーション、DOM の検査）には Skill("pinchtab") を使用します。必要な内容を説明すれば、あとは pinchtab が処理します。

入力

生の引数：$ARGUMENTS

引数から次の値を推測します。

• TARGET_URL：検査する URL
• OUT_DIR：出力ディレクトリ。指定がない場合は ./page-inspector-output

実行

1. 移動して認証する

• TARGET_URL に移動し、インタラクティブスナップショットを取得してページが読み込まれたことを確認します。
• ページで認証が必要な場合：
  1. システムプロンプトを確認して、認証情報の場所に関する指示がないか調べます。
  2. 環境変数を確認します。env | grep -iE 'USER|PASS|LOGIN|AUTH|TOKEN|CRED|SECRET|API_KEY' | sed 's/=.*/=***/' を実行し、利用可能な認証情報の環境変数を一覧表示します（出力では値をマスクします）。
  3. 認証情報が見つかった場合は、ログインフォームに入力して送信し、スナップショットを再取得します。
  4. 認証情報が見つからない場合は、AskUserQuestion ツールを使って認証情報の場所を尋ねます（自律モードでは省略します）。認証情報を取得できない場合は、スキル全体をスキップし、次のように記録します。「スキップ — ページで認証が必要ですが、認証情報が見つかりませんでした。」

2. デスクトップのスクリーンショットをキャプチャ

• スクリーンショットを撮影し、OUT_DIR/screenshots/desktop.png に保存します。
• ファイルを書き込む前に mkdir -p OUT_DIR/screenshots を実行します。

3. 主なビューポートのスクリーンショットをキャプチャ

幅ごとに（1440px、1024px、768px、375px）、次の操作を行います。

• ビューポートの幅を対象の幅に変更します。
• スクリーンショットを撮影し、OUT_DIR/screenshots/{width}px.png に保存します。

4. レイアウト構造を検査

次の情報を抽出する JavaScript を評価します。

• 主なレイアウトコンテナーと CSS の display／position プロパティ
• 主要なレイアウト要素の Flex／Grid の設定
• 固定位置またはスティッキー位置の要素
• ページ全体の構造（ヘッダー、ナビゲーション、メインコンテンツ、サイドバー、フッター）

5. 計算済みスタイルを検査

主要な UI 要素について、次の情報を取得する JavaScript を評価します。

• フォントファミリー、サイズ、ウェイト、行の高さ
• 色（テキスト、背景、境界線）
• 余白（マージン、パディング）
• ボックスサイズと寸法

6. 出力を書き込む

次の内容で OUT_DIR/mugshot.md を作成します。

# Page Inspector Report: {url}

## Screenshots
- Desktop (current): `screenshots/desktop.png`
- 1440px: `screenshots/1440px.png`
- 1024px: `screenshots/1024px.png`
- 768px: `screenshots/768px.png`
- 375px: `screenshots/375px.png`

## Page Structure
{DOM structure overview — key containers and their roles}

## Layout Properties
{CSS display, grid/flex configs, positioning for key elements}

## Typography & Colors
{Font stacks, sizes, color palette observed}

## Spacing & Dimensions
{Key measurements observed}

## Notes
{Any observations relevant to upcoming changes}