Agent skill · design visual · aradotso
app-store-screenshots-generator
Generate production-ready App Store screenshots for iOS apps using AI agents, Next.js, and html-to-image
Why this skill is useful
Adds a complete Next.js project scaffold with custom screenshot generation logic and export capabilities for App Store assets.
What it needs
Requires html-to-image, next installed locally. About 8k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
App Store Screenshots Generator Skill by ara.so — Daily 2026 Skills collection. A skill for AI coding agents (Claude Code, Cursor, Windsurf, Codex, etc.) that generates production-ready App Store screenshots for iOS apps. It scaffolds a Next.js project, designs advertisement-style slides, and exports PNGs at all required Apple resolutions. What This Skill Does Asks about your app's brand, features, and style preferences before building anything Scaffolds a minimal Next.js + TypeScript + Tailwind project Designs each screenshot as an advertisement (not a UI showcase) Writes compelling copy using proven App Store copywriting patterns Renders screenshots with a built-in iPhone mockup frame Exports PNGs at all 4 Apple-required sizes (6.9", 6.5", 6.3", 6.1") Supports multi-locale screenshot sets, RTL-aware layouts, and reusable theme presets Install Using npx skills (recommended) Manual install Usage Once installed, just describe what you need: The agent will ask clarifying questions about brand colors, fonts, features, style direction, number of slides, and locales before generating anything. Project Structure The skill scaffolds this layout: The entire generator lives in a single page.tsx file. Run the dev server, open the browser, and click any screenshot to export it as a PNG. Core page.tsx Pattern Multi-Locale Setup Organize screenshots under locale folders and swap the base path: Dependencies (package.json) Starting the Dev Server The skill auto-detects your package manager (bun preferred): Then open http://localhost:3000 to view the screenshot generator. Export Sizes Reference Display Width Height Notes --------- ------- -------- ------- 6.9" 1320px 2868px Design base size 6.5" 1284px 2778px Scale: 0.973 6.3" 1206px 2622px Scale: 0.914 6.1" 1125px 2436px Scale: 0.852 Note: Use a 6.1" simulator to capture your initial app screenshots — this avoids resolution adjustments later. Design Principles the Agent Follows 1. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/app-store-screenshots-generator