App Store Screenshots

App Store & Google Play Screenshots Generator

Build a Next.js application for creating exportable App Store and Google Play marketing screenshots across multiple device types and platforms.

Core Philosophy

"Screenshots are advertisements, not documentation. Every screenshot sells one idea."

Key Capabilities

Supports rendering screenshots for:

• iPhone (portrait with mockup.png frame)
• iPad (portrait, CSS-rendered frame)
• Android Phone (portrait, CSS-rendered)
• Android Tablets (7" and 10", portrait + landscape)
• Google Play Feature Graphic (1024×500 banner)

Core Workflow

Before coding, gather these inputs:

1. Screenshot image locations
2. App icon PNG path
3. Brand colors (accent, text, background)
4. Typography selection
5. Feature prioritization
6. Desired slide count
7. Visual style direction
8. Target platform(s)
9. Language localization needs
10. Theme customization preferences

Technical Foundation

Uses html-to-image for export, not html2canvas, due to superior CSS handling.

Critical implementation patterns:

• Pre-load images as base64 data URIs to prevent non-deterministic fetch failures
• Double-call export technique (first warm-up, second production)
• Device-agnostic width formulas that scale proportionally across canvas sizes
• Slide factory pattern for reusable device-specific templates

Canvas Dimensions

Design at largest resolution per category; exports scale down automatically:

| Device | Dimensions | |--------|-----------| | iPhone | 1320×2868px | | iPad | 2064×2752px | | Android phone | 1080×1920px | | Android tablets (portrait) | 1200×1920 and 1600×2560 | | Android tablets (landscape) | 1920×1200 and 2560×1600 | | Google Play Feature Graphic | 1024×500px |

Layout Patterns

• Portrait phones: device centered, slightly lower than canvas center
• Landscape tablets: caption occupies left 34%, device on right with negative space
• Visual variation: layouts differ between adjacent slides to avoid templated feel

Architecture

The entire generator lives in a single page.tsx with:

• Canvas dimensions matching the largest required resolution per device
• Width formula functions that scale device frames proportionally
• Device components using CSS frames (Android, iPad) or PNG mockups (iPhone)
• Slide factories accepting a device component and returning reusable slide definitions
• Pre-loaded image cache converting all assets to base64 data URIs

Export Strategy

// Double-call pattern — first primes fonts/images, second produces clean output
async function exportSlide(element: HTMLElement): Promise {
  await toPng(element); // warm-up call
  return toPng(element); // production call
}

This prevents blank or transparent regions common in single-pass exports.

Additional Features

• Localization with RTL text direction support
• Theme presets
• Bulk export with numbered filenames for correct sorting

Implementation Notes

• Never use html2canvas — use html-to-image instead
• Pre-convert all images (screenshots, icon) to base64 before rendering
• Landscape tablet slides exclusively use caption-left + device-right composition
• Avoid repeated layouts on adjacent slides

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: ariadoss
• Source: ariadoss/superskills
• License: MIT

Install and usage instructions live in the source repository linked above.