screenshot
Capture high-fidelity screenshots of any website using Playwright — supports custom viewports, dark/light mode, mobile/tablet/desktop presets, split-screen, element-based capture by CSS selector, and text-based area capture. Integrates with Telegram or any output channel for delivery.
Profile →npx skills add cosmicstack-labs/mercury-agent-skills --skill screenshot --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Capture high-fidelity screenshots of any website using Playwright — the skill covers viewport presets (mobile, tablet, desktop), dark/light mode, full-page captures, custom dimensions, element-level capture by CSS selector, text-based area capture, split-screen viewports, and automatic delivery to the user via Telegram or the active output channel.
How it works
- Wait for the right moment before capturing: ensures content is loaded via network idle or specific selectors.
- Apply viewport presets (mobile, tablet, desktop) or custom dimensions for screenshots.
- Support for dark mode and light mode through browser context color schemes and CSS overrides.
- Capture options include full-page, specific elements by CSS selector, or areas defined by text content.
- Ability to produce multiple images in one run (e.g., dual mode) and deliver via Telegram or the active output channel.
- Includes examples and code snippets demonstrating mobile/tablet/desktop presets, element-based capture, and text-based area capture.
When to use it
- When you need high-fidelity visual snapshots of pages across devices.
- When focusing on specific page components, text blocks, or UI elements.
- When automated delivery of screenshots to a channel is desired.
What it can touch
- Uses Playwright for browser automation and screenshot capture.
- Works with color schemes (dark/light).
- Outputs to file paths specified in code (e.g., output_path) and can integrate with Telegram or other channels as the delivery target.
Caveats
- The provided material includes code that relies on Playwright installation and browser binaries; ensure prerequisites are met.
- The tool balances between full-page and element/text-based captures, which may require explicit selectors or text content to target accurately."
# Screenshot Skill Capture high-fidelity screenshots of any website using Playwright — the industry-standard browser automation framework. This skill covers viewport presets (mobile, tablet, desktop), dark/light mode, full-page captures, custom dimensions, element-level capture by CSS selector, text-based area capture, split-screen viewports, and automatic delivery to the user via Telegram or the active output channel. ## Core Principles ### 1. Wait for the Right Moment Screenshots fail when content hasn't loaded. Always wait for network idle, specific selectors, or a minimum timeout before capturing. Rushing the capture produces blank or partial images. ### 2. Match the Viewport to the Use Case A screenshot taken at 1920x1080 tells a different story than one at 375x667. Choose viewport presets deliberately based on what you're testing or documenting. ### 3. Respect Rate Limits and Server Load Don't hammer a website with concurrent screenshot requests. Add delays between captures, respect robots.txt, and avoid high-frequency automated captures of any single domain. ### 4. Handle JS-Heavy Pages Modern SPAs and dynamic content need extra care. Use `wait_until: networkidle`, wait for
- Core Principles
- 1. Wait for the Right Moment
- 2. Match the Viewport to the Use Case
- 3. Respect Rate Limits and Server Load
- 4. Handle JS-Heavy Pages
- 5. Capture Only What Matters
- Installation and Setup
- Prerequisites
- Verify Installation
- Quick Start — Basic Screenshot
- Viewport Presets
- Mobile Viewports
- Tablet Viewports
- Desktop Viewports
Install Playwright pip install playwright Install browser binaries playwright install chromium Or install all browsers playwright install
What does the screenshot skill do?
Capture high-fidelity screenshots of any website using Playwright — supports custom viewports, dark/light mode, mobile/tablet/desktop presets, split-screen, element-based capture by CSS selector, and text-based area capture. Integrates with Telegram or any output channel for delivery.
How do I install it?
Run `npx skills add cosmicstack-labs/mercury-agent-skills --skill screenshot --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From cosmicstack-labs/mercury-agent-skills, a repository with 364 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.