App Store Screenshots logo

App Store Screenshots

Organization
101-skills
app-store-screenshots

App Store and Google Play screenshot creation with exact platform specs. Covers iOS/Android dimensions, gallery ordering, device mockups, and preview videos. Use for: app store optimization, ASO, app screenshots, app preview, play store listing. Triggers: app store screenshots, aso, app store optimization, play store screenshots, app preview, app listing, ios screenshots, android screenshots, app store images, app mockup, device mockup, app gallery, store listing

Overview

Publisher101-skills
Repositorysuperpowers
Skill nameapp-store-screenshots
Stars
5
Forks
3
Bundled files
Instructions only
Links
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • Self-contained

    Everything the model needs lives in the instructions — no extra files to sync.

  • Open source

    Published by 101-skills on GitHub. Read the source before you install it.

Installation

Install the App Store Screenshots AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/101-skills/superpowers/tree/main/guides/design/app-store-screenshots
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/101-skills/superpowers.git /tmp/superpowers
mkdir -p .claude/skills
cp -r /tmp/superpowers/guides/design/app-store-screenshots .claude/skills/app-store-screenshots
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable App Store Screenshots in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads App Store Screenshots on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so App Store Screenshots is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

Install the belt CLI skill: npx skills add belt-sh/cli

App Store Screenshots

Create app store screenshots and preview videos via inference.sh CLI.

Quick Start

Requires inference.sh CLI (belt). Install instructions

bash
belt login

# Generate a device mockup scene
belt app run falai/flux-dev-lora --input '{
  "prompt": "iPhone 15 Pro showing a clean modern app interface with analytics dashboard, floating at slight angle, soft gradient background, professional product photography, subtle shadow, marketing mockup style",
  "width": 1024,
  "height": 1536
}'

Platform Specifications

Apple App Store (iOS)

DeviceDimensions (px)Required
iPhone 6.7" (15 Pro Max)1290 x 2796Required
iPhone 6.5" (11 Pro Max)1284 x 2778Required
iPhone 5.5" (8 Plus)1242 x 2208Optional
iPad Pro 12.9" (6th gen)2048 x 2732If iPad app
iPad Pro 11"1668 x 2388If iPad app
  • Up to 10 screenshots per localization
  • First 3 screenshots are visible without scrolling (critical)
  • Formats: PNG or JPEG (no alpha/transparency for JPEG)

Google Play Store (Android)

SpecValue
Min dimensions320 px (any side)
Max dimensions3840 px (any side)
Aspect ratio16:9 or 9:16
Max screenshots8 per device type
FormatsPNG or JPEG (24-bit, no alpha)
  • Feature graphic: 1024 x 500 px (required for featuring)
  • Promo video: YouTube URL (optional but recommended)

The First 3 Rule

80% of App Store impressions show only the first 3 screenshots (before the user scrolls). These three must:

  1. Communicate the core value proposition
  2. Show the best feature/outcome
  3. Differentiate from competitors

Screenshot Gallery Order

PositionContentPurpose
1Hero — core value, best featureStop the scroll, communicate what the app does
2Key differentiatorWhat makes you unique vs competitors
3Most popular featureThe thing users love most
4Social proof or outcomeRatings, results, testimonials
5-8Additional featuresSupporting features, settings, integrations
9-10Edge casesSpecialized features for niche users

Screenshot Styles

1. Device Frame with Caption

The standard: device mockup showing the app, caption text above/below.

┌──────────────────────────┐
│   "Track Your Habits     │  ← Caption (benefit-focused)
│    Effortlessly"         │
│                          │
│   ┌──────────────────┐   │
│   │                  │   │
│   │   App Screen     │   │  ← Actual app UI in device frame
│   │   Content        │   │
│   │                  │   │
│   │                  │   │
│   └──────────────────┘   │
│                          │
└──────────────────────────┘

2. Full-Bleed UI (No Device Frame)

The app UI fills the entire screenshot. Works for immersive apps.

3. Lifestyle Context

The device shown in a real-world context (person holding phone, on desk, etc.).

4. Feature Highlight with Callouts

UI screenshot with arrows/circles pointing to specific features.

Caption Writing

Rules

  • Max 2 lines of text
  • Benefit-focused, not feature-focused
  • 30pt+ equivalent font size (must be readable in store)

Examples

❌ Feature-focused:
"Push Notification System"
"Calendar View with Filters"
"Data Export Functionality"

✅ Benefit-focused:
"Never Miss a Deadline Again"
"See Your Week at a Glance"
"Share Reports in One Tap"

Generating Screenshots

Hero Screenshot (Position 1)

bash
# Clean device mockup with hero feature
belt app run falai/flux-dev-lora --input '{
  "prompt": "modern iPhone showing a beautiful fitness tracking app with activity rings and workout summary, device floating at slight angle against soft purple gradient background, professional product shot, clean minimal composition, subtle reflection",
  "width": 1024,
  "height": 1536
}'

Feature Highlight

bash
# Feature callout style
belt app run bytedance/seedream-4-5 --input '{
  "prompt": "app store screenshot style, iPhone showing a messaging app with AI writing suggestions highlighted, clean white background, subtle UI callout arrows, professional marketing asset, modern design",
  "size": "2K"
}'

Lifestyle Context

bash
# Device in real-world setting
belt app run falai/flux-dev-lora --input '{
  "prompt": "person holding iPhone showing a cooking recipe app, kitchen background with ingredients, warm natural lighting, over-the-shoulder perspective, lifestyle photography, authentic feeling",
  "width": 1024,
  "height": 1536
}'

Before/After

bash
# Split comparison
belt app run infsh/stitch-images --input '{
  "images": ["before-screenshot.png", "after-screenshot.png"],
  "direction": "horizontal"
}'

Preview Videos

Apple App Store

SpecValue
Duration15-30 seconds
OrientationPortrait or landscape (match app)
AudioOptional (loops silently in store)
FormatH.264, .mov or .mp4

Google Play

SpecValue
SourceYouTube URL
Duration30s-2min recommended
OrientationLandscape preferred

Preview Video Structure

SegmentDurationContent
Hook0-3sShow the core outcome/wow moment
Feature 13-10sDemonstrate top feature in action
Feature 210-18sSecond key feature
Feature 318-25sThird feature or social proof
CTA25-30sEnd screen with app icon
bash
# Generate preview video scenes
belt app run google/veo-3-1-fast --input '{
  "prompt": "smooth screen recording style, finger tapping on a modern mobile app interface, swiping between screens showing charts and data visualizations, clean UI transitions, professional app demo"
}'

Localization

Each language gets its own set of screenshots. Priorities:

MarketLocalization Level
Primary marketsFull: new screenshots + translated captions
Secondary marketsTranslated captions, same screenshots
OtherEnglish defaults

Key localization markets: English, Japanese, Korean, Chinese (Simplified), German, French, Spanish, Portuguese (Brazilian)

A/B Testing (Google Play)

Google Play Console supports store listing experiments:

  • Test different screenshot orders
  • Test with/without device frames
  • Test different captions
  • Test different color schemes
  • Run for 7+ days with 50%+ traffic for significant results

Common Mistakes

MistakeProblemFix
Settings screen as screenshotNobody cares about settingsShow core value, not infrastructure
Onboarding flow screenshotsShows friction, not valueShow the app in-use state
Too much textUnreadable in storeMax 2 lines, 30pt+ font
Wrong dimensionsRejected by storeUse exact platform specs
All screenshots look the sameNo reason to scrollVary composition and content
Feature-focused captionsDoesn't communicate benefit"Never Miss a Deadline" > "Push Notifications"
Outdated UILooks abandonedUpdate screenshots with each major release
No hero screenshotWeak first impressionPosition 1 = your best shot

Checklist

  • Correct dimensions for target platform
  • First 3 screenshots communicate core value
  • Captions are benefit-focused, max 2 lines
  • No onboarding or settings screens
  • Preview video is 15-30s with hook in first 3s
  • Localized for top markets
  • Feature graphic (1024x500) for Google Play
  • Screenshots updated for current app version
  • A/B test variant prepared

Related Skills

bash
npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@ai-video-generation
npx skills add inference-sh/skills@image-upscaling
npx skills add inference-sh/skills@prompt-engineering

Browse all apps: belt app list

Frequently asked questions

What does the App Store Screenshots AI skill do?

App Store and Google Play screenshot creation with exact platform specs. Covers iOS/Android dimensions, gallery ordering, device mockups, and preview videos. Use for: app store optimization, ASO, app screenshots, app preview, play store listing. Triggers: app store screenshots, aso, app store optimization, play store screenshots, app preview, app listing, ios screenshots, android screenshots, app store images, app mockup, device mockup, app gallery, store listing

Why use App Store Screenshots on TypingMind?

Because you install it once and use it with any model. App Store Screenshots is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install App Store Screenshots in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/101-skills/superpowers/tree/main/guides/design/app-store-screenshots. TypingMind reads its SKILL.md and installs it as a skill you can enable per chat.

Which AI models can use App Store Screenshots?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with App Store Screenshots?

As many as you like. As long as a model supports skills, you can use App Store Screenshots with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the App Store Screenshots AI skill free?

It is published on GitHub by 101-skills. Check the repository for licensing terms. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇