Full Page Screenshot

Problem Solved

Web screenshots often fail in predictable ways: full-page captures are clipped, lazy-loaded images never appear, and fixed or sticky UI elements land in the wrong places. Mobile layouts, internal scroll containers, and authenticated pages make it harder to produce a complete, reproducible image for docs, reports, or archives. This skill turns a URL into a more complete visual snapshot.

How It Works and Limits

The skill uses scripts/screenshot.js with Playwright and Chromium to support fullpage, viewport, and element modes. It auto-detects device context, switches to iPhone emulation when width=device-width or a narrow body width is detected, and handles internal scroll containers by scrolling, expanding height, and triggering lazy-loaded content. By default, position: fixed and position: sticky elements are hidden to avoid misplaced nav bars, floating buttons, or cookie banners in long captures.

Key capabilities:
- Full-page capture: scrolls page or container, waits for lazy content, and preserves full height
- Element capture: targets a specific DOM node via CSS selector
- Device simulation: desktop, iPhone, iPad, or auto-detected mobile layout
- Rendering controls: PNG/JPEG output, viewport size, wait time, dark mode, cookies, headers, and Basic Auth
- Linux font handling: detects missing CJK fonts and, when permitted, installs and verifies them automatically

Limitations: the skill depends on a working browser runtime. Complex SPAs may need longer wait times. Pages requiring login, cookies, custom headers, or Basic Auth must receive the appropriate parameters. On permission-restricted Linux systems, missing CJK fonts can still cause Chinese text to render as boxes.