# Screenshot

> Capture website screenshots — full page, viewport, or element Use when this capability is needed.

- Skill: `tomevault-io/screenshot-5` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/screenshot-5`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/screenshot-5/raw
- Safety review: pending (external: skill-scanner WARNING, skillspector CAUTION)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/screenshot-5

---

# Screenshot

Capture screenshots of websites using various methods.

## Setup

**API keys** (for Option 1; store in vault, never use `export`):
- apiflash: `vault_save apiflash_key "your_key"`
- screenshotapi: `vault_save screenshotapi_key "your_key"`
- urlbox: `vault_save urlbox_key "your_key"`
- Keys auto-inject as uppercase env vars.

**Playwright** (Option 3 — recommended, no API key):
- **macOS**: `brew install node` then `npx playwright install`
- **Ubuntu**: `sudo apt install nodejs npm` then `npx playwright install`

**wkhtmltoimage** (Option 4): `sudo apt install wkhtmltopdf`
**CutyCapt** (Option 5): `sudo apt install cutycapt`

## Option 1: Screenshot API Services

```bash
# apiflash.com (free tier) — key from vault
curl -s "https://api.apiflash.com/v1/urltoimage?url=https://example.com&access_key=$APIFLASH_KEY&full_page=true" -o screenshot.png

# screenshotapi.net
curl -s "https://api.screenshotapi.net/screenshot?token=$SCREENSHOTAPI_KEY&url=https://example.com&full=true" -o screenshot.png

# urlbox.io
curl -s "https://api.urlbox.io/v1/$URLBOX_KEY/png?url=example.com" -o screenshot.png
```

## Option 2: Puppeteer (Node.js)

```javascript
// screenshot.js
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Set viewport size
  await page.setViewport({ width: 1920, height: 1080 });

  await page.goto('https://example.com', { waitUntil: 'networkidle2' });

  // Full page screenshot
  await page.screenshot({ path: 'full.png', fullPage: true });

  // Viewport screenshot
  await page.screenshot({ path: 'viewport.png' });

  // Element screenshot
  const element = await page.$('.content');
  await element.screenshot({ path: 'element.png' });

  await browser.close();
})();
```

```bash
npm install puppeteer
node screenshot.js
```

## Option 3: Playwright

```bash
# One-liner
npx playwright screenshot https://example.com screenshot.png

# Full page
npx playwright screenshot --full-page https://example.com full.png

# Mobile viewport
npx playwright screenshot --viewport-size=375,667 https://example.com mobile.png

# Wait for selector
npx playwright screenshot --wait-for-selector=.content https://example.com loaded.png
```

## Option 4: wkhtmltoimage

```bash
# Install
sudo apt install wkhtmltopdf

# Basic screenshot
wkhtmltoimage https://example.com screenshot.png

# With quality options
wkhtmltoimage --quality 80 --width 1920 https://example.com screenshot.png
```

## Option 5: Cutycapt

```bash
# Install
sudo apt install cutycapt

# Capture
cutycapt --url=https://example.com --out=screenshot.png

# With dimensions
cutycapt --url=https://example.com --out=screenshot.png --min-width=1920 --min-height=1080
```

## Python Options

```python
# selenium_scraper.py
from selenium import webdriver
from selenium.webdriver.chrome.options import Options

options = Options()
options.add_argument('--headless')
options.add_argument('--window-size=1920,1080')

driver = webdriver.Chrome(options=options)
driver.get('https://example.com')
driver.save_screenshot('screenshot.png')
driver.quit()
```

## Advanced Options

```javascript
// With Playwright - advanced
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage({
    viewport: { width: 1920, height: 1080 },
    deviceScaleFactor: 2 // Retina
  });

  // Authenticate
  await page.setExtraHTTPHeaders({
    'Authorization': 'Bearer token'
  });

  // Set cookies
  await page.context().addCookies([{
    name: 'session', value: 'xyz', domain: 'example.com'
  }]);

  await page.goto('https://example.com');
  await page.screenshot({ path: 'auth.png', fullPage: true });

  await browser.close();
})();
```

## Tips

- Use `fullPage: true` for complete page capture
- Set appropriate viewport size before capture
- Wait for `networkidle` for dynamic content
- Use `deviceScaleFactor: 2` for high-DPI screenshots
- Handle authentication with cookies or headers

## Triggers

screenshot, capture website, website screenshot, web capture,
full page screenshot, take screenshot

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/jholhewres) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->