Project Capture - Webプロジェクトの画面キャプチャを自動化するAIエージェント向けスキル

Webプロジェクトの画面キャプチャを何度も行っているうちに、ルート確認、ログイン処理、キャプチャ範囲の選択、結果整理を毎回手動で行うのが煩雑だったため作りました。

project-capture は、AIコーディングエージェントがまずプロジェクトを分析したあと、どの画面をキャプチャするかをユーザーに確認し、Playwrightでスクリーンショットとレポートを生成するツールです。

Codexスキルとして作成しましたが、npmパッケージとしても配布しているため、Claude Code、Gemini CLI のような他のAIツールや一般的なターミナルでも使えるようにしました。

完全自動のクローラーというよりは、「プロジェクト分析 → キャプチャ範囲の確認 → ログイン処理 → 画面キャプチャ → レポート生成」という流れを安定して進められるよう支援するツールに近いです。

主な機能は次のとおりです。

• プロジェクト構造を分析してルート候補を探索
• Next.js、Remix、React Router、一般的なSPAルートパターンをサポート
• キャプチャ範囲の選択: 全体 / 主要ドメイン / 特定ドメイン / 手動指定
• ログイン要否の検知および手動ログイン / 環境変数ログインに対応
• 動的ルートはサンプルURLベースで処理
• Playwrightで画面キャプチャ
• 全体スクロールキャプチャまたは特定viewportキャプチャを選択可能
• capture-report.md、capture-results.json を生成