Screenshots

This automates the tedious work of capturing marketing quality screenshots of your web app using Playwright at true retina resolution. It walks through everything: figuring out your app's URL, asking how many shots you need and what they're for, handling login if needed, then actually reading your codebase to find routes and features worth screenshotting. The codebase analysis is thorough, it reads your README, checks your routing files whether you're using Next.js or Rails or whatever, and identifies components that make sense to capture. You confirm what you want, it generates a Playwright script with proper HiDPI settings, and you get 2x resolution PNGs ready for Product Hunt or your landing page. Saves you from manually resizing browser windows and clicking around.

skills.sh installs: 256
GitHub stars: 39.4K
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add sickn33/antigravity-awesome-skills --skill screenshots --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

npm ls playwright @playwright/test --depth=0

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:

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

Common default URLs to suggest: