/app-store-screenshots

name: app-store-screenshots
description: Use when building App Store or Google Play screenshot pages, generating exportable marketing screenshots for iOS, macOS, and/or Android apps, or scaffolding a screenshot editor with Next.js. Triggers on app store, mac app store, play store, screenshots, marketing assets, html-to-image, phone mockup, mac mockup, android screenshots, feature graphic.

App Store & Google Play Screenshots Generator

Overview

Scaffold a pre-built Next.js + ShadCN editor that lets the user design and export App Store **and** Google Play screenshots as **advertisements** (not UI showcases). The editor handles all the heavy lifting:

• Connected live preview at the canvas's true resolution (scaled to fit)
• Drag-to-reorder screens, inline text editing, layout switcher per screen
• Cross-screen mockups: phone/device frames, captions, and layered elements can be moved across adjacent screens, then exported as clipped crops
• Drop-target screenshot picker (file → saved to `public/screenshots/uploaded/<hash>.png`)
• Auto-save to **`app-store-screenshots.json`** at the project root (git-trackable) + `localStorage` mirror
• Easy iOS ↔ Mac ↔ Android platform switch — separate slide decks live side by side
• One-click bulk PNG export at every Apple/Google-required resolution via `html-to-image`
• Light/dark variant toggle per slide, a toolbar theme picker (one palette preset per named style), locale select
• A **Copy ideas** menu next to the headline field with formulas for hero, differentiator, feature, proof, and closer slides
• Per-slide custom background colors (caption colours stay readable automatically), a live screenshot font menu, and importing licensed WOFF2/WOFF/TTF/OTF fonts
• Image overlay elements (logos, badges, photos) with drag/resize/rotation/layering controls and directional edge fades
• Toolbar Undo/Redo (`⌘Z` / `⇧⌘Z`) over the last 50 edits of the session
• Guided in-place migration for older projects created by this skill; passive and explicit migrations keep legacy decks isolated until the user intentionally opts into connected canvas

Supported devices out of the box:

• **iPhone** (portrait) — Apple App Store
• **iPad** (portrait) — Apple App Store
• **iPhone Duo** outer and inner displays, each in portrait and landscape (four decks) — Apple App Store; see "iPhone Duo" under Step 5
• **App Store creative assets**: universal 5244×2950, product page header 3840×1646, search results 3:2 — Apple App Store; see "App Store creative assets" under Step 5
• **Apple TV** (landscape, 4K + HD) — Apple App Store
• **Apple Watch** (portrait, every Ultra/Series size) — Apple App Store
• **CarPlay** (landscape head unit) — uploaded into the **iPhone** slot; see "Apple TV, Apple Watch and CarPlay" under Step 5
• **Mac** (16:10 landscape, own **Mac** tab) — Mac App Store (`2880×1800`, `2560×1600`, `1440×900`, `1280×800`); see "Mac" under Step 5
• **Android Phone** (portrait) — Google Play
• **Android Tablet 7"** (portrait + landscape) — Google Play
• **Android Tablet 10"** (portrait + landscape) — Google Play
• **Feature Graphic** (1024×500 banner) — Google Play store listing header

Core Principle

**Screenshots are advertisements, not documentation.** Every screenshot sells one idea. If you're showing UI, you're doing it wrong — you're selling a *feeling*, an *outcome*, or killing a *pain point*. Use this skill's interactive editor to iterate on copy and layout fast; do not hand-craft the page from scratch.

What This Skill Does

1. **Copies a pre-built template** from `template/` (co-located with this `SKILL.md`) into the user's working directory. 2. Installs dependencies with the user's package manager. 3. Drops the user's screenshots into `public/screenshots/...` and their app icon into `public/`. 4. (Optionally) prefills `app-store-screenshots.json` with the user's app name, starting copy, screenshots, and connected-canvas preference so the first preview is meaningful. 5. Starts the dev server and tells the user to open the editor in the browser.

You should NOT write `page.tsx`, device frames, or export logic by hand. They live in the template.

Step 0: Probe for Existing Screenshot Projects

Before asking the new-project questions in Step 1, always inspect the current working directory for an existing app-store-screenshots implementation.

Run lightweight probes:

test -f package.json && sed -n '1,220p' package.json
test -f app-store-screenshots.json && sed -n '1,120p' app-store-screenshots.json
rg -n "app-store-screenshots|html-to-image|toPng|ScreenshotEditor|DeckCanvas|connectedCanvas|EXPORT_SIZES|mockup.png|PHONE_SCREEN" package.json src app public 2>/dev/null
find public -maxdepth 4 \( -path "*/screenshots*" -o -name "mockup.png" -o -name "app-icon.png" \) -print 2>/dev/null

Treat the project as an older implementation when any of these are true:

• `app-store-screenshots.json` exists but has no `schemaVersion`, has `schemaVersion < 2`, or lacks `connectedCanvas`.
• `src/components/editor/screenshot-editor.tsx` exists but the editor does not reference `DeckCanvas` or `connectedCanvas`.
• `src/app/page.tsx` contains a previous all-in-one generator (`html-to-image`, `toPng`, `EXPORT_SIZES`, `PHONE_SCREEN`, hardcoded slide arrays/themes).
• The repo contains the old screenshot asset layout (`public/mockup.png`, `public/screenshots...`) plus a screenshot generator package setup.

If an older implementation is detected, ask exactly one question before doing anything else:

> I found an older App Store screenshots project here. Do you want me to migrate this existing project to the new connected-canvas editor? > > 1. Yes — migrate the existing project to the new editor > 2. No — set up or modify a project another way

If the user chooses **Yes**, do **not** ask the Step 1 questionnaire. Run the migration path below using the files already in the repo. If the user chooses **No**, continue to Step 1.

Migration Path (When User Say