# Screenshot

> >

- **Type:** Skill
- **Install:** `agentstack add skill-sawallesalfo-claude-skills-screenshot`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [sawallesalfo](https://agentstack.voostack.com/s/sawallesalfo)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [sawallesalfo](https://github.com/sawallesalfo)
- **Source:** https://github.com/sawallesalfo/claude-skills/tree/master/plugins/screenshot/skills/screenshot

## Install

```sh
agentstack add skill-sawallesalfo-claude-skills-screenshot
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Screenshot Skill

Capture full-page screenshots of any public URL using Playwright's headless Chromium browser.
Save as PNG and describe the visual content. No API key or external service required.

---

## Prerequisites

- Node.js installed
- Playwright available via `npx playwright`
- Chromium browser downloaded for Playwright

If Playwright browsers are not installed, run:
```bash
npx playwright install chromium
```

---

## Workflow

### Step 1 — Validate inputs

1. Confirm the user has provided a valid URL (must start with `http://` or `https://`).
   If no protocol is given, prepend `https://`.
2. Quick-check that Playwright is available:
   ```bash
   npx playwright --version
   ```
   If this fails, tell the user to install it:
   ```bash
   npm install -g playwright
   npx playwright install chromium
   ```

### Step 2 — Derive the output filename

Strip the URL to create a clean filename:
- Remove `https://` or `http://`
- Remove `www.` prefix if present
- Remove trailing slashes
- Replace all dots, slashes, and special characters with underscores
- Truncate to 60 characters max
- Append `.png`

Examples:
| URL | Filename |
|-----|----------|
| `https://github.com/anthropics/claude-code` | `github_com_anthropics_claude-code.png` |
| `https://hub.docker.com` | `hub_docker_com.png` |
| `https://news.ycombinator.com` | `news_ycombinator_com.png` |
| `https://dev.to` | `dev_to.png` |

### Step 3 — Take the screenshot

Run this command, substituting the URL and derived filename:

```bash
npx playwright screenshot --full-page --wait-for-timeout 3000 "URL" "FILENAME"
```

**Options to use depending on context:**
- `--full-page` — captures the entire scrollable page (always use)
- `--wait-for-timeout 3000` — wait 3 seconds for JS to load (default)
- `--ignore-https-errors` — add if the site has SSL issues
- `--block-service-workers` — add if the page is slow or uses service workers

If the default screenshot fails (e.g., timeout, rendering issues), retry with extended options:
```bash
npx playwright screenshot --full-page --wait-for-timeout 5000 --block-service-workers --ignore-https-errors "URL" "FILENAME"
```

After running, verify the file was created and is non-empty:
```bash
[ -s "FILENAME" ] && echo "Success: $(wc -c < FILENAME) bytes" || echo "Failed"
```

**Common errors:**
| Error | Cause | Fix |
|-------|-------|-----|
| Executable doesn't exist | Chromium not installed | Run `npx playwright install chromium` |
| Timeout | Page takes too long | Increase `--wait-for-timeout` to 10000 |
| Empty file | Page blocked rendering | Try with `--block-service-workers` |
| Navigation error | Invalid URL or DNS failure | Check URL is correct and accessible |

### Step 4 — View and describe the screenshot

After a successful capture:

1. Use the Read tool to open and visually inspect the PNG file.
2. Tell the user the exact file path and file size.
3. Write a single sentence describing what is visible in the screenshot.

---

## Response format

```
Screenshot captured!

Location: /path/to/FILENAME.png
Size: XXX KB

What's in it: [One-sentence visual description]
```

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [sawallesalfo](https://github.com/sawallesalfo)
- **Source:** [sawallesalfo/claude-skills](https://github.com/sawallesalfo/claude-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-sawallesalfo-claude-skills-screenshot
- Seller: https://agentstack.voostack.com/s/sawallesalfo
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.