app-store-screenshots README

The project's README from github.com/ParthJadhav/app-store-screenshots. As one markdown file: README.md.

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.

Current connected-canvas editor showing a Bloom screenshot deck

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

What It Does

Current Editor UI

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

Using npx skills

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

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

Usage

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

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

What Gets Scaffolded

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

  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

Apple App Store

Display Resolution
6.9" 1320 x 2868
6.5" 1284 x 2778
6.3" 1206 x 2622
6.1" 1125 x 2436

Google Play Store

Device Resolution
Phone portrait 1080 x 1920
7" tablet portrait 1200 x 1920
7" tablet landscape 1920 x 1200
10" tablet portrait 1600 x 2560
10" tablet landscape 2560 x 1600
Feature graphic 1024 x 500

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

Design Standards

Tech Stack

Dependency Purpose
Next.js Dev server and app shell
React Editor UI
TypeScript Project and slide state safety
Tailwind CSS Styling
shadcn/ui + Radix Controls, dialogs, selects, tooltips
html-to-image Exact PNG rendering
JSZip Bundle downloads
dnd-kit Screen reordering
react-rnd Draggable and resizable canvas elements

Requirements

Contributing

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

License

MIT

Author

Created by Parth Jadhav.

app-store-screenshots (ParthJadhav/app-store-screenshots)

Searching Database…

7.5K ·GitHub
App-store-screenshots
Что это?Скилл для ИИ-агентов кодинга (таких как Claude Code, Cursor, Windsurf, OpenCode и Codex), который разворачивает полноценный редактор на Next.js для создания маркетинговых скриншотов в App Store и Google Play — с рамками устройств, связанным холстом и экспортом пакетов в один клик в размерах, требуемых каждым стором.
Это готовое приложение или то, что мой кодинг-агент соберёт для меня?Это скилл для агента, а не самостоятельное приложение: после установки ваш кодинг-агент сможет развернуть полный проект на Next.js с редактором скриншотов прямо в вашем репозитории, который вы затем сами запускаете и настраиваете.
Как его установить и использовать?Установите его глобально или для конкретного агента командой 'npx skills', затем просто попросите кодинг-агента сделать стор-скриншоты — он развернёт проект редактора на Next.js, который вы запустите локально.
Что должно быть на компьютере заранее?Node.js 18 или новее, плюс один пакетный менеджер на выбор — bun, pnpm, yarn или npm — чтобы запустить сгенерированный проект редактора.
Поддерживаются обе платформы, iOS и Android, или только одна?Обе: он генерирует наборы для iOS, iPad, Android-телефонов, Android-планшетов и промо-графики Play Store, а экспорт идёт в точных PNG-размерах, требуемых каждым стором.
Что происходит с данными проекта между сессиями?Всё — имя приложения, платформы, устройства, локали, тема, слайды, пути к скриншотам и трансформации — сохраняется в app-store-screenshots.json, так что набор можно версионировать в git и продолжить позже, а localStorage используется для быстрой перезагрузки.
Чем отличаются режимы холста Connected и Isolated?Режим Connected позволяет телефонам, подписям и декоративным элементам пересекать соседние скриншоты по всей ленте перед экспортом точных кропов, а режим Isolated защищает старые наборы, чтобы элементы за кадром никогда не просачивались в соседние экспорты.
Можно ли настроить визуальную тему скриншотов?Да, пользовательские темы задаются в src/lib/constants.ts, а любой нераспознанный id темы просто откатывается к стандартной теме clean-light.
Кто-нибудь реально публиковал в App Store скриншоты, сделанные с этим скиллом?Да — в README отмечено, что примеры скриншотов, созданных с этим скиллом, были приняты для приложения Bloom Coffee Shelf Recipe в App Store.
What are similar projects?ai-website-cloner-template, evondevKit, ui-ux-pro-max-skill, design-extract, ChunUI, appllama-skills, SwiftUI-Agent-Skill, stitch-skills
Which topics is it in?automate, appstore, skills-sh, shadcn-ui, screenshot, ios-app, marketing, swiftui, agent-skill, tailwindcss, apple, design
Creator
ParthJadhav
Size
30.9 MB
Stars
7.5K
Updated
CommitOct 16
Age
7mo
Commits · 90 Days