| name | app-screenshots |
| description | Screenshot every view/screen of an app for marketing, product sites, and documentation. Use when asked to "screenshot the app", "capture all views", "get marketing screenshots", "screenshot every screen", or "product shots". Works with macOS native apps (screencapture), web apps (Puppeteer/Playwright), and Electron apps.
|
App Screenshots
Systematically capture every view/screen of an application for marketing, product sites, README assets, and documentation.
Workflow
1. Discover all views/screens in the app
2. Build + launch the app (if not already running)
3. Navigate to each view and screenshot it
4. Save named screenshots to output directory
5. Generate a manifest (summary.md)
Step 1: Discover Views
Analyze the project to enumerate all distinct views/screens. Methods by project type:
Swift/SwiftUI macOS apps: Grep for View structs, WindowGroup, Window, Settings, sheets, popovers, menu bar panels. Check for multiple window types, onboarding flows, settings tabs.
Web apps: Check routes (React Router, Next.js pages, Express routes). Each route = one screenshot minimum. Also check for modals, drawers, settings panels.
Electron apps: Check BrowserWindow creation, route handlers, IPC window openers.
Present the discovered view list to the user for confirmation before proceeding:
Found 8 views:
1. Main window (default state)
2. Settings > General
3. Settings > Appearance
4. Settings > Shortcuts
5. Popdown menu
6. Onboarding wizard
7. Empty state
8. Active session state
Proceed? Any views to add/skip?
Step 2: Build + Launch
Build and launch the app if it's not already running. If it is, skip this step.
Step 3: Capture Each View
Navigate to each view and capture it. Sequential only -- one view at a time.
macOS Native Apps (Swift/SwiftUI)
WINDOW_ID=$(osascript -e 'tell application "System Events" to get id of first window of (first process whose name is "AppName")')
screencapture -l $WINDOW_ID -o -x "$OUTPUT_DIR/view-name.png"
For views that require navigation (settings tabs, popovers):
- Use AppleScript or accessibility APIs to click/navigate
- Or instruct the user: "Please open Settings > Appearance, then press Enter"
- Wait, then capture
For menu bar apps:
osascript -e 'tell application "AppName" to activate'
sleep 1
screencapture -l $WINDOW_ID -o -x "$OUTPUT_DIR/popdown.png"
Web Apps
Use Puppeteer or Playwright to navigate each route and screenshot:
for (const route of routes) {
await page.goto(`${baseUrl}${route.path}`, { waitUntil: 'networkidle2' });
await page.screenshot({ path: `${outputDir}/${route.name}.png` });
}
For modals/drawers, click the trigger element first, wait for animation, then capture.
Multiple Viewport Sizes (Optional)
If user wants responsive shots (common for marketing):
viewports:
- { name: "desktop", width: 1920, height: 1080 }
- { name: "laptop", width: 1440, height: 900 }
- { name: "tablet", width: 768, height: 1024 }
- { name: "mobile", width: 375, height: 812 }
Step 4: Output
Default output directory:
{project-dir}/screenshots/{YYYY-MM-DD}/
Override with any user-specified path.
Naming Convention
{output-dir}/
01-main-window.png
02-settings-general.png
03-settings-appearance.png
04-popdown-menu.png
05-onboarding.png
...
summary.md
Number prefix keeps order. Slug from view name.
Step 5: Summary
Generate summary.md:
# {App Name} - Screenshots
**Date**: YYYY-MM-DD
**Build**: {git hash or version}
| # | View | File | Notes |
|---|------|------|-------|
| 1 | Main Window | 01-main-window.png | Default state |
| 2 | Settings - General | 02-settings-general.png | |
| ... | | | |
Rules
- Always confirm the view list with user before starting captures
- Number screenshots for consistent ordering
- Include app version or git hash in summary for traceability
- If a view requires user interaction to reach (e.g., login, specific data state), ask the user to navigate there and confirm
- Use whatever capture method fits the project -- don't force a specific tool
- For dark/light mode apps, offer to capture both variants
- For apps with multiple states (empty, loading, error, populated), capture each distinct state