app-store-screenshots
Generate production-ready App Store marketing screenshots for iOS apps using a Next.js generator. Screenshots are designed as ads (not UI showcases) and exported at all 4 Apple-required sizes (6.9", 6.5", 6.3", 6.1"). Use when asked to create App Store screenshots, generate marketing screenshot assets, or build a screenshot page for an iOS app.
Best use case
app-store-screenshots is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Generate production-ready App Store marketing screenshots for iOS apps using a Next.js generator. Screenshots are designed as ads (not UI showcases) and exported at all 4 Apple-required sizes (6.9", 6.5", 6.3", 6.1"). Use when asked to create App Store screenshots, generate marketing screenshot assets, or build a screenshot page for an iOS app.
Teams using app-store-screenshots should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/app-store-screenshots/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How app-store-screenshots Compares
| Feature / Agent | app-store-screenshots | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Generate production-ready App Store marketing screenshots for iOS apps using a Next.js generator. Screenshots are designed as ads (not UI showcases) and exported at all 4 Apple-required sizes (6.9", 6.5", 6.3", 6.1"). Use when asked to create App Store screenshots, generate marketing screenshot assets, or build a screenshot page for an iOS app.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# App Store Screenshots Generator Generates marketing screenshots for the App Store — advertisement-style, not UI showcases. Scaffolds a Next.js project with an iPhone mockup, renders at Apple's required resolutions, and exports PNGs via `html-to-image`. **Source:** https://github.com/ParthJadhav/app-store-screenshots **Installed at:** `~/.claude/skills/app-store-screenshots` ## Export Sizes | Display | Resolution | |---------|-----------| | 6.9" | 1320×2868 | | 6.5" | 1284×2778 | | 6.3" | 1206×2622 | | 6.1" | 1125×2436 | > **Note:** Use a 6.1" simulator to capture starting screenshots to avoid resizing issues. ## Key Design Principles - Screenshots are **ads, not docs** — each slide sells one idea - Copy follows the "one second" rule — readable at thumbnail size - Layouts vary — no two adjacent slides share the same phone placement - Style is user-driven — no hardcoded colors, fonts, or gradients ## How to Use Delegate to Claude Code via acpx from the Bloom repo (or any project with the screenshots output dir): ```bash cd ~/bloom # or wherever the screenshots should live acpx --approve-all claude 'Build App Store screenshots for the Bloom app. Use the app-store-screenshots skill. Required context: - App screenshots: [path to raw simulator screenshots] - App icon: [path to app icon PNG] - Brand colors: #your-color, white text on dark bg - Font: [font name] - Features (priority order): [list] - Number of slides: 6 - Style: clean/minimal, dark mode preferred When done, run: openclaw gateway wake --text "App Store screenshots done. Output in [dir]" --mode now ``` ## What Gets Scaffolded ``` project/ ├── public/ │ ├── mockup.png # iPhone frame (copied from skill) │ ├── app-icon.png # Your app icon │ └── screenshots/ # Your raw app screenshots ├── src/app/ │ ├── layout.tsx # Font setup │ └── page.tsx # Screenshot generator (single file) └── package.json ``` Run the dev server, open `http://localhost:3000/__design_lab`, click any screenshot to export as PNG. ## Requirements - Node.js 18+ (bun preferred) - Raw simulator screenshots at 6.1" (1125×2436)
Related Skills
app-store-connect
Use the asc CLI for all App Store Connect tasks — releases, TestFlight, builds, metadata, screenshots, signing, subscriptions, IAPs, pricing, analytics, users, notarization, and more. Primary catch-all for any App Store Connect work. For deep workflows, also see specialized asc-* skills.
writer
Write content in Eric's voice — articles, blog posts, tweets, social media posts, marketing copy, newsletter drafts. Loads WRITING-STYLE.md and enforces kill phrases.
positioning-angles
Use when defining product positioning, choosing strategic angles, crafting value propositions, competitive positioning, product messaging, differentiation strategy, or go-to-market angles. Also use for 'how should I position my app', 'what angle should I use', 'painkiller vs vitamin', or 'market positioning'.
outline-generator
Use when generating outlines, article structures, content outlines, blog outlines, planning article sections, structuring posts, breaking down topics into sections, or organizing ideas for long-form content. Also use for 'outline this', 'structure this article', or 'plan the sections'.
last30days-open
Use only when the user explicitly asks for the open variant of last30days, including watchlists, briefings, and history queries. Sources: Reddit, X, YouTube, web.
last30days
Use when researching what happened in the last 30 days on a topic. Also triggered by 'last30'. Sources: Reddit, X, YouTube, web. Produces expert-level summary with copy-paste-ready prompts.
hooks
Use when generating hooks, headlines, titles, and scroll-stopping openers for content. Also use when analyzing viral posts, Reels, TikToks, YouTube Shorts, or successful social examples to extract reusable hook patterns and improve hook guidance.
evaluate-content
Use when judging content quality OR editing/improving existing copy: shareability, readability, voice, cuttability, angle, copy sweeps.
editor-in-chief
Use when a first draft is complete and all Phase 1 gates are done: topic selected (seo-research), title approved (hooks), outline approved (outline-generator), draft written (writer). Runs autonomous diagnosis-prescribe-rewrite loop before Substack.
copywriting
Write or improve marketing copy for any surface: pages, ads, app stores, landing pages, TikTok/Meta scripts, push notifications, UGC. Combines page copy frameworks with direct response principles.
content-strategy
Use when building content strategy: hooks, angles, and ideas from what's trending now. Covers organic and paid creative across TikTok, X, YouTube, Meta, LinkedIn.
content-pipeline
Orchestrator for the 3-article content pipeline — runs research phase, spawns parallel article sub-agents, creates Typefully drafts. Use when running the full content pipeline (usually via cron at 3am).