Generate HiDPI Marketing Screenshots from Your Web App

Screenshots generates marketing-quality app screenshots using Playwright directly, captured at true HiDPI resolution with deviceScaleFactor: 2 on a 1440x900 viewport, producing 2880x1800 pixel images. It determines the app URL, then asks the user, through structured questions, how many screenshots are needed, what they are for (Product Hunt, social media, landing page, documentation), and whether login is required - detecting login form fields with Playwright's smart locators if credentials are provided. Before planning any shots, it reads the README, CHANGELOG, and docs directory to understand what the app actually does, then reads the real routing configuration for the detected framework - Next.js App or Pages Router, Rails routes.rb, React Router, Vue Router, SvelteKit, Remix, Laravel, Django, or Express - to find every real page rather than guessing at URLs, and looks for screenshottable components (dashboards, feature sections, forms, data visualizations, modals, navigation/sidebars, settings panels, profile sections) and existing marketing assets before finalizing the shot list. Each discovered feature is recorded with its name, URL path, a CSS selector to focus on, and the UI state it needs (logged in, data populated, a modal open, a specific tab selected), and the plan is confirmed with the user before any script runs.

Use it whenever screenshots are wanted for Product Hunt, social media, a landing page, or documentation - anywhere marketing-quality app screenshots are the goal. Playwright must already be available (npm install -D playwright or @playwright/test); the skill checks for it first and tells the user how to install it if missing, and it expects a reachable app URL or a local dev server to point at rather than a static mockup.

Input is the app URL, a screenshot plan (count, purpose, pages/features), and optional login credentials. Output is a generated Node.js script (for example screenshot-script.mjs) that launches Chromium with the retina context settings, logs in if needed, and captures each planned page, plus advanced options for element-focused shots, full-page scrolling captures, animation waits, click-before-shot sequences, and dark-mode variants via colorScheme: 'dark'. Files follow a kebab-case, numerically prefixed naming convention, for example:

01-dashboard-overview.png
02-link-inbox.png

For realistic results, the app should be seeded with demo data rather than shown empty, and no dev-tools panels or browser extension overlays should be visible in frame. After capture, it verifies results with ls -la screenshots/*.png and a pixel-dimension check, then reports each file's path, confirms the 2880x1800 retina resolution, and notes file sizes and any suggested follow-up shots.

Playwright (Chromium), run against a local dev server URL such as http://localhost:3000, :5173, :4000, or :8080. No other external services are involved; failures - Playwright missing, the dev server not running, login failing, an element not found, disk or permission errors - each have a documented fallback path rather than a silent crash.

Founders, developers, and marketers who need a batch of consistent, retina-quality, real-feature screenshots of their own app for a launch, a landing page, or docs, without hand-scripting Playwright captures or manually resizing images for HiDPI display.