The Problem

Designing App Store and Google Play screenshots today requires manually assembling device frames, adjusting copy for each locale, and exporting correctly sized PNG bundles. Teams often end up with inconsistent assets, duplicated effort across platforms, and no way to iteratively refine a deck without starting over.

What This Does

This repo supplies a full‑screen editor that a coding agent can scaffold on demand. The core lives in skills/app-store-screenshots/template/: a Next.js app (src/app/page.tsx) that renders a connected canvas, device‑frame components (components/editor/device-frames.tsx), an inspector panel (components/editor/inspector.tsx), and a slide‑sidebar (sidebar.tsx). Project state is persisted to app-store-screenshots.json via the API route src/app/api/project/route.ts and mirrored to localStorage for instant reloads. Uploaded source screenshots land in public/screenshots/uploaded/<hash>.png through src/app/api/upload/route.ts. Export generates a zip organized by platform, device, resolution, and locale (README describes the one‑click bundle). Style‑prompt files under skills/app-store-screenshots/style‑prompts/ let you reuse themes or tailor RTL‑aware layouts.

How It Is Wired

  • Entry point – the skills CLI (or npx skills add https://github.com/moses-y/app-store-screenshots) registers the skill and creates the template folder. Running npm run dev inside skills/app-store-screenshots/template/ starts the Next.js dev server.
  • State flow – src/lib/storage.ts reads/writes app-store-screenshots.json; the inspector updates React state that flows into src/lib/types.ts definitions. Autosave calls POST /api/project (route src/app/api/project/route.ts).
  • Upload – users drag source images into the picker (components/editor/screenshot-picker.tsx), which posts to POST /api/upload (src/app/api/upload/route.ts); saved files are placed under public/screenshots/uploaded/.
  • Export – the toolbar’s export button triggers a client‑side function that zips cropped PNGs for each platform/device; the logic resides in src/lib/utils.ts (export‑related helpers).
  • External touches – the only network write is the upload POST; the only filesystem writes are the JSON state file and the uploaded PNGs under public/. No external APIs or databases are used beyond the local server.

How To Use It

Setup

# Install the skill for the current agent (e.g., Claude Code)
npx skills add https://github.com/moses-y/app-store-screenshots
# or clone manually
git clone https://github.com/moses-y/app-store-screenshots ~/.claude/skills/app-store-screenshots

Configuration No environment variables or API keys are required. The template’s package.json lists next, react, tailwindcss, and related dev dependencies; install them with pnpm install (or npm install) inside the template folder.

Running it

cd skills/app-store-screenshots/template
pnpm install
pnpm run dev   # starts Next.js at http://localhost:3000

Prompt the agent: “Build App Store screenshots for my habit tracker. I want 6 slides, clean minimal style, warm neutrals, and a calm premium feel.” The skill will scaffold the editor; you can then adjust style prompts, add screenshots via the UI, and export the bundle.

Real‑World Use

A product team preparing a launch for a new meditation app uses the skill to generate a six‑slide iOS deck. They select the “clean‑light” theme from skills/app-store-screenshots/style‑prompts/01-retro-rubberhose-mascot.md, upload iPhone 13 simulator screenshots, tweak headline copy in the inspector, and export. The resulting zip contains @2× and @3× PNGs for iPhone, iPad, and the App Store’s required sizes, ready for submission.

Code Health & Issues

  • Med – No CI/CD pipeline detected; .github/ contains only issue templates and a funding file, no automated build/test gate.
  • Low – Root‑level dependencies are declared without a lockfile; skills/app-store-screenshots/template/package.json lists dependencies but the only lockfile present is bun.lock inside the template, leaving the root non‑reproducible across npm/pnpm installs.

The Bottom Line

The repo delivers a ready‑made, editor‑first scaffold for App Store & Google Play screenshots, eliminating the manual stitching of frames and exports. Its strength lies in the connected canvas, persistent JSON state, and themable style prompts. Gaps are the absent CI/CD loop and the missing root lockfile, which should be added for reproducible builds and automated quality gates. Teams that need quick, iteratively editable screenshot decks will find it practical; organizations requiring strict CI integration may need to supply their own pipeline.