page-inspector

Connects to a running Chrome browser session via Chrome DevTools MCP, navigates to the target page, and captures a comprehensive snapshot of the current layout, styles, and structure. This output serves as a baseline reference for implementation.

For the main content area and key UI elements, capture:

Chrome DevTools MCP を使用して、ライブ Web ページから現在のページ レイアウト、スタイル、構造をキャプチャします。変更を加える前に既存の UI を理解する必要がある場合に使用します。スクリーンショット、DOM 構造、計算されたスタイル、レイアウト プロパティをキャプチャします。フロントエンドまたは UI に影響する変更の実装前のベースラインとして役立ちます。 ソース: delexw/claude-code-misc。

ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/delexw/claude-code-misc --skill page-inspector インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります