Page Inspector — Capture Current Page Layout & Styles Uses Skill("pinchtab") for all browser interaction — navigation, screenshots, viewport emulation, and DOM inspection. Describe what you need and let pinchtab handle the details. Inputs Raw arguments: $ARGUMENTS Infer from the arguments: TARGET_URL: the URL to inspect OUT_DIR: output directory, or ./page-inspector-output if not provided Prerequisites If the page requires authentication, attempt to find credentials from environment variables. If none are found or authentication fails, skip the inspection. Execution 1. Navigate & Snapshot Navigate to TARGET_URL Take an interactive snapshot to confirm the page loaded If auth is needed, fill login form fields and submit, then re-snapshot 2. Capture Desktop Screenshot Take a screenshot and save to OUT_DIR/screenshots/desktop.png Ensure mkdir -p OUT_DIR/screenshots before writing files 3. Capture Key Viewport Screenshots For each width (1440px, 1024px, 768px, 375px): Resize viewport to the target width Take a screenshot and save to OUT_DIR/screenshots/{width}px.png 4. Inspect Layout Structure Evaluate JavaScript that extracts: Key layout containers and their CSS display/position properties Flex/grid configurations on major layout elements Any fixed/sticky positioned elements Overall page structure (header, nav, main content, sidebar, footer) 5. Inspect Computed Styles Evaluate JavaScript that captures for key UI elements: Font families, sizes, weights, line heights Colors (text, background, borders) Spacing (margins, paddings) Box sizing and dimensions 6. Write Output Create OUT_DIR/mugshot.md with:

Page Inspector Report: {url}

Screenshots

Desktop (current): screenshots/desktop.png - 1440px: screenshots/1440px.png - 1024px: screenshots/1024px.png - 768px: screenshots/768px.png - 375px: screenshots/375px.png

Page Structure

Layout Properties

Typography & Colors

Spacing & Dimensions

Notes