Screenshots

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

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

1. 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

1. CHANGELOG.md or HISTORY.md - Recent features worth highlighting

1. 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 `/dev/null || file screenshots/*.png

Provide a summary to the user:

1. List all generated files with their paths
2. Confirm the resolution (should be 2880x1800 for 2x retina at 1440x900 viewport)
3. Mention total file sizes
4. Suggest any follow-up actions

Example output:

Generated 5 marketing screenshots:

screenshots/ ├── 01-dashboard-overview.png (1.2 MB, 2880x1800 @ 2x) ├── 02-link-inbox.png (456 KB, 2880x1800 @ 2x) ├── 03-edition-editor.png (890 KB, 2880x1800 @ 2x) ├── 04-analytics.png (567 KB, 2880x1800 @ 2x) └── 05-settings.png (234 KB, 2880x1800 @ 2x)

All screenshots are true retina-quality (2x deviceScaleFactor) and ready for marketing use.

## Error Handling

- **Playwright not found**: Suggest `npm install -D playwright`
- **Page not loading**: Check if the dev server is running, suggest starting it
- **Login failed**: The smart locators try common patterns but may fail on unusual login forms. If login fails, analyze the login page HTML to find the correct selectors and customize the script.
- **Element not found**: Verify the CSS selector, offer to take a full page screenshot instead
- **Screenshot failed**: Check disk space, verify write permissions to screenshots directory

## Tips for Best Results

1. **Clean UI state**: Use demo/seed data for realistic content
2. **Consistent sizing**: Use the same viewport for all screenshots
3. **Wait for content**: Use `waitForLoadState('networkidle')` to ensure all content loads
4. **Hide dev tools**: Ensure no browser extensions or dev overlays are visible
5. **Dark mode variants**: Consider capturing both light and dark mode if supported

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [VALL-dikss](https://github.com/VALL-dikss)
- **Source:** [VALL-dikss/skills](https://github.com/VALL-dikss/skills)
- **License:** MIT
- **Homepage:** https://vall-dikss.github.io

Install and usage instructions live in the source repository linked above.