screenshots

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.
type	skill
created	2026-02-27T00:00:00.000Z
domain	business-marketing
category	marketing
risk	safe
source	https://github.com/Shpigford/skills/tree/main/screenshots
tags	["skill","business-marketing","marketing","screenshots"]

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:

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