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

{DOM structure overview — key containers and their roles}

Layout Properties

{CSS display, grid/flex configs, positioning for key elements}

Typography & Colors

{Font stacks, sizes, color palette observed}

Spacing & Dimensions

{Key measurements observed}

Notes

{Any observations relevant to upcoming changes}