Screenshot Skill

Take screenshots of web pages for use in blog posts, documentation, and marketing content.

Quick Usage

bun .claude/skills/screenshot/scripts/screenshot.ts <url> <output-filename>

Examples

# Screenshot a web page
bun .claude/skills/screenshot/scripts/screenshot.ts https://example.com page-screenshot.webp

# Screenshot with custom dimensions
bun .claude/skills/screenshot/scripts/screenshot.ts https://example.com wide-shot.webp --width=1400 --height=900

# Screenshot in dark mode
bun .claude/skills/screenshot/scripts/screenshot.ts https://example.com dark-mode.webp --dark

# Full page screenshot
bun .claude/skills/screenshot/scripts/screenshot.ts https://example.com full-page.webp --full

# Screenshot a specific element
bun .claude/skills/screenshot/scripts/screenshot.ts https://example.com header.webp --selector="header"

Options

Option	Default	Description
--width	1200	Viewport width in pixels
--height	800	Viewport height in pixels
--dark	false	Enable dark mode
--wait	2000	Wait time in ms after page load
--full	false	Capture full page (scrollable)
--selector	null	Screenshot specific element only

Dependencies

Install required packages before using:

bun add playwright sharp
npx playwright install chromium

First-Time Setup

If playwright browsers aren't installed, run:

npx playwright install chromium

Use Cases

1. Feature Screenshots - Show new UI features in blog posts
2. Before/After - Document improvements with visual comparisons
3. Tutorial Steps - Capture each step of a process
4. Product Demos - Showcase actual product in articles
5. Social Cards - Generate images for social media sharing

Tips

• Use --wait=3000 for pages with animations
• Use --dark to match dark mode screenshots
• Use --selector to focus on specific UI elements
• WebP format provides best quality/size ratio