screenshot

Capture full-page or element-specific web page screenshots with Playwright and sharp.

2|1|Updated Jul 19, 2024

Search Tags:#automation #playwright #webpage #screenshot #dark-mode #output-format #image-output

Ready to run

npx skills add https://github.com/TeamDay-AI/agents --skill screenshot-teamday-ai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: screenshot
Source: https://github.com/TeamDay-AI/agents/tree/main/skills/teamday/screenshot
Command: npx skills add https://github.com/TeamDay-AI/agents --skill screenshot-teamday-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, sharp, and includes scripts (resource) components.

What problem does it solve?

Automates the manual task of capturing visual representations of web pages for content, documentation, and marketing.

Core Features & Use Cases

Full-page and viewport-specific screenshots for blogs, docs, and demos.
Dark-mode and custom dimension support for consistent visuals across platforms.
Element-specific captures via selectors to highlight precise UI components.

Quick Start

Run the screenshot tool with a URL and an output filename to generate an image.

Frequently Asked Questions about screenshot

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I capture a full-page webpage screenshot automatically?▼

You can capture a full-page webpage screenshot automatically by passing a URL and output filename, enabling the full-page flag to render the entire scrollable area into one image.

Can I take a screenshot of a specific UI element using a selector?▼

Yes, you can capture a specific UI element by passing a CSS selector flag, which isolates and renders only that targeted webpage component into an image output.

Does the screenshot tool support dark mode and custom dimensions?▼

Yes, the screenshot tool supports dark mode and custom dimensions via optional flags, allowing you to render webpages with specific viewport widths, heights, and dark theme preferences.

Do I need Playwright and sharp installed to capture webpage screenshots?▼

Yes, you need Playwright and sharp installed as dependencies, because the tool relies on Playwright for headless browser automation and sharp for processing the image output.

What is the best way to automate webpage screenshots for documentation?▼

The best way to automate webpage screenshots for documentation is using a headless browser script that accepts URLs, handles timed waits for dynamic content, and outputs consistent image files.

Why do my dynamic webpage screenshots render blank without a timed wait?▼

Dynamic webpage screenshots render blank without a timed wait because the headless browser captures the page before asynchronous content loads, so you must include a wait parameter to delay capture.