skills.rest
cenjie
cenjieCOMMUNITY
Explore all skills by this author →
GitHub

app-store-screenshots

Generate App Store marketing screenshots from design and device assets via Next.js.

Updated May 17, 2026
Search Tags:#screenshots#marketing#nextjs#export#app-store#mockup#html-to-image
One-click install
npx skills add https://github.com/cenjie/skills --skill app-store-screenshots-cenjie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: app-store-screenshots
Source: https://github.com/cenjie/skills/tree/main/skills/app-store-screenshots
Command: npx skills add https://github.com/cenjie/skills --skill app-store-screenshots-cenjie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines creating App Store marketing screenshots by converting raw device captures, app icons, brand tokens, and copy into export-ready images sized for Apple's requirements, removing the guesswork from layout, typography, and export fidelity.

Core Features & Use Cases

  • Next.js single-file generator: A single page approach that composes slides, applies mockups, and renders previews suitable for html-to-image export.
  • Design and export pipeline: Resolution-first design at 1320x2868 with typographic scaling, device mockups, decorative elements, and the html-to-image double-call export flow for reliable, production-quality PNGs.
  • Use Case: Turn a set of iPhone screenshots and an app icon plus brand guidelines into a 5-slide App Store screenshot set optimized for conversion and ready for App Store Connect upload.

Quick Start

Create a Next.js screenshots page that ingests my app icon and device screenshots, applies the selected style and copy, and exports four iPhone marketing screenshots at 1320x2868.

Frequently Asked Questions about app-store-screenshots

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

FAQPage Schema
How do I generate App Store screenshots with Next.js at the required resolution?▼

This Skill builds a single-page Next.js generator that composes slides, applies device mockups, and exports full-resolution iPhone App Store screenshots at 1320x2868 using the html-to-image library.

What is the html-to-image double-call trick for exporting marketing screenshots?▼

The html-to-image double-call trick is an on-screen capture method that renders the target element twice to ensure reliable, production-quality PNG exports without layout or typography drift in marketing screenshots.

Can I batch export iPad marketing screenshots alongside iPhone images?▼

Yes, the generator supports batch-exporting optional iPad marketing images at 2064x2752 alongside the standard 1320x2868 iPhone screenshots for App Store listings and promotional campaigns.

Do I need to provide my own device mockups and app icons for App Store screenshot generation?▼

Yes, you must provide raw device captures, app icons, and brand tokens as input assets. The generator composes these with configurable typography and slide templates to produce conversion-optimized App Store images.

Why do my exported App Store screenshots have misaligned typography and layout?▼

Misaligned typography in exported App Store screenshots typically stems from rendering timing issues. Using resolution-first typographic scaling and the html-to-image double-call export flow prevents these layout drifts.

Related Skills

Explore More Design & Creative Skills→
OMIXECOMIXEC
1

app-store-screenshots

Generate App Store screenshots from a Next.js workflow with html-to-image.

Community
Advanced
bocanbocan
27

in-app-events

Generate App Store Connect in-app event metadata templates with image specifications.

Community
Intermediate
coreyhaines31coreyhaines31
552

slide-deck

Create and convert branded React slide decks to HTML, PDF, or Vercel.

Community
Advanced
ma08ma08
28

imagegen

Generate and edit digital images using the OpenAI Python SDK.

Community
Advanced