
About
Generate marketing screenshots of your app using Playwright. Use when the user wants to create screenshots for Product Hunt, social media, landing pages, or documentation.
name: screenshots description: "Generate marketing screenshots of your app using Playwright. Use when the user wants to create screenshots for Product Hunt, social media, landing pages, or documentation." risk: safe source: "https://github.com/Shpigford/skills/tree/main/screenshots" date_added: "2026-02-27"
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 playwrightornpm 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.jsonscripts - Use
AskUserQuestionto 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 feature coverage
- "10+" - Full marketing suite
Question 2: Purpose
- Header: "Purpose"
- Question: "What will these screenshots be used for?"
- Options:
- "Product Hunt" - Hero shots and feature highlights
- "Social media" - Eye-catching feature demos
- "Landing page" - Marketing sections and benefits
- "Documentation" - UI reference and tutorials
Question 3: Authentication
- Header: "Auth"
- Question: "Does the app require login to access the features you want to screenshot?"
- Options:
- "No login needed" - Public pages only
- "Yes, I'll provide credentials" - Need to log in first
If user selects "Yes, I'll provide credentials", ask follow-up questions:
- "What is the login page URL?" (e.g.,
/login,/sign-in) - "What is the email/username?"
- "What is the password?"
The script will automatically detect login form fields using Playwright's smart locators.
Step 3: Analyze Codebase for Features
Thoroughly explore the codebase to understand the app and identify screenshot opportunities.
3.1: Read Documentation First
Always start by reading these files to understand what the app does:
-
README.md (and any README files in subdirectories) - Read the full README to understand:
- What the app is and what problem it solves
- Key features and capabilities
- Screenshots or feature descriptions already documented
-
CHANGELOG.md or HISTORY.md - Recent features worth highlighting
-
docs/ directory - Any additional documentation about features
3.2: Analyze Routes to Find Pages
Read the routing configuration to discover all available pages:
| Framework | File to Read | What to Look For |
|-----------|--------------|------------------|
| Next.js App Router | app/ directory structure | Each folder with page.tsx is a route |
| Next.js Pages Router | pages/ directory | Each file is a route |
| Rails | config/routes.rb | Read the entire file for all routes |
| React Router | Search for createBrowserRouter or <Route | Route definitions with paths |
| Vue Router | src/router/index.js or router.js | Routes array with path definitions |
| SvelteKit | src/routes/ directory | Each folder with +page.svelte is a route |
| Remix | app/routes/ directory | File-based routing |
| Laravel | routes/web.php | Route definitions |
| Django | urls.py files | URL patterns |
| Express | Search for app.get, router.get | Route handlers |
Important: Actually read these files, don't just check if they exist. The route definitions tell you what pages are available for screenshots.
3.3: Identify Key Components
Look for components that represent screenshottable features:
- Dashboard components
- Feature sections with distinct UI
- Forms and interactive inputs
- Data visualizations (charts, graphs, tables)
- Modals and dialogs
- Navigation and sidebars
- Settings panels
- User profile sections
3.4: Check for Marketing Assets
Look for existing marketing content that hints at key features:
- Landing page components (often in
components/landing/orcomponents/marketing/) - Feature list components
- Pricing t