Screenshots

What Is This?

Overview

The Screenshots skill automates the process of capturing marketing-quality screenshots of web applications using Playwright, a reliable browser automation library. Instead of manually opening a browser, adjusting window sizes, and cropping images, this skill handles the entire capture process programmatically. It produces consistent, high-resolution images suitable for professional use across multiple distribution channels.

Playwright renders pages in a real browser context, which means the screenshots reflect actual visual output rather than approximations. This approach ensures that fonts, animations in their resting state, shadows, and layout details appear exactly as users would see them. The skill runs in a forked context and uses a controlled set of tools including Node.js and npx commands to keep the process contained and reproducible.

The skill accepts a URL as its primary argument and generates screenshots ready for immediate use. Output files are organized and accessible without additional post-processing steps, making it straightforward to drop images directly into a landing page, a Product Hunt submission, or a social media post.

Who Should Use This

• Founders and indie developers who need polished product screenshots for launch campaigns without hiring a designer for every update
• Marketing teams that maintain a library of up-to-date application screenshots for campaigns and press kits
• Product managers who document feature releases and need consistent visual records across versions

Why Use It?

Problems It Solves

• Manual screenshot workflows are inconsistent. Different team members capture images at different resolutions, zoom levels, and browser states, resulting in a fragmented visual identity across marketing materials.
• Keeping screenshots current is tedious. Every UI update requires someone to revisit every page, recapture images, and replace files, which often gets skipped until materials look outdated.
• Browser-based capture tools often miss dynamic content or require browser extensions that introduce their own inconsistencies.
• Coordinating screenshot sessions across time zones or between design and engineering teams creates unnecessary bottlenecks before launch deadlines.

Core Highlights

• Captures screenshots using Playwright for true browser rendering accuracy
• Accepts any publicly accessible or locally running URL as input
• Produces high-resolution output suitable for retina displays and print
• Runs entirely from the command line with no graphical interface required
• Organizes output files automatically using structured directory creation
• Supports post-processing through compatible tools such as sips for format conversion
• Operates in a forked context to keep the capture environment isolated
• Requires no persistent browser installation beyond what npx provides at runtime

How to Use It?

Basic Usage

Invoke the skill by providing a target URL. The skill uses Playwright via npx to launch a browser, navigate to the URL, and save the screenshot.

npx playwright screenshot --browser chromium https://yourapp.com screenshot.png

For a full-page capture that scrolls beyond the visible viewport:

npx playwright screenshot --browser chromium --full-page https://yourapp.com fullpage.png

To set a specific viewport size matching common marketing dimensions:

node capture.js --width 1280 --height 800 --url https://yourapp.com --output marketing/hero.png

Specific Scenarios

Product Hunt launch assets. Product Hunt recommends images at 1270x952 pixels. Set the viewport to those dimensions before capture to avoid resizing artifacts that soften text and edges.

Social media cards. Open Graph images typically use a 1200x630 ratio. Capture the page at that viewport, then use sips to verify or convert the format if the platform requires JPEG instead of PNG.

Real-World Examples

A SaaS team preparing a launch runs the skill against their staging environment the night before going live. They capture the dashboard, the onboarding flow, and the pricing page in one scripted pass, then upload the results directly to their Product Hunt draft.

A documentation team sets up a scheduled job that runs the skill weekly against their production app. Any visual regressions in the interface become immediately visible when comparing the new screenshots to the previous set.

When to Use It?

Use Cases

• Preparing assets for a Product Hunt, AppSumo, or similar launch platform
• Updating landing page hero images after a UI redesign
• Generating screenshots for press kits and media inquiries
• Capturing interface states for user documentation and help articles
• Creating before-and-after visuals for changelog announcements
• Building a visual regression baseline for design QA processes
• Automating screenshot generation as part of a CI/CD pipeline

Important Notes

Requirements

• Node.js must be installed and accessible in the current shell environment
• The target URL must be reachable from the machine running the skill, whether public or on a local development server
• Sufficient disk space for storing PNG output files, which can be several megabytes each at high resolution
• npx must be available to pull and run Playwright without a global installation