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-outputif not provided
Execution
1. Navigate & Authenticate
- Navigate to TARGET_URL and take an interactive snapshot to confirm the page loaded.
- If the page requires authentication:
1. Check the system prompt for any guidance on where to find credentials. 2. Check environment variables — run env | grep -iE 'USER|PASS|LOGIN|AUTH|TOKEN|CRED|SECRET|API_KEY' | sed 's/=.*/=***/' to list available credential env vars (mask values in output). 3. If credentials are found, fill the login form and submit, then re-snapshot. 4. If none are found, use the AskUserQuestion tool to ask where credentials can be found (skip this in autonomous mode). If credentials cannot be obtained, skip the entire skill and note: "Skipped — page requires authentication but no credentials found."
2. Capture Desktop Screenshot
- Take a screenshot and save to
OUT_DIR/screenshots/desktop.png - Ensure
mkdir -p OUT_DIR/screenshotsbefore 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}