Easy Screenshot Executor

Capture screenshots of web pages, UI components, or terminal output for documentation, visual testing, or sharing with stakeholders.

When to Use This Command

Run this command when...

• You need screenshots of your web application at specific URLs for documentation or demos
• You want to capture the current terminal output as an image for a bug report
• You are building visual documentation and need consistent, automated screenshot capture

Avoid this command when...

• You need interactive browser testing or user-flow recording rather than static screenshots
• You want video recordings of multi-step user interactions

Quick Start

Copy
# .claude/commands/easy-screenshot-executor.md
---
allowed-tools: ["Bash"]
---
Capture a screenshot of the specified URL or terminal output.
Save to the designated output directory with metadata.

Example usage:

/easy-screenshot-executor http://localhost:3000/dashboard
/easy-screenshot-executor --terminal

Example output:

Capturing: http://localhost:3000/dashboard
Viewport: 1280x720
Wait: networkidle

Screenshot saved: ./screenshots/dashboard-2026-03-15.png
Size: 245 KB
Dimensions: 1280x720

Core Concepts

Concept	Description
Page capture	Uses a headless browser to render and screenshot web pages
Viewport control	Sets exact width and height for consistent, reproducible output
Wait strategy	Waits for network idle or a specific DOM selector before capture
Terminal capture	Captures the current terminal buffer as an image file

URL/Terminal --> Launch Headless Browser
                       |
                Set Viewport Size
                       |
                Wait for Ready State
                       |
                Capture Screenshot
                       |
                Save to Disk

Configuration

Option	Default	Description
viewport	1280x720	Screenshot dimensions in WxH pixels
wait	networkidle	Wait strategy (networkidle, domcontentloaded, selector)
format	png	Image format (png, jpeg, webp)
output	./screenshots/	Output directory for saved screenshots
fullpage	false	Capture the full scrollable page, not just the viewport

Best Practices

1. Use consistent viewports -- standardize on a viewport size across all documentation screenshots.
2. Wait for networkidle -- ensures all images, fonts, and API data have loaded before capture.
3. Name files descriptively -- include the page name and date for easy identification later.
4. Use full-page for long content -- single-viewport captures miss content below the fold.
5. Automate for documentation -- script screenshot capture in CI to keep visual documentation up to date.

Common Issues

1. Blank screenshot -- the page may not have fully loaded. Increase wait time or wait for a specific DOM selector.
2. Missing fonts or icons -- headless browsers may lack system fonts. Use web fonts or install the required font packages.
3. Authentication required -- for authenticated pages, provide session cookies or add a login step before capturing.