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: ```bash 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 screenshots do you need?" - Options: - "3-5" - Quick set of key features - "5-10" - Comprehensive featur...