app-store-screenshots
Use when building App Store or Google Play screenshot pages, generating exportable marketing screenshots for iOS and/or Android apps, or scaffolding a screenshot editor with Next.js. Triggers on app store, play store, screenshots, marketing assets, html-to-image, phone mockup, android screenshots, feature graphic.
npx skills add ParthJadhav/app-store-screenshots --skill app-store-screenshots --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Scaffolds a pre-built Next.js + ShadCN editor that lets the user design and export App Store and Google Play screenshots as advertisements rather than UI showcases. It copies a pre-built template into the working directory, installs dependencies, places user screenshots and app icon into public/, and optionally pre-fills app-store-screenshots.json. It starts a dev server to preview the editor and instructs the user to open it in the browser.
How it works
- Copies a pre-built template from template/ into the user’s working directory.
- Installs dependencies with the user’s package manager.
- Drops user screenshots into public/screenshots/... and their app icon into public/.
- Optionally prefills app-store-screenshots.json with app name, starting copy, screenshots, and connected-canvas preference.
- Starts the dev server and prompts the user to open the editor in the browser.
When to use it
Use when building App Store or Google Play screenshot pages, generating exportable marketing screenshots for iOS/Android apps, or scaffolding a screenshot editor with Next.js. Triggers on app store, play store, screenshots, marketing assets, html-to-image, phone mockup, android screenshots, feature graphic.
What it can touch
The skill drops files into public/screenshots and public/; places app-icon.png in public/; creates or updates app-store-screenshots.json; and starts a dev server. It relies on the project’s package manager to install dependencies.
Caveats
- The editor’s template includes internal UI and export logic; the user should review app-store-screenshots.json after migration.
- If an older project is detected, a migration path is available (requires user confirmation in Step 1). The migration replaces the UI with the current template while preserving user assets where possible.
- The summary mentions a migration flow that preserves assets and merges package metadata without overwriting template-critical scripts.
- License is MIT as declared in the project metadata.
# App Store & Google Play Screenshots Generator ## Overview Scaffold a pre-built Next.js + ShadCN editor that lets the user design and export App Store **and** Google Play screenshots as **advertisements** (not UI showcases). The editor handles all the heavy lifting: - Connected live preview at the canvas's true resolution (scaled to fit) - Drag-to-reorder screens, inline text editing, layout switcher per screen - Cross-screen mockups: phone/device frames, captions, and layered elements can be moved across adjacent screens, then exported as clipped crops - Drop-target screenshot picker (file → saved to `public/screenshots/uploaded/<hash>.png`) - Auto-save to **`app-store-screenshots.json`** at the project root (git-trackable) + `localStorage` mirror - Easy iOS ↔ Android platform switch — separate slide decks live side by side - One-click bulk PNG export at every Apple/Google-required resolution via `html-to-image` - Light/dark variant toggle per slide, theme presets, locale select - Guided in-place migration for older projects created by this skill; passive and explicit migrations keep legacy decks isolated until the user intentionally opts into connected canvas Supported devices o
- Overview
- Core Principle
- What This Skill Does
- Step 0: Probe for Existing Screenshot Projects
- Migration Path (When User Says Yes)
- Step 1: Gather Input (Before Scaffolding)
- Required
- Optional
- Step 2: Scaffold the Template
- Detect Package Manager
- Copy the Template
- Install Dependencies
- Drop the User's Assets
- (Optional) Seed Initial Copy
test -f package.json && sed -n '1,220p' package.json test -f app-store-screenshots.json && sed -n '1,120p' app-store-screenshots.json find public -maxdepth 4 \( -path "*/screenshots*" -o -name "mockup.png" -o -name "app-icon.png" \) -print 2>/dev/null mkdir -p "$BACKUP_DIR" cp -R app-store-screenshots.json public src package.json tailwind.config.ts next.config.mjs "$BACKUP_DIR/" 2>/dev/null || true mkdir -p "$PRESERVE_DIR" cp app-store-screenshots.json "$PRESERVE_DIR/" 2>/dev/null || true cp -R public/screenshots "$PRESERVE_DIR/screenshots" 2>/dev/null || true cp public/app-icon.png "$PRESERVE_DIR/app-icon.png" 2>/dev/null || true cp -R "<SKILL_DIR>/template/." "$PWD/"
What does the app-store-screenshots skill do?
Use when building App Store or Google Play screenshot pages, generating exportable marketing screenshots for iOS and/or Android apps, or scaffolding a screenshot editor with Next.js. Triggers on app store, play store, screenshots, marketing assets, html-to-image, phone mockup, android screenshots, feature graphic.
How do I install it?
Run `npx skills add ParthJadhav/app-store-screenshots --skill app-store-screenshots --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From ParthJadhav/app-store-screenshots, a repository with 6,251 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.