Agent skill · design visual · aiskillstore
app-store-screenshots
Use when building App Store screenshot pages, generating exportable marketing screenshots for iOS apps, or creating programmatic screenshot generators with Next.js. Triggers on app store, screenshots, marketing assets, html-to-image, phone mockup.
Why this skill is useful
Provides a detailed workflow for generating marketing screenshots using Next.js and specific design principles that the AI wouldn't reliably generate on its own.
What it needs
Requires bun, npm, pnpm, yarn installed locally. About 8k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
App Store Screenshots Generator Overview Build a Next.js page that renders iOS App Store screenshots as advertisements (not UI showcases) and exports them via html-to-image at Apple's required resolutions. Screenshots are the single most important conversion asset on the App Store. Core Principle Screenshots are advertisements, not documentation. Every screenshot sells one idea. If you're showing UI, you're doing it wrong — you're selling a feeling, an outcome, or killing a pain point. Step 1: Ask the User These Questions Before writing ANY code, ask the user all of these. Do not proceed until you have answers: Required 1. App screenshots — "Where are your app screenshots? (PNG files of actual device captures)" 2. App icon — "Where is your app icon PNG?" 3. Brand colors — "What are your brand colors? (accent color, text color, background preference)" 4. Font — "What font does your app use? (or what font do you want for the screenshots?)" 5. Feature list — "List your app's features in priority order. What's the #1 thing your app does?" 6. Number of slides — "How many screenshots do you want? (Apple allows up to 10)" 7. Style direction — "What style do you want? Examples: warm/organic, dark/moody, clean/minimal, bold/colorful, gradient-heavy, flat. Share App Store screenshot references if you have any." Optional 8. Component assets — "Do you have any UI element PNGs (cards, widgets, etc.) you want as floating decorations? If not, that's fine — we'll skip them." 9. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/app-store-screenshots--45f51a