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.
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.
Builders who want Claude Code or Codex to generate app store screenshots from raw captures.
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
- 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/
- 2In Claude Code
/store-screenshots ./screenshots
- 3In Codex
$store-screenshots ./screenshots
README
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.
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
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/
| Agent | All projects | One 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
- Collect originals — scans your folder for screenshots; if there are none, the agent operates the app itself and captures them.
- Android:
adbtap/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?
- Android:
- 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
- Draft approval — a copy table plus one fully rendered first slide at real store size; full rendering starts only after your OK
- Render — frame, background, and copy composed in HTML/CSS, captured with headless Chrome
- 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
| Target | Size (px, portrait) | Slides | Notes |
|---|---|---|---|
| App Store iPhone 6.9″ | 1320×2868 | up to 10 | 1290×2796 also accepted |
| App Store iPhone 6.5″ | 1284×2778 | up to 10 | 1242×2688 also accepted |
| App Store iPad 13″ | 2064×2752 | up to 10 | required if the app supports iPad |
| Google Play phone | 1080×1920 | 2–8 | 9:16 · featuring needs ≥1080px and 4+ slides |
| Google Play tablet | 1080×1920 / 1920×1080 | up to 8 | when tablet is supported |
| Google Play foldable | in the phone slot | — | Fold's unfolded screen also works for the tablet slot |
✅ Requirements
| You need | Notes |
|---|---|
| Claude Code or Codex | either one — the skill runs in both |
| Chrome or Chromium | for headless rendering — falls back to Playwright automatically |
sips (built into macOS) or ImageMagick | for 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
If this saved you a Figma session, a ⭐ helps other developers find it.
Files in the repo
- .github
- promo
- store-screenshots
- .gitignore
- LICENSE
- README.ko.md
- README.md
Discussion (0)
Ask about usage, or say what you built with itSign in to join the discussion.
No comments yet. Be the first to say what this is good for.
More skills
Public repository for Agent Skills
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Taste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop
Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams—self-contained HTML with motion and crisp export.
Rebuild the object in a reference image as a code-only, procedural, quality-gated, animation-ready Three.js model. Token-efficient image-to-3D.