app-store-screenshots · 101-skills — Claude Code skill
Creates store listing screenshots, device mockups and preview-video scenes for Apple App Store and Google Play. Use it when preparing an app listing.
npx skills add 101-skills/superpowers --skill app-store-screenshots -a claude-codeWhat app-store-screenshots does
This skill guides the creation of Apple App Store and Google Play screenshots with platform dimensions, file formats and gallery order in mind. It covers framed device mockups, full-screen UI images, lifestyle scenes and feature callouts. Preview-video requirements are included too.
It generates scenes through belt app run using falai/flux-dev-lora, bytedance/seedream-4-5, infsh/stitch-images and google/veo-3-1-fast. The inference.sh CLI, called belt, is required, along with belt login authentication.
The skill gives special weight to the first 3 gallery images because 80% of Apple App Store impressions show them before scrolling. That makes the opening screens the place to verify the app's main value and strongest feature first.
What it helps with
- create Apple App Store screenshots
- fit Google Play images to listing requirements
- plan the order of an app screenshot gallery
- generate a device mockup with
belt app run - produce scenes for an app preview video
Example prompts for the agent
- Create Apple App Store and Google Play screenshots for my app listing.
- Plan a screenshot gallery where the first 3 images show the main product value.
- Generate a device mockup scene with
belt app runfor this app screen.
How to install app-store-screenshots
1Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill app-store-screenshots -a claude-code2Manually: put the files in place
~/.claude/skills/app-store-screenshots/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/app-store-screenshots/
1Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill app-store-screenshots -a codex2Manually: put the files in place
.agents/skills/app-store-screenshots/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill app-store-screenshots -a cursor2Manually: put the files in place
.cursor/skills/app-store-screenshots/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install 101-skills/superpowers app-store-screenshots2Manually: put the files in place
.github/skills/app-store-screenshots/SKILL.md1Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill app-store-screenshots -a gemini-cli2Platform CLI
gemini skills install https://github.com/101-skills/superpowers --path guides/design/app-store-screenshotsManually: put the files in place
.devin/skills/app-store-screenshots/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill app-store-screenshots -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about app-store-screenshots
How do I install app-store-screenshots in Claude Code?
Run npx skills add 101-skills/superpowers --skill app-store-screenshots -a claude-code, then run npx skills add 101-skills/superpowers --skill app-store-screenshots -a claude-code again. The skill file is located at ~/.claude/skills/app-store-screenshots/SKILL.md.
What does app-store-screenshots do?
It helps create screenshots, device mockups and preview-video scenes for Apple App Store and Google Play listings. It covers image dimensions, formats and gallery sequencing.
What is required to generate mockups and scenes?
You need the inference.sh CLI, available as belt, and must authenticate with belt login. Generation runs through belt app run.
Similar skills
Everything for Mobile →app-store-screenshots by other authors comes first.
