skills.rest
MoizIbnYousaf
MoizIbnYousafCOMMUNITY
Explore all skills by this author →
Website𝕏@MoizIbnYousafGitHub

app-store-screenshots

Generate Apple App Store screenshot pages as a Next.js app with html-to-image export at required resolutions.

31|5|Updated Mar 12, 2026
Search Tags:#screenshots#next.js#ios#app store#mockup#aso#html-to-image
One-click install
npx skills add https://github.com/MoizIbnYousaf/marketing-cli --skill app-store-screenshots-moizibnyousaf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: app-store-screenshots
Source: https://github.com/MoizIbnYousaf/marketing-cli/tree/main/skills/app-store-screenshots
Command: npx skills add https://github.com/MoizIbnYousaf/marketing-cli --skill app-store-screenshots-moizibnyousaf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires html-to-image, next, react, and includes assets (resource) components.

What problem does it solve? Creating App Store screenshots that actually convert requires design skill, correct Apple resolutions, and tedious manual resizing. This Skill builds a reusable Next.js generator that renders marketing-focused screenshot slides and exports them at every Apple-required size. ## Core Features & Use Cases - Programmatic Screenshot Generator: Scaffolds a single-file Next.js page with pre-measured iPhone mockup and CSS-only iPad frame components. - Copy-First Workflow: Guides headline writing with narrative arc frameworks (hero, differentiator, features, trust signal) before any layout work. - Multi-Resolution Export: Uses html-to-image to export at Apple-required sizes (1320x2868, 1284x2778, 2064x2752, and more) with numbered filenames. - Use Case: You are about to submit an iOS app and need polished store assets. The Skill gathers your screenshots, brand colors, and fonts, then produces a permanent generator you can rerun whenever screenshots change. ## Quick Start Ask the agent to generate App Store screenshots for your iOS app using your device captures, app icon, and brand colors.

Frequently Asked Questions about app-store-screenshots

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create App Store screenshots programmatically?▼

Build a Next.js page that renders each screenshot slide as a React component, then export with html-to-image at Apple's required resolutions. Design at the largest size (1320x2868) and scale down for smaller device slots.

What sizes are required for App Store screenshots?▼

Apple requires 1320x2868 for 6.9-inch iPhones, 1284x2778 for 6.5-inch, 1206x2622 for 6.3-inch, and 1125x2436 for 6.1-inch displays. iPad screenshots use 2064x2752 for 13-inch and 2048x2732 for 12.9-inch iPad Pro.

Why use html-to-image instead of html2canvas for exports?▼

html2canvas breaks on CSS filters, gradients, drop-shadows, backdrop-filter, and complex clipping. html-to-image uses native browser SVG serialization, which handles all CSS faithfully for clean screenshot exports.

Why are my html-to-image exports blank?▼

Blank exports happen because fonts and images load lazily. Use the double-call trick: call toPng once to warm up resources, then call it again for clean output, and move the element on-screen before capturing.

Can I generate iPad App Store screenshots without a mockup image?▼

Yes, the iPad frame is rendered with CSS only using a 770/1000 aspect ratio container with a bezel gradient and camera dot. No mockup PNG is needed, and the inner screen area matches the 3:4 iPad screenshot ratio.

Related Skills

Explore More Marketing & Sales Skills→
n0ann0an
103

ios-log-capture

Capture and analyze iOS console logs from Simulator or devices using native tools.

Community
Intermediate
entaku0818entaku0818
2

fastlane-release

Automate iOS app release from versioning to App Store Connect submission.

Community
Advanced
exiaoexiao
37

aso-audit

Audit mobile app store listings and generate weighted ASO scores.

Community
Advanced
GregTheGreekGregTheGreek
14

figma-to-code

Convert Figma designs into React/Next.js code with metadata extraction and variant mapping.

Community
Advanced