VerifiedPlugin
Marketing
ios-marketing-capture
A skill for AI-powered coding agents (Claude Code, Cursor, Windsurf, etc.) that automates marketing screenshot capture for SwiftUI iOS apps.
1 skill
@parthjadhavMarketing
Plugin
app-store-screenshots
A skill for AI coding agents that scaffolds a production-ready Next.js editor for App Store and Google Play marketing screenshots.
Plugin Signal66/100Solid
maintained85
capable14
documented100
adopted81
Install
$ npx -y skills add ParthJadhav/app-store-screenshots --agent claude-code
Run the curl in your terminal, the rest in Claude Code.
Stats
6,307
Stars
469
Forks
Active
Maintenance
TypeScript
Language
MIT
License
28d ago
Last commit
5mo ago
Created
Repo: ParthJadhav/app-store-screenshots
What's inside
README
1App 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
- 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
- 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/projectand mirrors tolocalStoragefor 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
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
- 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
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
- Capture real app screenshots from a simulator, emulator, or device.
- Ask your agent to scaffold or migrate the screenshot project.
- Run the dev server and open the editor.
- Use the sidebar to organize screens and the inspector to edit copy, layouts, screenshots, and elements.
- Choose Connected or Isolated mode depending on whether elements should cross screen boundaries.
- 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
app-store-screenshots.jsonis 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
localStoragefirst 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 toclean-light.
Design Standards
- 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
| 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
- Node.js 18+
- One of bun, pnpm, yarn, or npm
Contributing
Contributions are welcome, especially around export reliability, screenshot design guidance, migrations, and cross-agent compatibility. Start with CONTRIBUTING.md.
License
MIT
File tree
66ParthJadhav/app-store-screenshotsView on GitHub
.github/
FUNDING.yml
ISSUE_TEMPLATE/
bug_report.yml
config.yml
feature_request.yml
pull_request_template.md
.gitignore
CONTRIBUTING.md
example.png
LICENSE
README.md
skills/
app-store-screenshots/
mockup.png
SKILL.md
style-prompts/
style-prompts.md
_QUALITY_BAR.md
01-retro-rubberhose-mascot.md
02-moody-curated-dating.md
03-paper-sticker-skeuomorphic.md
04-dreamy-pastel-couples.md
05-hand-drawn-editorial-tasks.md
06-glossy-3d-kbeauty-creator.md
template/
.gitignore
app-store-screenshots.json
bun.lock
components.json
next.config.mjs
package.json
postcss.config.mjs
public/
mockup.png
screenshots/
android/
phone/
en/
.gitkeep
apple/
ipad/
en/
.gitkeep
iphone/
en/
.gitkeep
README.md
src/
app/
api/
project/
route.ts
upload/
route.ts
globals.css
layout.tsx
page.tsx
components/
editor/
device-frames.tsx
inspector.tsx
preview-stage.tsx
screenshot-editor.tsx
screenshot-picker.tsx
sidebar.tsx
slide-canvas.tsx
slide-thumb.tsx
toolbar.tsx
ui/
button.tsx
card.tsx
dialog.tsx
dropdown-menu.tsx
input.tsx
label.tsx
select.tsx
tabs.tsx
textarea.tsx
tooltip.tsx
lib/
constants.ts
defaults.ts
elements.ts
image-cache.ts
locale.ts
storage.ts
types.ts
utils.ts
tailwind.config.ts
tsconfig.jsonMore Flows by @parthjadhav.
@parthjadhavFAQ
app-store-screenshots is a Claude Code plugin with 1 hand-picked skill for marketing work, indexed on Flowy. Install it with the command on its page. It includes app-store-screenshots. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is app-store-screenshots?
- A skill for AI coding agents that scaffolds a production-ready Next.js editor for App Store and Google Play marketing screenshots.
- How do I install app-store-screenshots?
- Run these in Claude Code: npx -y skills add ParthJadhav/app-store-screenshots --agent claude-code. Then prompt normally.
- Does app-store-screenshots auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is app-store-screenshots free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.