Generate HiDPI Marketing Screenshots from Your Web App

Generates marketing-quality app screenshots directly with Playwright, captured at true HiDPI/retina resolution using deviceScaleFactor: 2 against a 1440x900 viewport, producing 2880x1800 pixel images. Before shooting anything, it explores the target codebase: reads README/CHANGELOG/docs to understand what the app does, reads the actual routing configuration (Next.js App/Pages Router, Rails config/routes.rb, React Router, Vue Router, SvelteKit, Remix, Laravel, Django, or Express) to discover real pages rather than guessing, identifies screenshottable components (dashboards, feature sections, forms, charts, modals, settings panels), and checks existing marketing assets for hints about which features matter. It then asks the user how many screenshots are needed, what they're for (Product Hunt, social media, landing page, documentation), and whether login is required - detecting login form fields with Playwright's smart locators (trying common email, username, password, and submit selector patterns) when credentials are supplied. Generated screenshots are saved with descriptive kebab-case, numerically-prefixed filenames, and the skill verifies file presence and pixel dimensions before summarizing what it produced.

Use it when creating screenshots for Product Hunt, social media, landing pages, or documentation, or whenever marketing-quality app screenshots are requested. Playwright must be installed first; if it's missing, the skill tells the user to run npm install -D playwright or npm install -D @playwright/test rather than proceeding. For best results, use demo or seed data for a clean UI state, keep viewport size consistent across shots, wait for network-idle before capturing so content has fully loaded, make sure no dev-tool overlays or extensions are visible, and capture both light and dark mode variants if the app supports them.

Input is the app's base URL (defaulting to common dev-server ports like http://localhost:3000, :5173, :4000, or :8080 if none is given), plus optional login credentials and a login URL. Output is a screenshots/ directory of PNG files. Prerequisite check:

npx playwright --version 2>/dev/null || npm ls playwright 2>/dev/null | grep playwright

The capture script creates a HiDPI browser context like:

const context = await browser.newContext({
  viewport: { width: 1440, height: 900 },
  deviceScaleFactor: 2,  // This is the key for true retina screenshots
});

then navigates to each planned page, optionally logging in, waiting for load state and any specified selector, and calling page.screenshot({ path, fullPage }) per shot - element-focused, full-page, and dark-mode (colorScheme: 'dark') variants are all supported.

Built entirely on Playwright (chromium.launch(), browser contexts, page navigation and screenshot APIs) run as a standalone Node.js script (screenshot-script.mjs), deleted after the run. Uses standard shell tools (ls, sips or file) to verify output dimensions and file sizes afterward.

Developers and founders who need real, retina-resolution marketing screenshots of their actual running app - for a Product Hunt launch, social posts, a landing page, or documentation - generated from the app's real routes and components instead of mocked-up or manually captured images.