# App Store Screenshots

> Generate App Store and Google Play marketing screenshots using Next.js. Use when the user wants to create app store screenshots, marketing screenshots, or device mockup exports for iOS, iPad, or Android.

- **Type:** Skill
- **Install:** `agentstack add skill-ariadoss-superskills-app-store-screenshots`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ariadoss](https://agentstack.voostack.com/s/ariadoss)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [ariadoss](https://github.com/ariadoss)
- **Source:** https://github.com/ariadoss/superskills/tree/main/design-skills/app-store-screenshots

## Install

```sh
agentstack add skill-ariadoss-superskills-app-store-screenshots
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

```typescript
// 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](https://github.com/ariadoss)
- **Source:** [ariadoss/superskills](https://github.com/ariadoss/superskills)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-ariadoss-superskills-app-store-screenshots
- Seller: https://agentstack.voostack.com/s/ariadoss
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.