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

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/

or

components/marketing/

)

Feature list components

Pricing tables

Testimonial sections

3.5: Build Feature List

Create a comprehensive list of discovered features with:

Feature name (from README or component name)

URL path (from routes)

CSS selector to focus on (from component structure)

Required UI state (logged in, data populated, modal open, specific tab selected)

Step 4: Plan Screenshots with User

Present the discovered features to the user and ask them to confirm or modify the list.

Use

AskUserQuestion

:

Header: "Features"

Question: "I found these features in your codebase. Which would you like to screenshot?"

Options: List 3-4 key features discovered, plus "Let me pick specific ones"

If user wants specific ones, ask follow-up questions to clarify exactly what to capture.

Step 5: Create Screenshots Directory

mkdir

-p

screenshots

Step 6: Generate and Run Playwright Script

Create a Node.js script that uses Playwright with proper HiDPI settings. The script should:

Use

deviceScaleFactor: 2

for true retina resolution

Set viewport to 1440x900

(produces 2880x1800 pixel images)

Handle authentication

if credentials were provided

Navigate to each page

and capture screenshots

Script Template

Write this script to a temporary file (e.g.,

screenshot-script.mjs

) and execute it:

import

{

chromium

}

from

'playwright'

;

const

BASE_URL

=

'[APP_URL]'

;

const

SCREENSHOTS_DIR

=

'./screenshots'

;

// Authentication config (if needed)

const

AUTH

=

{

needed

:

[

true

|

false

]

,

loginUrl

:

'[LOGIN_URL]'

,

email

:

'[EMAIL]'

,

password

:

'[PASSWORD]'

,

}

;

// Screenshots to capture

const

SCREENSHOTS

=

[

{

name

:

'01-feature-name'

,

url

:

'/path'

,

waitFor

:

'[optional-selector]'

}

,

{

name

:

'02-another-feature'

,

url

:

'/another-path'

}

,

// ... add all planned screenshots

]

;

async

function

main

(

)

{

const

browser

=

await

chromium

.

launch

(

)

;

// Create context with HiDPI settings

const

context

=

await

browser

.

newContext

(

{

viewport

:

{

width

:

1440

,

height

:

900

}

,

deviceScaleFactor

:

2

,

// This is the key for true retina screenshots

}

)

;

const

page

=

await

context

.

newPage

(

)

;

// Handle authentication if needed

if

(

AUTH

.

needed

)

{

console

.

log

(

'Logging in...'

)

;

await

page

.

goto

(

AUTH

.

loginUrl

)

;

// Smart login: try multiple common patterns for email/username field

const

emailField

=

page

.

locator

(

[

'input[type="email"]'

,

'input[name="email"]'

,

'input[id="email"]'

,

'input[placeholder*="email" i]'

,

'input[name="username"]'

,

'input[id="username"]'

,

'input[type="text"]'

,

]

.

join

(

', '

)

)

.

first

(

)

;

await

emailField

.

fill

(

AUTH

.

email

)

;

// Smart login: try multiple common patterns for password field

const

passwordField

=

page

.

locator

(

[

'input[type="password"]'

,

'input[name="password"]'

,

'input[id="password"]'

,

]

.

join

(

', '

)

)

.

first

(

)

;

await

passwordField

.

fill

(

AUTH

.

password

)

;

// Smart login: try multiple common patterns for submit button

const

submitButton

=

page

.

locator

(

[

'button[type="submit"]'

,

'input[type="submit"]'

,

'button:has-text("Sign in")'

,

'button:has-text("Log in")'

,

'button:has-text("Login")'

,

'button:has-text("Submit")'

,

]

.

join

(

', '

)

)

.

first

(

)

;

await

submitButton

.

click

(

)

;

await

page

.

waitForLoadState

(

'networkidle'

)

;

console

.

log

(

'Login complete'

)

;

}

// Capture each screenshot

for

(

const

shot

of

SCREENSHOTS

)

{

console

.

log

(

`

Capturing:

${

shot

.

name

}

`

)

;

await

page

.

goto

(

`

${

BASE_URL

}

${

shot

.

url

}

`

)

;

await

page

.

waitForLoadState

(

'networkidle'

)

;

// Optional: wait for specific element

if

(

shot

.

waitFor

)

{

await

page

.

waitForSelector

(

shot

.

waitFor

)

;

}

// Optional: perform actions before screenshot

if

(

shot

.

actions

)

{

for

(

const

action

of

shot

.

actions

)

{

if

(

action

.

click

)

await

page

.

click

(

action

.

click

)

;

if

(

action

.

fill

)

await

page

.

fill

(

action

.

fill

.

selector

,

action

.

fill

.

value

)

;

if

(

action

.

wait

)

await

page

.

waitForTimeout

(

action

.

wait

)

;

}

}

await

page

.

screenshot

(

{

path

:

`

${

SCREENSHOTS_DIR

}

/

${

shot

.

name

}

.png

`

,

fullPage

:

shot

.

fullPage

||

false

,

}

)

;

console

.

log

(

`

Saved:

${

shot

.

name

}

.png

`

)

;

}

await

browser

.

close

(

)

;

console

.

log

(

'Done!'

)

;

}

main

(

)

.

catch

(

console

.

error

)

;

Running the Script

node

screenshot-script.mjs

After running, clean up the temporary script:

rm

screenshot-script.mjs

Step 7: Advanced Screenshot Options

Element-Focused Screenshots

To screenshot a specific element instead of the full viewport:

const

element

=

await

page

.

locator

(

'[CSS_SELECTOR]'

)

;

await

element

.

screenshot

(

{

path

:

`

${

SCREENSHOTS_DIR

}

/element.png

`

}

)

;

Full Page Screenshots

For scrollable content, capture the entire page:

await

page

.

screenshot

(

{

path

:

`

${

SCREENSHOTS_DIR

}

/full-page.png

`

,

fullPage

:

true

}

)

;

Waiting for Animations

If the page has animations, wait for them to complete:

await

page

.

waitForTimeout

(

500

)

;

// Wait 500ms for animations

Clicking Elements Before Screenshot

To capture a modal, dropdown, or hover state:

await

page

.

click

(

'button.open-modal'

)

;

await

page

.

waitForSelector

(

'.modal-content'

)

;

await

page

.

screenshot

(

{

path

:

`

${

SCREENSHOTS_DIR

}

/modal.png

`

}

)

;

Dark Mode Screenshots

If the app supports dark mode:

// Set dark mode preference

const

context

=

await

browser

.

newContext

(

{

viewport

:

{

width

:

1440

,

height

:

900

}

,

deviceScaleFactor

:

2

,

colorScheme

:

'dark'

,

}

)

;

Step 8: File Naming Convention

Use descriptive, kebab-case filenames with numeric prefixes for ordering:

Feature

Filename

Dashboard overview

01-dashboard-overview.png

Link management

02-link-inbox.png

Edition editor

03-edition-editor.png

Analytics

04-analytics.png

Settings

05-settings.png

Step 9: Verify and Summarize

After capturing all screenshots, verify the results:

ls

-la

screenshots/*.png

sips

-g

pixelWidth

-g

pixelHeight screenshots/*.png

2

>

/dev/null

||

file

screenshots/*.png

Provide a summary to the user:

List all generated files with their paths

Confirm the resolution (should be 2880x1800 for 2x retina at 1440x900 viewport)

Mention total file sizes

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

Clean UI state

Use demo/seed data for realistic content

Consistent sizing

Use the same viewport for all screenshots

Wait for content

Use

waitForLoadState('networkidle')

to ensure all content loads

Hide dev tools

Ensure no browser extensions or dev overlays are visible

Dark mode variants

Consider capturing both light and dark mode if supported