screenshots

Generate retina-quality marketing screenshots of web apps using Playwright.

1|Updated Dec 29, 2025
One-click install
npx skills add https://github.com/ratnesh-maurya/tracker.ratnesh-maurya.com --skill screenshots-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: screenshots
Source: https://github.com/ratnesh-maurya/tracker.ratnesh-maurya.com/tree/main/.claude/skills/screenshots
Command: npx skills add https://github.com/ratnesh-maurya/tracker.ratnesh-maurya.com --skill screenshots-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright.

What problem does it solve? Creating polished marketing screenshots for Product Hunt launches, social media, landing pages, or documentation normally requires manual browser resizing, design tools, and repetitive capture work. This Skill automates the entire process by driving Playwright to capture HiDPI screenshots directly from your running app. ## Core Features & Use Cases - Automated Playwright Capture: Generates and runs a Node.js Playwright script with deviceScaleFactor: 2 for true 2x retina output at 2880x1800 resolution. - Codebase-Aware Feature Discovery: Reads your README, routes, and components to identify the key pages and features worth screenshotting. - Authentication Handling: Detects login forms with smart locators and captures authenticated pages when credentials are provided. - Use Case: You are preparing a Product Hunt launch for your Next.js tracker app. The Skill explores your routes, confirms the feature list with you, logs in automatically, and produces five ordered, retina-quality PNGs of your dashboard, habits, analytics, and settings pages. ## Quick Start Ask the AI to generate marketing screenshots of your app running at http://localhost:3000 for a Product Hunt launch.

Frequently Asked Questions about screenshots

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

FAQPage Schema
How do I generate marketing screenshots of my web app with Playwright?▼

Provide your app URL and confirm which features to capture. The Skill writes a Node.js Playwright script using a 1440x900 viewport with deviceScaleFactor 2, navigates to each page, waits for network idle, and saves retina-quality PNGs to a screenshots directory.

How to take screenshots of pages that require login?▼

Provide the login page URL, email, and password when prompted. The generated script uses smart locators to detect common email, password, and submit button patterns, logs in first, then captures all authenticated pages in the same browser context.

Does Playwright screenshot capture support retina or HiDPI resolution?▼

Yes, setting deviceScaleFactor to 2 in the browser context produces true retina output. A 1440x900 viewport yields 2880x1800 pixel images suitable for marketing use without upscaling.

Can I capture dark mode or full-page screenshots with Playwright?▼

Yes, set colorScheme to dark in the browser context for dark mode variants, and pass fullPage true to page.screenshot for scrollable content. Element-focused captures are also supported via locator.screenshot.

Why does my Playwright screenshot script fail to find elements?▼

Element failures usually come from incorrect CSS selectors or content that has not finished loading. Verify the selector against the page HTML, add waitForSelector calls, or fall back to a full-page screenshot instead.