capture-screens

Solid

Automatically navigates a web app using Playwright MCP and captures context-aware named screenshots at each product feature state. Names each file semantically based on context (e.g., checkout-payment-form-filled.png). Outputs a manifest.json mapping filenames to descriptions and a summary report. Use when documenting product features, generating demo screenshots, building user guides, or creating visual test assets for any web application. Composable primitive — other skills (user-guide, demo-docs) consume its manifest.json output.

Data & Documents 4 stars 0 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 83/100

Stars 20%
23
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

## Preferences _On startup, use Read to load `~/.claude/skills/capture-screens/preferences.md`. If missing, use defaults below._ Defaults: - `url`: `http://localhost:3000` - `output`: `screenshots` - `viewport`: `1440x900` - `highlight`: true - `highlight-color`: `#FF4B4B` - `wait-ms`: `800` ## Context _On startup, use Bash to detect the current working directory. Use this for default output path resolution._ ## Command routing Check `$ARGUMENTS`: - `help` → show help, stop - `config` → run config flow, stop - `reset` → delete preferences file, confirm, stop - anything else → run the skill ## Help ``` capture-screens — Automated contextual screenshot capture via Playwright Usage: /capture-screens [context] Interactive — prompts for missing inputs /capture-screens [context] --url <url> App URL to capture /capture-screens [context] --features <f1,f2,...> Comma-separated routes or feature names /capture-screens [context] --output <dir> Output directory (default: screenshots/) /capture-screens [context] --no-highlight Skip CSS highlight injection /capture-screens [context] --viewport <WxH> Viewport size (default: 1440x900) /capture-screens [context] --auth <instructions> How to authenticate, e.g. "login as admin@example.com / pass123" /capture-screens [context] --inject-js <file> Path to a JS file to evaluate before capturing (e.g. to seed state) /capture-screens config ...

Details

Author
mostafa-drz
Repository
mostafa-drz/claude-skills
Created
7 months ago
Last Updated
yesterday
Language
HTML
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category