A skill makes your App Store screenshots

What it is and why it matters

Your app's screenshots on the App Store are the first thing people look at. And in apps built solo they're usually the ugliest part: bare captures, tiny text, not one line saying what the app is for.

app-store-screenshots is a free, open source skill, under the MIT license and with more than 7,000 stars on GitHub. A skill is a package of instructions that Claude Code loads when needed. This one doesn't draw one image at a time: it builds you an editor in the browser, a small Next.js project of your own, where you put your app's real captures inside phone frames, write big readable lines and export in one go all the sizes Apple and Google ask for.

It's for anyone publishing an app on the App Store or Google Play without a designer. It also works with other agents, like Cursor and Codex, but here I'm talking about Claude Code.

1. Install it

You need Node.js, in a recent version (the minimum is in the README), and one of bun, pnpm, yarn or npm. Then, from the terminal:

• npx skills add ParthJadhav/app-store-screenshots installs it in the project you're in.
• Add -g to have it in all your projects: it goes into your user folder instead of the project.
• Add -a claude-code to install it only for Claude Code.

By hand, the README suggests cloning the repository into ~/.claude/skills/app-store-screenshots. But careful: in the repository the SKILL.md file sits in skills/app-store-screenshots/, while Claude Code looks for personal skills in ~/.claude/skills/<name>/SKILL.md. I'd clone the repository into a temporary folder and copy only that subfolder:

git clone https://github.com/ParthJadhav/app-store-screenshots /tmp/app-store-screenshots
cp -R /tmp/app-store-screenshots/skills/app-store-screenshots ~/.claude/skills/

Then open a new Claude Code session and type /: app-store-screenshots should show up in the list.

2. The request and the questions it asks you

Open Claude Code in an empty folder, next to your app's folder: the skill copies the editor project into it. Then ask for the screenshots. The more details you give right away, the fewer questions it asks:

Make the App Store and Google Play screenshots for my app <name>.
In one sentence: <what it does>.
The features, most important first: <1>, <2>, <3>.
The captures are in <folder>, the icon is <path>.
I want 6 screenshots, <clean, warm colors> style, in English and Spanish.

Before creating anything, the skill asks you its questions. These are required:

1. Do you already have screen captures, and where are they? If you don't and the app is iOS in Swift, it offers a companion skill, ios-marketing-capture, that takes them automatically. For Android, React Native, Flutter or web, you take the captures yourself.
2. Where the app icon is, as a PNG.
3. What the app is called.
4. The features in order of importance: what's the number one thing it does.
5. The style: one of the 18 ready-made styles, or you describe it in words and it builds a custom palette.

Then the optional ones: which stores, whether you need iPad, Mac, Android tablets, Apple TV, Apple Watch or CarPlay, how many screenshots, your brand colors and font. It always asks about languages, even if you didn't mention them. Among the styles there's Neon Athletic Night for fitness and running, Swiss Grid Bold for finance and developer tools, Soft Clay Wellness for meditation and sleep. If you name one in the request, it applies the whole style.

3. The editor it builds for you

Once the questions are done, it copies the editor template into the folder, installs the dependencies, puts the captures and icon in place, starts the server and gives you the address, usually http://localhost:3000. You open it in the browser and find:

• The connected canvas: you see the whole strip of screenshots together and can drag a phone or a caption across two screenshots. On export, each one is cropped exactly as it sits on the canvas.
• Real frames: iPhone, iPad, Mac, Apple Watch and Apple TV use Apple's frames from Apple Design Resources, which Apple licenses only for apps on its own platforms. For Android the editor has its own.
• The sidebar on the left, to add and reorder screenshots, and the inspector on the right, to change layout, headline, capture and elements. Next to the headline there's the Copy ideas menu, with ready-made formulas to rewrite.
• Style Lab: it shows you four complete looks of your set side by side. You lock the parts you like (colors, type, layout, scene) and shuffle the rest. In the top bar there's also the theme picker, with one palette per style.
• Export bundle: it downloads a zip with every size, split by platform, device, resolution and language.

Everything saves on its own to the app-store-screenshots.json file, and the captures you drag into the editor to public/screenshots/uploaded/. Put them on git and you can pick up the work from another computer too. To reopen the editor another day: in the folder, npm install the first time and then npm run dev, or the same with bun, pnpm or yarn.

4. Clean captures from the simulator

The editor is only as good as the captures you give it. The README has a tip: for iPhone, start from the 6.1-inch simulator, because it's the one that needs the least manual fixing of images inside the frames. A clean capture also has the time at 9:41 and a full battery. With the simulator running, from the terminal:

1. Fix the status bar: xcrun simctl status_bar booted override --time 9:41 --batteryState charged --batteryLevel 100 --cellularBars 4 --wifiBars 3.
2. Open the screen you want in the app, full of fake but believable data.
3. Capture: xcrun simctl io booted screenshot 01.png saves a PNG.
4. When you're done, put the normal bar back with xcrun simctl status_bar booted clear.

booted means the running simulator: if you have more than one, put its name or identifier in its place. Apple doesn't accept images with transparency: if a capture comes out with transparent corners, take it again adding --mask=ignored, which saves the whole screen without the rounded outline. For demo screens that open already filled in, there's the SIMULATORE guide (strikt.fit/simulatore-ios). Or you ask Claude:

Take the captures for the store screenshots. Build the app and launch it on the 6.1-inch iPhone simulator.
Fix the status bar at 9:41 with full battery and signal (xcrun simctl status_bar booted override).
Then open these screens one at a time: <list>, each full of fake but believable data, and save them with xcrun simctl io booted screenshot in public/screenshots/apple/iphone/en/ as 01.png, 02.png and so on.
At the end, put the normal status bar back and send me the list of files.

5. The sizes for the stores

The export picks the sizes, not you. For phones and tablets, the README lists these, in pixels:

• App Store, iPhone: 1320 × 2868 (6.9"), 1284 × 2778 (6.5"), 1206 × 2622 (6.3"), 1125 × 2436 (6.1").
• App Store, iPad: 2064 × 2752 (13") and 2048 × 2732 (iPad Pro 12.9").
• Google Play: phone 1080 × 1920; 7" tablet 1200 × 1920 or 1920 × 1200; 10" tablet 1600 × 2560 or 2560 × 1600; feature graphic 1024 × 500.

There are also Mac, Apple TV, Apple Watch, CarPlay and the large images for the product page. Before uploading, check the Screenshot specifications page in App Store Connect, because Apple updates the sizes with new phones. Today Apple asks for at least one screenshot for iPhone and accepts up to 10 per size, as JPEG or PNG, with no transparency. Google Play accepts up to 8 per device type.

Common mistakes

• Tiny text. The skill calls for the thumbnail test: shrink the screenshot to about 160 pixels wide, like in search results. If you can't read the headline, it's too long or too thin.
• Too many words. One idea per headline, 3-5 words per line, short words. Never two things joined by “and.”
• Screenshots that aren't the real app. Apple's guidelines ask for screenshots that show the app in use, not just the title art, login or splash screen (guideline 2.3.3), and that reflect the app's core experience (guideline 2.3). You choose the text around it, but inside the phone goes the app as it is.
• Prices in the screenshots. Guideline 2.3.7 of Apple's guidelines says screenshots shouldn't include prices.
• Captures with transparency: the export can come out with black rectangles instead of the screen. Use captures with no alpha channel.
• Asking Claude to rewrite the editor's code by hand. Changes are made in the editor, from the browser.

Checklist

• The app-store-screenshots skill shows up in Claude Code when I type /
• Real captures of the latest version of the app, with the status bar at 9:41
• The first screenshot says the main benefit in one second
• Every headline reads in the 160-pixel thumbnail
• app-store-screenshots.json and the uploaded captures are on git
• Export bundle downloaded for every device, sizes checked in App Store Connect

Frequently asked questions