AgentScreenshots for Frontend Developers

Frontend developers already know that rendered UI is the source of truth.

AgentScreenshots is for the moments when a coding agent changes the UI and needs to check the actual pixels before it hands work back. It captures pages reachable from the command environment and saves PNG or JPEG files at the path you choose.

It is not trying to replace your test suite, browser devtools, Storybook, design system, or review process. It gives agents a small, repeatable visual check inside the development loop.

Where it fits

Workflow	Fit
Local route review	Capture localhost after a component or route edit.
Responsive checks	Run the same capture at desktop, tablet, and mobile widths.
Component-level review	Use selector capture for a card, form, nav, modal, section, or table.
Review artifacts	Save screenshots in .agents/screenshots/ so the user can inspect them.
State checks	Use click, hover, wait, and scroll flags to reach the relevant UI state.
Preview QA	Capture preview, staging, or production URLs reachable from the command environment.

The goal is to make visual review cheap enough that agents actually do it.

Common commands

Capture a full local page:

agentshot "http://localhost:5173" 
  ".agents/screenshots/home-full.png" 
  --scroll 
  --wait 1000 
  --wait-until load

Capture a changed component:

agentshot "http://localhost:5173/dashboard" 
  ".agents/screenshots/dashboard-table.png" 
  --selector "[data-testid='activity-table']" 
  --padding 20 
  --wait-for "[data-ready='true']"

Capture mobile:

agentshot "http://localhost:5173/pricing" 
  ".agents/screenshots/pricing-mobile.png" 
  --viewport 390x844 
  --scroll 
  --wait 1000

Capture a hover state:

agentshot "http://localhost:5173" 
  ".agents/screenshots/nav-hover.png" 
  --hover ".nav-item" 
  --selector "header" 
  --padding 16 
  --wait 300

Dismiss an optional overlay before capture:

agentshot "http://localhost:5173" 
  ".agents/screenshots/home-without-cookie-banner.png" 
  --click-if-present "button:has-text('Reject all')" 
  --scroll 
  --wait 500

Responsive and layout review

AgentScreenshots is most useful when the capture matrix is explicit and small.

For example, after changing a pricing section:

agentshot "http://localhost:5173/pricing" 
  ".agents/screenshots/pricing-desktop.png" 
  --selector "section:has-text('Pricing')" 
  --padding 24 
  --viewport 1440x1000

agentshot "http://localhost:5173/pricing" 
  ".agents/screenshots/pricing-mobile.png" 
  --selector "section:has-text('Pricing')" 
  --padding 24 
  --viewport 390x844

That catches the ordinary frontend failures:

• headings that wrap badly
• cards that overflow or collapse unevenly
• buttons that resize between states
• sticky elements that cover content
• late-loading images that change layout
• component density that works on desktop and fails on mobile

The agent can then patch CSS, recapture, and report the exact files it inspected.

What it is not

AgentScreenshots is not a visual regression suite. It does not manage baselines, diffs, thresholds, or CI policy.

It is not a browser cloud or screenshot API. Rendering happens locally. Screenshots are saved locally in the MVP.

It is not a general browser automation layer. If you need console logs, network inspection, authentication choreography, multi-page journey testing, or arbitrary browser control, use the right browser tooling for that job.

The narrower job is still valuable: after an agent changes frontend code, make it look.

A good agent instruction

For frontend tasks, the instruction can be simple:

After meaningful UI changes, run agentshot against the changed route.
Use selector capture when the change is scoped.
Capture mobile when layout could be affected.
Inspect the PNG before saying the work is done.
Report the screenshot path and any visible issues you fixed.

That turns visual review from an optional manual step into a normal part of agent-assisted frontend development.