Skip to content
Development
Skill

/screenshot-planner

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.

From plugin
rshankras-apple-skills
848181 skills

Claude Code

$ npx -y skills add rshankras/claude-code-apple-skills --skill screenshot-planner --agent claude-code

SKILL.md

screenshot-planner.SKILL.md
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-11-08
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)
  • Only video screen captures of the app itself, for the entire length (Guideline 2.3.4). Narration and video/text overlays are allowed, but external or live-action footage is not
  • 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 f

Read more
@rshankras
Ships withrshankras-apple-skills

A collection of Claude Code skills for iOS, macOS, watchOS, visionOS, and Apple platform development. These skills help you plan and build apps, maintain code quality, ensure HIG compliance, and guide you from idea to App Store.

Stars on GitHub

Momentum

stars in total
848
Star history of rshankras/claude-code-apple-skills on GitHub, a chart by star-history.com

Other skills on rshankras-apple-skills.

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills10d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc12d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react1d252k
@facebook@facebookInstall Skill

Questions about screenshot-planner.

Which coding agents can use screenshot-planner?
screenshot-planner installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.