guides/design/app-store-screenshots/SKILL.md
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
npx skillsauth add inference-sh-8/skills app-store-screenshotsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security scan pending...
This skill is queued for security scanning. Results will appear when the scan completes.
Install the belt CLI skill:
npx skills add belt-sh/cli
Create app store screenshots and preview videos via inference.sh CLI.
Requires inference.sh CLI (
belt). Install instructions
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
}'
| Device | Dimensions (px) | Required | |--------|-----------------|----------| | iPhone 6.7" (15 Pro Max) | 1290 x 2796 | Required | | iPhone 6.5" (11 Pro Max) | 1284 x 2778 | Required | | iPhone 5.5" (8 Plus) | 1242 x 2208 | Optional | | iPad Pro 12.9" (6th gen) | 2048 x 2732 | If iPad app | | iPad Pro 11" | 1668 x 2388 | If iPad app |
| Spec | Value | |------|-------| | Min dimensions | 320 px (any side) | | Max dimensions | 3840 px (any side) | | Aspect ratio | 16:9 or 9:16 | | Max screenshots | 8 per device type | | Formats | PNG or JPEG (24-bit, no alpha) |
80% of App Store impressions show only the first 3 screenshots (before the user scrolls). These three must:
| Position | Content | Purpose | |----------|---------|---------| | 1 | Hero — core value, best feature | Stop the scroll, communicate what the app does | | 2 | Key differentiator | What makes you unique vs competitors | | 3 | Most popular feature | The thing users love most | | 4 | Social proof or outcome | Ratings, results, testimonials | | 5-8 | Additional features | Supporting features, settings, integrations | | 9-10 | Edge cases | Specialized features for niche users |
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 │ │
│ │ │ │
│ │ │ │
│ └──────────────────┘ │
│ │
└──────────────────────────┘
The app UI fills the entire screenshot. Works for immersive apps.
The device shown in a real-world context (person holding phone, on desk, etc.).
UI screenshot with arrows/circles pointing to specific features.
❌ 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"
# 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 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"
}'
# 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
}'
# Split comparison
belt app run infsh/stitch-images --input '{
"images": ["before-screenshot.png", "after-screenshot.png"],
"direction": "horizontal"
}'
| Spec | Value | |------|-------| | Duration | 15-30 seconds | | Orientation | Portrait or landscape (match app) | | Audio | Optional (loops silently in store) | | Format | H.264, .mov or .mp4 |
| Spec | Value | |------|-------| | Source | YouTube URL | | Duration | 30s-2min recommended | | Orientation | Landscape preferred |
| Segment | Duration | Content | |---------|----------|---------| | Hook | 0-3s | Show the core outcome/wow moment | | Feature 1 | 3-10s | Demonstrate top feature in action | | Feature 2 | 10-18s | Second key feature | | Feature 3 | 18-25s | Third feature or social proof | | CTA | 25-30s | End screen with app icon |
# 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"
}'
Each language gets its own set of screenshots. Priorities:
| Market | Localization Level | |--------|-------------------| | Primary markets | Full: new screenshots + translated captions | | Secondary markets | Translated captions, same screenshots | | Other | English defaults |
Key localization markets: English, Japanese, Korean, Chinese (Simplified), German, French, Spanish, Portuguese (Brazilian)
Google Play Console supports store listing experiments:
| Mistake | Problem | Fix | |---------|---------|-----| | Settings screen as screenshot | Nobody cares about settings | Show core value, not infrastructure | | Onboarding flow screenshots | Shows friction, not value | Show the app in-use state | | Too much text | Unreadable in store | Max 2 lines, 30pt+ font | | Wrong dimensions | Rejected by store | Use exact platform specs | | All screenshots look the same | No reason to scroll | Vary composition and content | | Feature-focused captions | Doesn't communicate benefit | "Never Miss a Deadline" > "Push Notifications" | | Outdated UI | Looks abandoned | Update screenshots with each major release | | No hero screenshot | Weak first impression | Position 1 = your best shot |
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 store
data-ai
Generate multi-person talking head podcast videos from scratch using AI — character creation, TTS, avatar animation, and video stitching. Use when the user wants to create a podcast, talking head video, or multi-speaker conversation video.
development
Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, buttons, cards, layouts, inputs, selects, checkboxes. Use for: agent-generated UIs, dynamic forms, data display, interactive cards. Triggers: widgets, declarative ui, json ui, widget renderer, agent widgets, dynamic ui, form widgets, card widgets, shadcn widgets, structured output ui
tools
Tool lifecycle UI components for React/Next.js from ui.inference.sh. Display tool calls: pending, progress, approval required, results. Capabilities: tool status, progress indicators, approval flows, results display. Use for: showing agent tool calls, human-in-the-loop approvals, tool output. Triggers: tool ui, tool calls, tool status, tool approval, tool results, agent tools, mcp tools ui, function calling ui, tool lifecycle, tool pending
development
Chat UI building blocks for React/Next.js from ui.inference.sh. Components: container, messages, input, typing indicators, avatars. Capabilities: chat interfaces, message lists, input handling, streaming. Use for: building custom chat UIs, messaging interfaces, AI assistants. Triggers: chat ui, chat component, message list, chat input, shadcn chat, react chat, chat interface, messaging ui, conversation ui, chat building blocks