Screenshot Capture Skill

Description

This skill provides programmatic screenshot capture on macOS using the screencapture CLI. Supports full screen, specific windows, screen regions, and timed captures. Useful for automated documentation, visual regression testing, and UI verification.

Instructions

When the user asks you to take screenshots or capture the screen, use these patterns:

Basic Captures

Copy
# Full screen capture
screencapture screenshot.png

# Capture without window shadow
screencapture -o screenshot.png

# Capture with 3-second delay
screencapture -T 3 screenshot.png

# Capture specific screen region (interactive)
screencapture -i screenshot.png

# Capture to clipboard instead of file
screencapture -c

Specific Window Capture

Copy
# Capture a specific window by clicking (interactive)
screencapture -w screenshot.png

# Capture window without shadow
screencapture -o -w screenshot.png

Format Options

Copy
# Save as JPEG (smaller file size)
screencapture -t jpg screenshot.jpg

# Save as TIFF (lossless)
screencapture -t tiff screenshot.tiff

# Save as PDF
screencapture -t pdf screenshot.pdf

Automated Capture Workflow

For documentation workflows, capture multiple screens with naming:

Copy
#!/bin/bash
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
OUTDIR="./screenshots/$TIMESTAMP"
mkdir -p "$OUTDIR"

# Capture with descriptive names
screencapture -o "$OUTDIR/01-home-screen.png"
sleep 2
screencapture -o "$OUTDIR/02-settings-panel.png"
sleep 2
screencapture -o "$OUTDIR/03-final-result.png"

echo "Screenshots saved to $OUTDIR"
ls -la "$OUTDIR"

Using with Playwright (Web App Screenshots)

For web application screenshots, combine with Playwright:

Copy
const { chromium } = require('playwright');

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });

await page.goto('http://localhost:3000');
await page.screenshot({ path: 'screenshots/home.png', fullPage: true });

await page.click('[data-testid="settings"]');
await page.screenshot({ path: 'screenshots/settings.png' });

await browser.close();

Rules

• screencapture is macOS only — for Linux use import (ImageMagick) or scrot
• Default format is PNG — use JPG for smaller file sizes in documentation
• Always use -o flag to remove window shadows (cleaner for docs)
• Create output directories before capturing: mkdir -p screenshots/
• For timed captures, inform the user about the delay
• For batch captures, use descriptive filenames with numerical prefixes for ordering
• Never capture sensitive information (passwords, API keys visible on screen)
• For web app screenshots, prefer Playwright over system screenshots (more reliable)

Examples

User: Take a screenshot of my current screen Action: screencapture -o screenshot.png, then read and display it

User: Capture 5 screenshots for documentation Action: Create timestamped directory, capture series with descriptive names

User: Take a screenshot of my web app at localhost:3000 Action: Use Playwright to navigate and capture specific pages/states