---

name: site-checker description: "ブラウザ（clawd profile）でサイトを直接確認する。スクリーンショット撮影、スナップショット取得、UI要素の検証に使う。「サイト確認」「ページチェック」「表示確認」「スクリーンショット」「見た目の確認」「ホーム画面確認」などの作業に使う。"

Site Checker — ブラウザ直接確認スキル

agent-browser（clawd profile）を使って、サイトの表示状態を直接確認する。 web_fetchでは取得できないビジュアル要素（レイアウト、画像表示、CSS、レスポンシブ）を検証できる。

最重要ルール（2026-02-03 けいた様指示・確定）

サイトに変更を加えたら、必ずこのスキルを使ってブラウザで巡回確認する。

• web_fetch のテキスト確認だけでは不十分
• エンドユーザーの気持ちになって同じ行動をする
• 確認観点: 表示崩れ、リンク切れ、導線の自然さ、情報の見やすさ、改善ポイント
• これは「やったほうがいい」ではなく**「必ずやる」ルール**

基本フロー

1. ページを開く

agent-browser open "https://example.com"

必要に応じて --auto-connect で既存 Chrome に接続する。

2. スクリーンショット撮影

agent-browser screenshot

• フルページ: agent-browser screenshot --full
• 通常は viewport のみで十分

3. スナップショット（DOM構造確認）

agent-browser snapshot

• インタラクティブ要素のみ: agent-browser snapshot -i -c
• 要素参照は @e1 のような ref で得られる

4. 特定要素の確認

agent-browser highlight @e12
agent-browser get text @e12
agent-browser screenshot

• @e12 はスナップショットで取得した ref に置き換える

5. ページ内操作

agent-browser click @e12
agent-browser type @e13 "hello"

よくある確認パターン

ホーム画面全体確認

1. open
2. screenshot → ファーストビュー確認
3. screenshot --full → 全体確認

特定記事の表示確認

1. open "https://site.com/article-slug/"
2. screenshot → ファーストビュー
3. snapshot → 構造確認（見出し、リンク、画像）
4. screenshot --full → 全ページ

モバイル表示確認

1. open
2. set viewport 375 812
3. screenshot --full
4. eval "document.documentElement.scrollWidth" で横はみ出し確認

画像・アイキャッチ確認

1. open → ホームページ
2. screenshot → サムネイル一覧の表示状態を目視確認
3. snapshot → img要素のsrc/alt属性を構造的に確認

⚠️ よくある落とし穴

• web_fetch だけで確認を済ませる: テキストベースの web_fetch ではレイアウト崩れ、画像の表示状態、CSS の適用状況を確認できない。サイト変更後は必ずブラウザで目視確認する（これは「必ずやる」ルール）
• ref がスナップショット間で変わることを忘れる: @e12 等の ref はスナップショット取得ごとに変わる可能性がある。操作前にスナップショットを再取得して最新の ref を使うこと
• 初回セットアップが未完了: agent-browser が動かない場合は agent-browser install でセットアップする
• タブが蓄積してリソースを圧迫する: 確認後にタブを閉じ忘れると蓄積する。agent-browser tab list で確認し、不要なタブは agent-browser tab close で閉じる
• モバイル表示の横はみ出しを見逃す: set viewport 375 812 後にスクリーンショットだけでなく、eval "document.documentElement.scrollWidth" で横スクロールの有無を確認する