/screenshot-planner

name: screenshot-planner
description: Plan compelling App Store screenshot sequences that showcase your app's value. Use when preparing App Store assets, improving screenshot conversion, or drafting screenshot captions for a launch or major update.
allowed-tools: [Read, Write, Edit, Glob, Grep, AskUserQuestion]
last_verified: 2026-07-16
review_by: 2027-06-22
os_version: iOS 27 / macOS 27

Screenshot Planner

Plan compelling App Store screenshot sequences that showcase your app's value.

When This Skill Activates

• User is preparing App Store assets
• User wants to improve screenshot conversion
• User asks about screenshot strategy or captions
• User is launching a new app or major update

Information Gathering

Before planning, ask about:

1. **App Type**

• What category? (Productivity, Games, Lifestyle, etc.)
• Primary use case?
• Visual style of the app?

2. **Key Selling Points**

• What makes users choose this app?
• Most impressive features visually?
• Any unique UI elements?

3. **Target Audience**

• Who downloads this app?
• What problem are they trying to solve?
• What matters most to them?

4. **Competitors**

• What do competitor screenshots show?
• How can you differentiate?

Screenshot Strategy

The 5-Screenshot Framework

Most users only see the first 2-3 screenshots. Order matters!

| Position | Purpose | Content | |----------|---------|---------| | **1** | Hero Shot | Value proposition + best visual | | **2** | Core Feature | Primary use case in action | | **3** | Key Differentiator | What makes you unique | | **4** | Secondary Feature | Another compelling feature | | **5** | Social Proof/CTA | Reviews, awards, or final push |

Extended (10 Screenshots)

| Position | Purpose | |----------|---------| | 6 | Additional feature | | 7 | Customization/settings | | 8 | Integration/ecosystem | | 9 | Before/after or workflow | | 10 | Final CTA with app icon |

Caption Writing

Caption Formula

[Action Verb] + [Benefit] + [Optional Detail]

Examples by Category

**Productivity:**

• "Capture ideas instantly"
• "Never miss a deadline"
• "Your tasks, beautifully organized"

**Health & Fitness:**

• "Track every workout"
• "See your progress over time"
• "Personalized plans that work"

**Photo & Video:**

• "Edit like a pro in seconds"
• "Filters that actually look good"
• "Share anywhere with one tap"

**Finance:**

• "Know where your money goes"
• "Budget without the stress"
• "Insights that save you money"

Caption Rules

✅ **Do:**

• Keep under 8 words
• Start with action verbs
• Focus on user benefits
• Match the visual exactly
• Use sentence case

❌ **Don't:**

• Use technical jargon
• Include version numbers
• Mention prices
• Use "Our app does..."
• Write full sentences

Visual Best Practices

Device Frames

| Approach | When to Use | |----------|-------------| | **With frames** | When device context matters, lifestyle apps | | **Without frames** | Maximizing screen real estate, content apps | | **3D angles** | Standing out, premium feel | | **Flat/straight** | Clean, professional, enterprise |

Backgrounds

• **Solid colors:** Clean, professional, fast loading
• **Gradients:** Modern, dynamic, attention-grabbing
• **Lifestyle photos:** Context, emotion, aspiration
• **Abstract patterns:** Creative, unique, memorable

Typography

• Use 2 fonts max (headline + body)
• Minimum 60pt for headlines (iPhone)
• Ensure readability on small thumbnails
• Match your app's brand fonts if possible

Screenshot Storyboard Template

SCREENSHOT 1: HERO
━━━━━━━━━━━━━━━━━━
Caption: [Value proposition - max 6 words]
Visual: [Key screen showing main feature]
Background: [Color/gradient that pops]
Notes: [This is first impression - make it count]

SCREENSHOT 2: CORE FEATURE
━━━━━━━━━━━━━━━━━━━━━━━━━━
Caption: [What can user do?]
Visual: [App in action, primary workflow]
Background: [Consistent with #1]
Notes: [Show the "aha" moment]

SCREENSHOT 3: DIFFERENTIATOR
━━━━━━━━━━━━━━━━━━━━━━━━━━━
Caption: [What makes you unique?]
Visual: [Feature competitors don't have]
Background: [Can vary slightly]
Notes: [Answer "why this app?"]

SCREENSHOT 4: SECONDARY FEATURE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Caption: [Another key benefit]
Visual: [Compelling secondary feature]
Background: [Consistent theme]
Notes: [Add depth to value proposition]

SCREENSHOT 5: TRUST/CTA
━━━━━━━━━━━━━━━━━━━━━━
Caption: [Social proof or call to action]
Visual: [Reviews, stats, or final screen]
Background: [Strong finish]
Notes: [Close the deal]

Size Requirements

iPhone (Required)

| Size | Device | Dimensions | |------|--------|------------| | 6.7" | iPhone 15 Pro Max | 1290 × 2796 | | 6.5" | iPhone 11 Pro Max | 1284 × 2778 | | 5.5" | iPhone 8 Plus | 1242 × 2208 |

iPad (If Universal)

| Size | Device | Dimensions | |------|--------|------------| | 12.9" | iPad Pro | 2048 × 2732 |

macOS

| Display | Dimensions | |---------|------------| | Standard | 1280 × 800 (min) | | Retina | 2880 × 1800 |

App Preview Video

When to Include

• Complex apps that need demonstration
• Games (almost always)
• Apps with unique interactions
• When screenshots can't show the experience

Video Specs

• 15-30 seconds optimal
• First 3 seconds = hook
• No audio required (most watch muted)
• Show actual app (no external footage first 3s)
• 1080p or higher

Video Storyboard

0:00-0:03  Hook - Most impressive moment
0:03-0:10  Core workflow demonstration
0:10-0:20  Key features montage
0:20-0:30  Final CTA with value prop

Creative Assets, Product Page Header & Search Results Visuals

> Introduced at WWDC26; submittable via App Store Connect's Asset Library, rendering on iOS 27 / iPadOS 27. (Per the session "Enhance your presence on the App Store".)

Two new surfaces beyond screenshots, both fed from the **Asset Library** (ASC's central hub for screenshots, previews, event media, and the new marketing images/videos called cr