generate-marketing-screens_skill

Overview

This skill automates creation of Product Hunt–ready marketing screenshots and generates a launch-ready Product Hunt listing for deployed Next.js (and other) web apps. It uses Playwright MCP commands to capture six pixel-perfect PNG screenshots at a marketing viewport and produces a structured PRODUCT_HUNT.md with tagline, descriptions, features, and maker comment. The output is saved to a marketing directory in the project root.

How this skill works

I connect to the Playwright MCP browser APIs to navigate your live site, set the viewport to 1440x900, wait for client-side resources to load, verify content via accessibility snapshots, and capture six curated PNG screenshots. After screenshots are saved, I create a PRODUCT_HUNT.md using on-site context and a proven template for tagline, short and long descriptions, feature bullets, key numbers, tech stack, topics, maker comment, and screenshot captions.

When to use it

• Preparing assets for a Product Hunt launch
• Creating marketing screenshots for a public demo or press kit
• Generating a full Product Hunt listing draft quickly
• Capturing consistent UI images for release notes or blog posts
• When you need repeatable, production-quality screenshots for multiple deployments

Best practices

• Run against the deployed public URL — localhost can miss fonts, CDN images, and real performance
• Confirm product name, list of key pages, auth needs, and output directory before starting
• Use viewport screenshots at 1440x900 and save as PNG (no fullPage, no JPEG)
• Wait 3–5 seconds after navigation and use snapshots to ensure content loaded (extend to 10s for heavy client loads)
• Dismiss modals, cookie banners, and set light theme before capturing

Example use cases

• Automate a 6-image Product Hunt gallery and a complete PRODUCT_HUNT.md for launch day
• Capture marketing screenshots for a new dashboard, analytics page, pricing page, and detail views
• Generate a quick launch draft when coordinating with makers or press teams
• Produce consistent image sets across staging and production to compare visual regressions
• Create assets and copy for scheduled launches on high-traffic weekdays