app-store-screenshots Documentation

File: README.md Copy Chapter

App Store & Google Play Screenshots Generator

A skill for AI coding agents that scaffolds a production-ready Next.js editor for App Store and Google Play marketing screenshots. It gives you a connected canvas, real device frames, inspector controls, persistent project state, and one-click export bundles at store-ready sizes.

Example screenshots generated with this skill were accepted for Bloom Coffee Shelf Recipe on the App Store.

What It Does Copy Chapter

• Builds a full screenshot editor instead of a static one-off page
• Turns raw app captures into ad-style slides with big readable copy
• Lets phones, captions, and decorative elements span adjacent screenshots on one connected canvas
• Keeps older projects safe with isolated-screen export mode until you opt into connected crops
• Saves every deck to app-store-screenshots.json, so the project is git-trackable and resumable
• Uploads picked screenshots into public/screenshots/uploaded/<hash>.png
• Supports iOS, iPad, Android phone, Android tablet, and Play Store feature graphic decks
• Exports exact PNG bundles for all required App Store and Google Play sizes
• Supports locales, RTL-aware copy/layout guidance, reusable themes, and in-place project migration

Current Editor UI Copy Chapter

• Connected canvas - view the whole screenshot strip at once, drag elements across screen boundaries, then export each screen as a precise crop.
• Isolated mode - preserve legacy decks where offscreen elements should not leak into neighboring exports.
• Screen sidebar - add, select, and drag-to-reorder screens with live thumbnails.
• Inspector - edit layout, labels, headlines, screenshots, element stacking, and transforms from the right panel.
• Platform switcher - keep iOS and Android decks side by side while sharing the same editor workflow.
• Device selector - design for iPhone, iPad, Android phone, Android tablets, and feature graphic formats.
• Autosave - writes to disk through /api/project and mirrors to localStorage for instant reloads.
• Export bundle - downloads a zip organized by platform, device, resolution, and locale.

Tip: when capturing source iPhone screenshots, the 6.1-inch simulator is usually the easiest starting point because it reduces manual image adjustment inside the frames.

Install Copy Chapter

Using npx skills Copy Section

npx skills add ParthJadhav/app-store-screenshots

Install globally:

npx skills add ParthJadhav/app-store-screenshots -g

Install for a specific agent:

npx skills add ParthJadhav/app-store-screenshots -a claude-code

This works with Claude Code, Cursor, Windsurf, OpenCode, Codex, and other agents supported by skills.

Manual install Copy Section

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

Usage Copy Chapter

Once installed, ask your coding agent for store screenshots:

Build App Store and Google Play screenshots for my app.

The skill guides the agent to ask for your app context, source screenshots, platforms, locales, visual direction, and slide count before generating the editor project.

Example Prompts Copy Chapter

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 main strengths are fast expense capture, clear monthly trends, and shared budgets.
I want a sharp modern style with high contrast and 7 slides.

Build App Store screenshots for my language learning app.
I need English, German, and Arabic screenshot sets.
Use two reusable themes: clean-light and dark-bold.
Make sure Arabic slides feel RTL-native, not just translated.

Better Prompt Tips Copy Chapter

• Say what the app does in one sentence
• List the top 3-5 features in priority order
• Mention the platforms and devices you need
• Describe the visual style you want
• Say how many slides you want
• Mention required locales or RTL languages
• Provide source screenshot paths, app icon, and style references when available

What Gets Scaffolded Copy Chapter

If starting from an empty folder, the skill creates a Next.js project like this:

project/
├── public/
│   ├── mockup.png
│   ├── app-icon.png
│   └── screenshots/
│       ├── apple/
│       │   ├── iphone/{locale}/01.png
│       │   └── ipad/{locale}/01.png
│       └── android/
│           ├── phone/{locale}/01.png
│           ├── tablet-7/portrait/{locale}/01.png
│           ├── tablet-10/landscape/{locale}/01.png
│           └── feature-graphic/{locale}/01.png
├── app-store-screenshots.json
├── src/app/
│   ├── layout.tsx
│   └── page.tsx
├── src/components/editor/
│   ├── screenshot-editor.tsx
│   ├── toolbar.tsx
│   ├── sidebar.tsx
│   ├── inspector.tsx
│   ├── preview-stage.tsx
│   ├── slide-canvas.tsx
│   ├── screenshot-picker.tsx
│   └── device-frames.tsx
└── src/lib/
    ├── constants.ts
    ├── defaults.ts
    ├── storage.ts
    ├── image-cache.ts
    └── types.ts

The template README inside skills/app-store-screenshots/template/README.md documents the editor internals in more detail.

Editor Workflow Copy Chapter

1. Capture real app screenshots from a simulator, emulator, or device.
2. Ask your agent to scaffold or migrate the screenshot project.
3. Run the dev server and open the editor.
4. Use the sidebar to organize screens and the inspector to edit copy, layouts, screenshots, and elements.
5. Choose Connected or Isolated mode depending on whether elements should cross screen boundaries.
6. Click Export bundle to download store-ready PNGs.

Uploaded files are saved under public/screenshots/uploaded/, and the canonical deck state is saved in app-store-screenshots.json. Commit both to make the deck reproducible after a fresh clone.

Export Sizes Copy Chapter

Apple App Store Copy Section

Google Play Store Copy Section

Screenshots are designed at the largest size for each platform and scaled down for smaller exports. Android frames are CSS-rendered, while iPhone uses the included mockup.png bezel.

Project State Copy Chapter

• app-store-screenshots.json is the source of truth for app name, active platform, active device, locales, theme, connected-canvas mode, slides, screenshot paths, and transforms.
• Runtime uploads are written to public/screenshots/uploaded/<hash>.png.
• The editor reads localStorage first for fast paint, then reconciles with the project file.
• Older project files are migrated to schema v2 on load while keeping legacy decks isolated unless connected mode was already enabled.
• Custom themes live in src/lib/constants.ts; unknown theme ids fall back to clean-light.

Design Standards Copy Chapter

• Screenshots are ads, not documentation
• Each slide should sell one clear user outcome
• Headlines should pass the one-second thumbnail test
• Adjacent slides should vary layout and device placement
• Cross-screen elements should never split required text or critical UI
• Exported crops must still work as standalone screenshots

Tech Stack Copy Chapter

Requirements Copy Chapter

• Node.js 18+
• One of bun, pnpm, yarn, or npm

Contributing Copy Chapter

Contributions are welcome, especially around export reliability, screenshot design guidance, migrations, and cross-agent compatibility. Start with CONTRIBUTING.md.

License Copy Chapter

MIT

File: skills/app-store-screenshots/template/README.md Copy Chapter

App Store Screenshots — Editor Template

A pre-built Next.js + ShadCN editor for generating App Store and Google Play screenshots. Scaffolded by the app-store-screenshots skill.

Quick start Copy Chapter

bun install   # or pnpm / yarn / npm
bun dev       # http://localhost:3000

What's inside Copy Chapter

• Connected canvas editor (src/components/editor/) — every screen sits on one horizontal canvas, so phones, captions, and other elements can be dragged across screen boundaries and exported as split crops when Connected mode is enabled.
• Screen controls — drag-to-reorder screens, click-to-edit text, screenshot drop targets, per-screen layout switcher, dark/light toggle.
• Device frames (src/components/editor/device-frames.tsx) — iPhone (PNG mockup), iPad, Android phone, Android tablet (portrait + landscape), feature graphic.
• Auto-save (git-trackable) — every change is persisted within ~600ms to app-store-screenshots.json at the project root (via /api/project) and mirrored to localStorage as an instant-paint cache. Commit app-store-screenshots.json and you can git clone to another machine and resume exactly where you left off.
• Multi-device decks — iOS and Android slide decks live side by side; switching the platform tab preserves both.
• One-click export — bulk PNG export at any required App Store / Play Store resolution using html-to-image; each PNG is rendered from the current connected or isolated deck mode.
• Project migration — older app-store-screenshots.json files are migrated on load. Existing per-slide transforms remain valid, and connected crops become available without rewriting the deck by hand.
• Legacy-safe mode — pre-v2 projects opened directly in the editor start in isolated-screen mode first, then can opt into connected crops with the toolbar's Connected/Isolated control. Skill-run in-place migrations keep legacy decks isolated unless the project had already explicitly opted into connected canvas.

Adding screenshots Copy Chapter

Two ways:

1. Drop a file in the inspector — drag-and-drop or click Pick. The file is sent to /api/upload, hashed, and written to public/screenshots/uploaded/<hash>.png. The slide stores the resulting /screenshots/uploaded/... path, so commit those files alongside app-store-screenshots.json and the screenshots survive a git clone.
2. Reference a static file — put PNGs under public/screenshots/{platform}/{device}/{locale}/ and reference them by path. Default sample slides expect:
   • public/screenshots/apple/iphone/en/...
   • public/screenshots/android/phone/en/...
   • public/screenshots/apple/ipad/en/...

Update the matching screenshot fields in app-store-screenshots.json to point at whatever filenames you choose.

Exporting Copy Chapter

The toolbar dropdown lists every Apple/Google-required size for the current device. Click Export bundle to download a zip. In Connected mode, each PNG is clipped from the connected canvas, so an element that straddles two screens appears split exactly where you placed it. In Isolated mode, each screen clips its own elements and legacy offscreen content cannot leak into neighboring exports.

Customizing Copy Chapter

Notes Copy Chapter

• mockup.png is the iPhone bezel overlay; replacing it requires re-measuring the PHONE_SCREEN constants.
• Image preloading converts every static path to a base64 data URI before exports run, and export retries paths that were previously missing — this prevents the html-to-image race where some slide screenshots come out black.
• Reset via the toolbar's circular arrow icon clears in-memory state and reloads the default screens. To wipe disk state too, delete app-store-screenshots.json.
• Persistence model — the canonical state lives in app-store-screenshots.json (git-tracked). On load, the editor reads localStorage first for instant paint, then overwrites with the file contents if present; if the file endpoint is unavailable, autosave is blocked so stale cache cannot overwrite disk. On save, both are written. If you ever see a conflict, the file always wins.
• Migration model — schema v1 projects do not need a manual conversion. On first load, the editor upgrades localized text and transform records, writes schemaVersion: 2, preserves all existing screens, and keeps connectedCanvas: false so old offscreen/clipped elements export exactly as isolated screens. Turn on Connected in the toolbar when you want elements to cross screen edges. Explicit skill migrations preserve an existing connectedCanvas choice, otherwise they keep legacy decks isolated too.
• Custom themes — if a project file references a theme id that is not present in src/lib/constants.ts, the editor falls back to clean-light and shows a warning. Merge custom THEMES entries during in-place upgrades.