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.
npx skills add https://github.com/rshankras/claude-code-apple-skills --skill screenshot-planner
Plan compelling App Store screenshot sequences that showcase your app's value.
Before planning, ask about:
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 |
| Position | Purpose |
|----------|---------|
| 6 | Additional feature |
| 7 | Customization/settings |
| 8 | Integration/ecosystem |
| 9 | Before/after or workflow |
| 10 | Final CTA with app icon |
[Action Verb] + [Benefit] + [Optional Detail]
Productivity:
Health & Fitness:
Photo & Video:
Finance:
✅ Do:
❌ Don't:
| 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 |
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 | 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 |
| Size | Device | Dimensions |
|------|--------|------------|
| 12.9" | iPad Pro | 2048 × 2732 |
| Display | Dimensions |
|---------|------------|
| Standard | 1280 × 800 (min) |
| Retina | 2880 × 1800 |
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
> 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 creative assets):
Working rules from Apple's session:
Keep a motion-capable asset library (source-quality captures, layered project files) so every PPO/CPP learning can graduate into header and search assets.
Before finalizing, check competitors:
Create AI marketing videos for ads, promos, product launches, and brand content. Models: Veo, Seedance, Wan, FLUX for visuals, Kokoro for voiceover. Types: product demos, testimonials, explainers, social ads, brand videos. Use for: Facebook ads, YouTube ads, product launches, brand awareness. Triggers: marketing video, ad video, promo video, commercial, brand video, product video, explainer video, ad creative, video ad, facebook ad video, youtube ad, instagram ad, tiktok ad, promotional video, launch video
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
Generate images using Nano Banana Pro (Gemini 3 Pro Preview). Use when creating app icons, logos, UI graphics, marketing banners, social media images, illustrations, diagrams, or any visual assets. Supports reference images for style transfer and character consistency. Triggers include phrases like 'generate an image', 'create a graphic', 'make an icon', 'design a logo', 'create a banner', 'same style as', 'keep the style', or any request needing visual content.
Generate and save images using Pollinations.ai's free, open-source API. No signup required. Supports URL-based generation, custom parameters (width, height, model, seed), and automatic file saving. Perfect for quick prototypes, marketing assets, and creative workflows.
| Create AI marketing videos for ads, promos, product launches, and brand content. product video, explainer video, ad creative, video ad, facebook ad video, youtube ad, instagram ad, tiktok ad, promotional video, launch video
Use when building App Store screenshot pages, generating exportable marketing screenshots for iOS apps, or creating programmatic screenshot generators with Next.js. Triggers on app store, screenshots, marketing assets, html-to-image, phone mockup.
Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study.
Launch and supervise OpenShell gator agents. Use when starting gator on issues or PRs, checking gator sandboxes, building the gator sandbox image, restarting stuck gators, inspecting gator logs, or experimenting with gator harness/model overrides. Trigger keywords - launch gator, start gator, run gator, gator sandbox, supervised gator, gator logs, restart gator.
Take rshankras/screenshot-planner from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.