this will save u from adjusting the images later
A skill for AI-powered coding agents (Claude Code, Cursor, Windsurf, etc.) that generates production-ready App Store screenshots for iOS apps. It scaffolds a Next.js project, designs advertisement-style screenshots, and exports them at all required Apple resolutions.
Screenshots & App approved by Apple - https://apps.apple.com/us/app/bloom-coffee-shelf-recipe/id6759914524
- Asks you about your app's brand, features, and style preferences
- Scaffolds a minimal Next.js project (or works within an existing one)
- Designs each screenshot as an advertisement — not a UI showcase
- Writes compelling copy using proven App Store copywriting patterns
- Renders screenshots at full resolution with a built-in iPhone mockup
- Exports PNGs at all 4 Apple-required sizes (6.9", 6.5", 6.3", 6.1")
mockup.png— Pre-measured iPhone frame with transparent screen area
npx skills add ParthJadhav/app-store-screenshotsThis works with Claude Code, Cursor, Windsurf, OpenCode, Codex, and 40+ other agents.
Install globally (available across all projects):
npx skills add ParthJadhav/app-store-screenshots -gInstall for a specific agent:
npx skills add ParthJadhav/app-store-screenshots -a claude-codegit clone https://github.com/ParthJadhav/app-store-screenshots ~/.claude/skills/app-store-screenshotsOnce installed, the skill triggers automatically when you ask Claude Code to:
- Build App Store screenshots
- Generate marketing screenshots for an iOS app
- Create exportable screenshot assets
Or just tell Claude Code what you need:
> Build App Store screenshots for my app
Claude will ask you about your app's screenshots, brand colors, font, features, style direction, and number of slides before building anything.
These are good starting prompts because they provide product context while still leaving room for the skill to guide the design process.
Build App Store screenshots for my habit tracker.
The app helps people stay consistent with simple daily routines.
I want 6 slides, clean/minimal style, warm neutrals, and a calm premium feel.
Generate App Store screenshots for my personal finance app.
The app's main strengths are fast expense capture, clear monthly trends, and shared budgets.
I want a sharp, modern style with high contrast and 7 slides.
Create exportable App Store screenshots for my AI note-taking app.
The core value is turning messy voice notes into clean summaries and action items.
I want bold copy, dark backgrounds, and a polished tech-forward look.
Build marketing screenshots for my meditation app.
The app focuses on sleep, stress relief, and short guided sessions.
Use a soft, warm, organic style and prioritize emotional outcomes over feature lists.
- say what the app does in one sentence
- list the top 3-5 features in priority order
- describe the visual style you want
- mention how many slides you need
- provide references if you want the output to match a certain App Store style
If starting from an empty folder, the skill creates:
project/
├── public/
│ ├── mockup.png # iPhone frame (copied from skill)
│ ├── app-icon.png # Your app icon
│ └── screenshots/ # Your app screenshots
├── src/app/
│ ├── layout.tsx # Font setup
│ └── page.tsx # Screenshot generator (single file)
├── package.json
└── ...
The entire generator is a single page.tsx file. Run the dev server, open the browser, click any screenshot to export it as a PNG.
| Display | Resolution |
|---|---|
| 6.9" | 1320 x 2868 |
| 6.5" | 1284 x 2778 |
| 6.3" | 1206 x 2622 |
| 6.1" | 1125 x 2436 |
Screenshots are designed at 1320x2868 (largest) and scaled down for smaller sizes.
| Dependency | Purpose |
|---|---|
| Next.js | Dev server + static image serving |
| TypeScript | Type safety |
| Tailwind CSS | Styling |
| html-to-image | PNG export at exact resolutions |
| React | Component composition |
- Screenshots are ads, not docs — each slide sells one idea
- Copy follows the "one second" rule — readable at thumbnail size in the App Store
- Layouts vary — no two adjacent slides share the same phone placement
- Style is user-driven — no hardcoded colors, gradients, or fonts
Before exporting, each slide should pass this quick review:
- the headline communicates one idea in about one second
- the first slide sells the strongest user benefit
- adjacent slides do not reuse the same layout
- decorative elements support the message instead of blocking the UI
- text, screenshots, and framing still look correct after export sizing
- Node.js 18+
- One of: bun, pnpm, yarn, or npm (detected automatically, bun preferred)
MIT