gh-marcioaltoe-claude-craftkit-plugins-ui-tests/commands/take-screenshot.md

description

description
Take screenshots of web pages

--url --viewports

Take Screenshots

Capture screenshots of web pages across different viewports. Screenshots are saved to .web-tests/screenshots/ in your working directory.

Works from any directory - Saves screenshots to your working directory's .web-tests/screenshots/ folder.

How It Works

When you run /screenshot, Claude will:

1. Auto-detect dev server (or use provided URL)
2. Create screenshot script in .web-tests/scripts/
3. Capture screenshots across specified viewports
4. Save to .web-tests/screenshots/ with timestamps
5. Report file locations

Usage

# Screenshot current dev server
/screenshot

# Screenshot specific URL
/screenshot --url http://localhost:3001

# Screenshot across all viewports
/screenshot --viewports all

# Screenshot specific viewports
/screenshot --viewports desktop,mobile

# Screenshot external site
/screenshot --url https://example.com --viewports desktop

Viewport Options

• all - Desktop (1920x1080), Tablet (768x1024), Mobile (375x667)
• desktop - 1920x1080
• tablet - 768x1024
• mobile - 375x667
• custom - Claude will ask for dimensions

What Claude Will Do

1. Auto-detect dev server (if no URL provided)
2. Create screenshot script in .web-tests/scripts/screenshot-{timestamp}.js
3. Execute script with: CWD=$(pwd) cd <skill-dir> && node run.js .web-tests/scripts/screenshot-*.js
4. Take screenshots across specified viewports
5. Report file locations

Output Structure

your-repo/
└── .web-tests/
    ├── scripts/
    │   └── screenshot-2025-10-23.js
    └── screenshots/
        ├── desktop-2025-10-23T12-30-45.png
        ├── tablet-2025-10-23T12-30-48.png
        └── mobile-2025-10-23T12-30-51.png

Screenshot Options

Claude can configure:

• Full page - Captures entire scrollable page (default: true)
• Specific element - Screenshot just one element
• Visible viewport - Only visible portion
• Wait for load - Waits for page to fully load

Examples

# Quick screenshot of current dev server
/screenshot

# Screenshot homepage across all devices
/screenshot --url http://localhost:3001 --viewports all

# Mobile-only screenshot
/screenshot --viewports mobile

# Screenshot specific page
/screenshot --url http://localhost:3001/dashboard --viewports desktop

Tips

• Screenshots include full page by default (scrolls entire page)
• Timestamps in filenames prevent overwriting
• Saved in working directory - easy to commit or share
• Browser visible - see what's being captured

See Also

• /test - Run automated tests
• /check - Check for broken links or issues