agentleFS
JuanMarchettoJuanMarchetto/agent-skills/skills/app-store-screenshots/SKILL.md

app-store-screenshots

Skill5 starsChanged 8 months agoMITView on GitHub

Create App Store and Google Play screenshots with exact platform specs. Covers iOS/Android dimensions, gallery ordering, device mockups, captions, preview videos, localization, and A/B testing. Use when: app store screenshots, ASO, app preview, store listing, app mockup.

12 other projects use a version of this, 2 of them edited.

Adopted by

Most recently taken up by

Used with

Projects with it also use operational-enterprise-ai, product-proof-saas and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • boraoztuncSkill

    operational-enterprise-ai

    Create or redesign enterprise AI, automation, security, and operations product pages that explain system boundaries, approvals, auditability, exceptions, and rollback. Use for dark cinematic heroes, hairline grids, metric pauses, expandable solution rows, case-study evidence, security proof, and qualified demo or waitlist handoffs.

    Also in 3 projects that use this

  • boraoztuncSkill

    product-proof-saas

    Create or redesign SaaS and AI product landing pages where a real workflow, interface, or deterministic demo is the central proof. Use for pale atmospheric shells, product UI in the hero, prompt-to-output stories, audience tabs, compact feature modules, honest pricing comparisons, and FAQ handoffs.

    Also in 3 projects that use this

  • Dragoon0xSkill

    pricing-page

    Present pricing in ways that reduce friction and increase clarity. Handles tier naming, feature comparison, anchor pricing, and plan selection psychology. Use when designing pricing pages, plan selectors, or upgrade prompts.

    Also in 3 projects that use this

  • brpazSkill

    tailwind-v4

    Configure Tailwind CSS v4 with Oxide, CSS-first directives, migration steps, and production guidance.

    Also in 3 projects that use this

  • silvainfmSkill

    copy-editing

    When the user wants to edit, review, or improve existing marketing copy. Also use when the user mentions 'edit this copy,' 'review my copy,' 'copy feedback,' 'proofread,' 'polish this,' 'make this better,' or 'copy sweep.' This skill provides a systematic approach to editing marketing copy through multiple focused passes.

    Also in 4 projects that use this

  • silvainfmSkill

    page-cro

    When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages, or blog posts. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions," or "why isn't this page working." For signup/registration flows, see signup-flow-cro. For post-signup activation, see onboarding-cro. For forms outside of signup, see form-cro. For popups/modals, see popup-cro.

    Also in 3 projects that use this

  • +1 more from boraoztunc
  • +1 more from silvainfm

The file

We split this skill into the rules it gives an agent

7 rules. 0 are common, 6 are distinctive, and 1 is very specific to this project.

  • 0

    Common

    Most of the 12 edited versions we read keep these.

  • 6

    Distinctive

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

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

    line 13
  2. Distinctive:

    Test different screenshot orders

    line 231
  3. Distinctive:

    Test with/without device frames

    line 232
  4. Distinctive:

    Test different color schemes

    line 234
  5. Distinctive:

    Run for 7+ days with 50%+ traffic for significant results

    line 235
  6. Distinctive:

    Wrong dimensions: Check platform specs table above — App Store and Play Store have different requirements

    line 267
  7. Distinctive:

    AI mockup looks generic: Add specific details to the prompt (your app's actual color scheme, specific screen content, real feature names)

    line 269

“Common” is measured: kept by at least 6 in 10 of the 12 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

App Store Screenshots

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

Quick Start

Requires inference.sh CLI (infsh). Get installation instructions: npx skills add inference-sh/skills@agent-tools

infsh login

# Generate a device mockup scene
infsh 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

Bad (feature-focused):
"Push Notification System"
"Calendar View with Filters"
"Data Export Functionality"

Good (benefit-focused):
"Never Miss a Deadline Again"
"See Your Week at a Glance"
"Share Reports in One Tap"

Generating Screenshots

Hero Screenshot (Position 1)

# Clean device mockup with hero feature
infsh 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

# Feature callout style
infsh 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

# Device in real-world setting
infsh 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

# Split comparison
infsh 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
# Generate preview video scenes
infsh 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

Important

AI-generated images (via inference.sh) produce marketing mockups, not real app screenshots. For actual screenshots of your running app, use maestro-mobile-testing or playwright-recording to capture real screens, then use this skill for framing, captions, and store optimization.

Example Output

App Store Screenshot Set Generated:
- hero-iphone15pro.png (1290x2796) — "Track Your Habits Effortlessly"
- feature-calendar.png (1290x2796) — "See Your Week at a Glance"
- social-proof.png (1290x2796) — "Join 50,000+ Users"
- ipad-pro.png (2048x2732) — "Beautiful on Every Screen"
- feature-graphic.png (1024x500) — Google Play feature graphic

Error Handling

  • Wrong dimensions: Check platform specs table above — App Store and Play Store have different requirements
  • Store rejection: Common causes: transparency in JPEG (use PNG), text too small (30pt+ minimum), screenshots show non-final UI
  • AI mockup looks generic: Add specific details to the prompt (your app's actual color scheme, specific screen content, real feature names)

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

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: infsh app list

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.