screenshots

npx skills add sickn33/agentic-awesome-skills --skill screenshots --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

# 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:80

npx playwright --version 2>/dev/null || npm ls playwright 2>/dev/null | grep playwright
mkdir -p screenshots
node screenshot-script.mjs
rm screenshot-script.mjs
ls -la screenshots/*.png
sips -g pixelWidth -g pixelHeight screenshots/*.png 2>/dev/null || file screenshots/*.png