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를 사용하여 라이브 웹페이지에서 현재 페이지 레이아웃, 스타일 및 구조를 캡처하세요. 변경하기 전에 기존 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에서 사용할 수 있습니다