screenshots

Screenshots

Generate marketing-quality screenshots of your app using Playwright directly. Screenshots are captured at true HiDPI (2x retina) resolution using deviceScaleFactor: 2.

When to Use This Skill

Use this skill when:

• User wants to create screenshots for Product Hunt
• Creating screenshots for social media
• Generating images for landing pages
• Creating documentation screenshots
• User requests marketing-quality app screenshots

Prerequisites

Playwright must be available. Check for it:

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

If not found, inform the user:

Playwright is required. Install it with: npm install -D playwright or npm install -D @playwright/test

Step 1: Determine App URL

If $1 is provided, use it as the app URL.

If no URL is provided:

1. Check if a dev server is likely running by looking for package.json scripts
2. Use AskUserQuestion to ask the user for the URL or offer to help start the dev server

Common default URLs to suggest:

• http://localhost:3000 (Next.js, Create React App, Rails)
• http://localhost:5173 (Vite)
• http://localhost:4000 (Phoenix)
• http://localhost:8080 (Vue CLI, generic)

Step 2: Gather Requirements

Use AskUserQuestion with the following questions:

Question 1: Screenshot count

• Header: "Count"
• Question: "How many screens