Sandbox
@LeeHueeng/store-screenshots

Claude Code and Codex skill for store screenshots

This skill turns raw app screenshots into polished App Store and Google Play marketing images. It can frame screens as iPhone, iPad, Galaxy, Fold, or Flip, pull colors from the app, draft copy, and render exact pixel sizes locally.

81 stars7 forksUpdated 25d ago
Who it's for

Builders who want Claude Code or Codex to generate app store screenshots from raw captures.

What it delivers

You can go from app screenshots to approved store assets without building the layouts by hand.

What it does

Device frames

Draws iPhone, iPad, Galaxy, Fold, and Flip frames in CSS instead of using downloaded mockups.

App-matched backgrounds

Pulls colors from `colors.xml`, `.xcassets`, or the app icon and offers Modern, Pop, Minimal, and Dark styles.

Copy approval flow

Reads each screen, drafts benefit-led headlines and subcopy, and waits for your approval before rendering the full set.

Exact store sizing

Renders and pixel-checks App Store and Google Play screenshot sizes such as 1320×2868, 1284×2778, 2064×2752, and 1080×1920.

Hands-free capture

Can drive the app itself to collect screenshots with `adb`, `simctl openurl`, idb, Maestro, or AppleScript when you do not already have captures.

How to get it

  1. 1Run
    git clone https://github.com/LeeHueeng/store-screenshots.git
    
    # Claude Code
    cp -r store-screenshots/store-screenshots ~/.claude/skills/
    
    # Codex
    mkdir -p ~/.agents/skills
    cp -r store-screenshots/store-screenshots ~/.agents/skills/
  2. 2In Claude Code
    /store-screenshots ./screenshots
  3. 3In Codex
    $store-screenshots ./screenshots

README

store-screenshots — AI agent skill that turns raw app screenshots into store-ready App Store and Google Play marketing images with device frames, branded backgrounds, and marketing copy

store-screenshots

Raw app screenshots in → store-ready marketing images out.
An AI agent skill for Claude Code & OpenAI Codex that adds device frames, branded backgrounds, and benefit-driven copy — at exact App Store & Google Play sizes.

License: MIT Claude Code Codex Stores

English · 한국어


Making App Store and Google Play screenshots by hand — opening Figma, hunting for device mockups, double-checking pixel sizes — gets old fast. This skill turns all of that into one request to your coding agent: point it at your raw screenshots (or let it drive your app and capture them itself), answer a few multiple-choice questions, approve the copy, and get a full set of store-ready PNGs.

✨ What it does

  • 📱 Device frames — iPhone, iPad, Galaxy, Fold, Flip, drawn in pure CSS (no mockup downloads, no license worries)
  • 🎨 Branded backgrounds — extracts your app's real design colors (colors.xml, .xcassets, app icon); Modern/Minimal, Pop, and Dark presets included
  • ✍️ Marketing copy — reads each screen and proposes benefit-driven headlines and subcopy, and only proceeds after you approve
  • 📐 Exact store sizes — App Store 1320×2868 / 1284×2778, iPad 2064×2752, Google Play 1080×1920, and more — every PNG is pixel-verified
  • 🤖 Hands-free capture — no screenshots yet? The agent drives your app itself (adb on Android; deep links, idb, or Maestro on the iOS Simulator) with the status bar unified to 9:41 / 100% battery

🖼️ Example output

Example result — an App Store marketing screenshot generated by the skill, with an app-matched background and Korean marketing copy

App Store iPhone 6.5″ size (1242×2688), generated with the "match my app's design" style

🚀 Install

git clone https://github.com/LeeHueeng/store-screenshots.git

# Claude Code
cp -r store-screenshots/store-screenshots ~/.claude/skills/

# Codex
mkdir -p ~/.agents/skills
cp -r store-screenshots/store-screenshots ~/.agents/skills/
AgentAll projectsOne project only
Claude Code~/.claude/skills/<project>/.claude/skills/
Codex~/.agents/skills/<repo root>/.agents/skills/

On older Codex versions the skills path may be ~/.codex/skills/.

💬 Usage

In Claude Code:

/store-screenshots ./screenshots

In Codex:

$store-screenshots ./screenshots

(or pick it from /skills)

Or just ask in plain language — "make my App Store screenshots".

How a run goes

  1. Collect originals — scans your folder for screenshots; if there are none, the agent operates the app itself and captures them.
    • Android: adb tap/screencap · iOS Simulator: deep links (simctl openurl) first, then idb, Maestro, or AppleScript
    • Status bar unified to 9:41 / 100% battery across every capture
    • You never have to touch the device — you only pick options and approve copy
    • On a re-run it first asks: reuse existing screenshots, or start fresh?
  2. Questions (all multiple-choice) — platform (App Store / Google Play) → devices (iPhone, iPad, Galaxy, Fold, Flip) → style (match my app / modern-minimal / pop / dark) → how many slides → what to highlight
  3. Draft approval — a copy table plus one fully rendered first slide at real store size; full rendering starts only after your OK
  4. Render — frame, background, and copy composed in HTML/CSS, captured with headless Chrome
  5. Verify — every PNG's pixel size is checked against the store spec table

📦 Output

store-screenshots/
├── appstore-iphone-69/01.png …   # 1320×2868
├── appstore-iphone-65/           # 1242×2688 — iPhone always gets both sets
├── appstore-ipad-13/             # 2064×2752
├── play-phone/                   # 1080×1920
└── play-foldable/

📏 Store specs it targets

TargetSize (px, portrait)SlidesNotes
App Store iPhone 6.9″1320×2868up to 101290×2796 also accepted
App Store iPhone 6.5″1284×2778up to 101242×2688 also accepted
App Store iPad 13″2064×2752up to 10required if the app supports iPad
Google Play phone1080×19202–89:16 · featuring needs ≥1080px and 4+ slides
Google Play tablet1080×1920 / 1920×1080up to 8when tablet is supported
Google Play foldablein the phone slotFold's unfolded screen also works for the tablet slot

✅ Requirements

You needNotes
Claude Code or Codexeither one — the skill runs in both
Chrome or Chromiumfor headless rendering — falls back to Playwright automatically
sips (built into macOS) or ImageMagickfor pixel-size verification

🧩 Why this instead of a web tool?

  • It reads your actual app. Colors come from your real design system, and the copy is written from what's actually on each screen — not from a template.
  • It can capture for you. Most screenshot tools start from images you already have; this one can launch and navigate your app to get them.
  • Nothing leaves your machine. No uploads, no accounts, no watermarks — plain HTML/CSS rendered locally.
  • Korean-first, English-ready. Copy defaults to Korean and can generate an English set for international listings in the same layout.

❓ FAQ

What size do App Store screenshots need to be? For iPhone, 1320×2868 (6.9″) and 1284×2778 (6.5″) portrait — this skill always renders both sets, because App Store Connect can require the 6.5″ set depending on your app's device support.

Does it work for Google Play? Yes — 1080×1920 phone screenshots (Play's featuring guidelines want at least 1080px and 4+ slides), plus tablet and foldable coverage.

Do I need Figma or Photoshop? No. Frames, backgrounds, and text are composed in HTML/CSS and rendered with headless Chrome.

Can it make screenshots for a Galaxy Fold or Flip? Yes — Fold (with hinge line) and Flip frames are drawn in CSS, and the unfolded Fold screen can double as a Play tablet screenshot.

📄 License

MIT


If this saved you a Figma session, a ⭐ helps other developers find it.

Files in the repo

Repository payload7 top-level entries
  • .github
  • promo
  • store-screenshots
  • .gitignore
  • LICENSE
  • README.ko.md
  • README.md

Discussion (0)

Ask about usage, or say what you built with it

Sign in to join the discussion.

No comments yet. Be the first to say what this is good for.

More skills

Vincentwei1021/
anything2explainer

Topic in, narrated explainer video out. A Claude Code / Codex skill that turns any topic into a black-canvas motion-graphics explainer video with TTS voiceover, subtitles and a chapter progress bar. Chinese or English; every frame drawn in code with Remotion.

666

Taste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop

86k

Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams—self-contained HTML with motion and crisp export.

57k
img2threejs/
img2threejs

Rebuild the object in a reference image as a code-only, procedural, quality-gated, animation-ready Three.js model. Token-efficient image-to-3D.

16k