Full Page Screenshot
Capture full-length page images over Chrome DevTools Protocol for portfolios, case studies, and audit evidence without extra dependencies.
Overview
full-page-screenshot is an agent skill most often used in Build (also Launch, Grow) that captures entire web pages via Chrome DevTools Protocol for docs and visual evidence.
Install
npx skills add https://github.com/nexu-io/open-design --skill full-page-screenshotWhat is this skill?
- Full-page web capture via Chrome DevTools Protocol with zero additional dependencies
- Trigger phrases: full page screenshot, long screenshot, devtools screenshot, web capture
- Aimed at portfolios, case studies, and audit reports where viewport-only shots truncate content
- Upstream bundle from LewisLiu007/full-page-screenshot for install into agent skills directory
- Open Design image-mode catalogue entry for planning-time discovery
- Zero-dependency CDP capture per skill description
Adoption & trust: 801 installs on skills.sh; 61.4k GitHub stars; 0/1 security scanners passed (skills.sh audits).
What problem does it solve?
You need a single tall image of a live page for a case study or audit but only get above-the-fold browser shots.
Who is it for?
Solo builders documenting shipped UI, preparing visual proof for clients, or archiving pages before redesigns.
Skip if: Headless CI visual regression suites that need pixel diff baselines across hundreds of URLs without local Chrome.
When should I use this skill?
User asks for full page screenshot, long screenshot, devtools screenshot, or web capture.
What do I get? / Deliverables
You obtain a full-page screenshot file suitable for portfolios, case studies, or audit appendices with a CDP-driven workflow.
- Full-page screenshot image file
- Capture suitable for portfolio or audit embedding
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Build/docs is the primary shelf because the skill’s stated outputs feed documentation artifacts—case studies, audit reports, and showcase pages—not distribution automation itself. Docs subphase matches long-form captures meant to embed in READMEs, pitch decks, and quality write-ups rather than live perf tuning.
Where it fits
Archive the full pricing and FAQ page into one image for a ship log README.
Produce hero-length captures for a Product Hunt gallery or social thread.
Refresh before-and-after visuals in a customer case study post.
How it compares
CDP long-capture skill—not a hosted screenshot API SaaS or a design mockup generator.
Common Questions / FAQ
Who is full-page-screenshot for?
Indie developers and agents capturing entire live pages for documentation, portfolios, and audit reports.
When should I use full-page-screenshot?
In Build docs when embedding ship evidence; in Launch distribution when prepping showcase visuals; in Grow content when refreshing case-study imagery.
Is full-page-screenshot safe to install?
It drives local Chrome via DevTools; review the Security Audits panel on this Prism page and only capture URLs you trust.
SKILL.md
READMESKILL.md - Full Page Screenshot
# full-page-screenshot > Curated from @LewisLiu007. ## What it does Capture full-page screenshots of web pages via Chrome DevTools Protocol with zero dependencies. Useful for portfolios, case studies, and audit reports. ## Source - Upstream: https://github.com/LewisLiu007/full-page-screenshot - Category: `screenshots` ## How to use This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory: ```bash # Inspect the upstream README for exact paths open https://github.com/LewisLiu007/full-page-screenshot ``` Then ask the agent to invoke this skill by name (`full-page-screenshot`) or with one of the trigger phrases listed in this skill's frontmatter.