website-visual-inspector

Topics in the source

• Website Visual Inspector
• Setup (once)
• Workflow
• What it detects
• When answering the user
• Common problems

This skill lets the agent see a website the way a person does (through screenshots) and read its background precisely (through computed CSS), then combine the two. 1. Run the inspection Options: --dark (render in dark mode), --no-mobile, --no-download, --wait 3000 (for sites with heavy animation). The URL can also be a local file (./index.html) or a dev server (http://localhost:3000). 2. Look at it — open the screenshots with Read (Read can display images): site-inspect/viewportdesktop.png → first impression / hero section site-inspect/screenshotdesktop.png → the whole page site-inspect/screenshotmobile.png → the mobile version A very tall full-page screenshot can look tiny; crop it first if you need detail: python3 -c "from PIL import Image; im=Image.open('site-inspect/screenshotdesktop.png'); im.crop((0,0,1440,1800)).save('site-inspect/crop1.png')" 3. Read the background data — start with site-inspect/report.md (short). Open backgrounds.json only for details on a specific element. 4. Combine what you see in the screenshots with the CSS data. Example: the hero looks purple-blue → match it to the gradient in the report and give the exact selector and value. | Kind | Source | |---|-

This is an excerpt. Refer to the complete source and its current requirements.