Capture current page layout, styles, and structure from a live web page using Chrome DevTools MCP. Use when you need to understand the existing UI before making changes — captures screenshots, DOM structure, computed styles, and layout properties. Useful as a pre-implementation baseline for frontend or UI-affecting changes.
Quickly install page-inspector AI skill to your development environment via command line
Source: delexw/claude-code-misc.
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:
Capture current page layout, styles, and structure from a live web page using Chrome DevTools MCP. Use when you need to understand the existing UI before making changes — captures screenshots, DOM structure, computed styles, and layout properties. Useful as a pre-implementation baseline for frontend or UI-affecting changes. Source: delexw/claude-code-misc.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/delexw/claude-code-misc --skill page-inspector Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
Stable fields and commands for AI/search citations.
npx skills add https://github.com/delexw/claude-code-misc --skill page-inspectorCapture current page layout, styles, and structure from a live web page using Chrome DevTools MCP. Use when you need to understand the existing UI before making changes — captures screenshots, DOM structure, computed styles, and layout properties. Useful as a pre-implementation baseline for frontend or UI-affecting changes. Source: delexw/claude-code-misc.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/delexw/claude-code-misc --skill page-inspector Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
https://github.com/delexw/claude-code-misc