← ClaudeAtlas

app-store-screenshotslisted

Use when building App Store or Google Play screenshot pages, generating exportable marketing screenshots for iOS and/or Android apps, or creating programmatic screenshot generators with Next.js. Triggers on app store, play store, screenshots, marketing assets, html-to-image, phone mockup, android screenshots, feature graphic.
fatihkan/badi · ★ 5 · AI & Automation · score 70
Install: claude install-skill fatihkan/badi
# App Store & Google Play Screenshots Generator ## Overview Build a Next.js page that renders App Store **and** Google Play screenshots as **advertisements** (not UI showcases) and exports them via `html-to-image` at Apple's and Google's required resolutions. Screenshots are the single most important conversion asset on both stores. Supported devices out of the box: - **iPhone** (portrait) — Apple App Store - **iPad** (portrait) — Apple App Store - **Android Phone** (portrait) — Google Play - **Android Tablet 7"** (portrait + landscape) — Google Play - **Android Tablet 10"** (portrait + landscape) — Google Play - **Feature Graphic** (landscape banner, 1024×500) — 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*. ## Step 1: Ask the User These Questions Before writing ANY code, ask the user all of these. Do not proceed until you have answers: ### Required 1. **App screenshots** — "Where are your app screenshots? (PNG files of actual device captures)" 2. **App icon** — "Where is your app icon PNG?" 3. **Brand colors** — "What are your brand colors? (accent color, text color, background preference)" 4. **Font** — "What font does your app use? (or what font do you want for the screenshots?)" 5. **Feature list** — "List your app's features in priority order. What's the #1