generate-marketing-screenshots_skill

Overview

This skill automates pixel-perfect marketing screenshots and generates Product Hunt listing copy for deployed Next.js projects using Playwright MCP. It follows a strict, repeatable playbook to produce six gallery-ready PNG screenshots at 1440x900 and a ready-to-edit PRODUCT_HUNT.md. The workflow prioritizes production URLs, content verification, and concise launch copy tuned for Product Hunt.

How this skill works

I connect to the Playwright MCP server and navigate the live site, resizing the viewport to 1440x900 and waiting for client-side hydration, fonts, and images to load. I capture exactly six viewport PNG screenshots (no full-page captures), verify content via accessibility snapshots, handle overlays/auth flows, and then generate a Product Hunt listing draft using the screenshots and observed product details. I always close the browser session when finished.

When to use it

• Preparing assets and copy for a Product Hunt launch
• Creating a marketing gallery for an already deployed Next.js app
• Generating consistent, high-quality screenshots for release notes or app stores
• Preparing launch-day deliverables when you need repeatable output quickly
• When you have a public production URL and want pixel-perfect desktop screenshots

Best practices

• Always use the deployed public URL; warn if user supplies localhost
• Capture six PNG viewport screenshots at 1440x900 — homepage must be first
• Wait 3–5 seconds after navigation and verify with an accessibility snapshot
• Dismiss cookie banners, modals, and other overlays before screenshotting
• Provide credentials or a session cookie for authenticated pages; never hardcode secrets

Example use cases

• I captured six launch-ready screenshots and a Product Hunt draft for a Next.js SaaS prior to launch
• I produced marketing visuals for a dashboard app by logging in with a demo account and removing popups
• I generated centered homepage and scrolled screenshots to use as OG images and gallery assets
• I created a PRODUCT_HUNT.md with tagline, 260-char description, feature bullets, and screenshot descriptions