App Store Screenshots

App Store Screenshots — capture → frame → upload

Battle-tested end to end on a shipping game (SAPPER, 2026): 7 shots × 10 languages × iPhone + iPad = 140 frames, replaced across 39 App Store Connect locales and resubmitted for review in one day.

The philosophy: App Store screenshots are marketing frames, not raw UI — a big localized headline over a device mock containing a real, localized, real-data capture. Keep three independent layers so each can change cheaply:

1. Raw captures — slow to make, often not regenerable (live data, daily seeds). Archive them in git. 2. Captions + design config — one JSON for all locales and shots. 3. Compositor — scripts/generate.py re-renders every frame in minutes after any copy or design tweak. No recapture needed.

Prerequisites

• Xcode + iOS simulators for the target devices (iPhone 17 Pro Max class

for 6.9", iPad Pro 13" class) — captures use xcrun simctl.

• [XcodeBuildMCP](https://github.com/cameroncooke/XcodeBuildMCP) CLI

(brew install cameroncooke/xcodebuildmcp/xcodebuildmcp) — provides element-ref UI automation (xcodebuildmcp ui-automation snapshot-ui/tap) and bundles the AXe binary the capture scripts depend on, at /opt/homebrew/Cellar/xcodebuildmcp/<ver>/libexec/bundled/axe. (Alternative: install AXe standalone — brew install cameroncooke/axe/axe.)

• [asc CLI](https://github.com/rorkai/App-Store-Connect-CLI), authenticated

against the App Store Connect API — uploads, localizations, builds, review submissions.

• Google Chrome — headless renderer for the frame compositor.
• Python 3 — capture loops, compositor, verification (stdlib only).
• A DEBUG build of the app with a screenshot-mode launch flag (see

Phase 1) installed on the simulators.

References (read the one matching your phase)

• references/sizes-and-devices.md — simulators, exact pixel sizes, ASC

display types, device-mock CSS values, type scale tables

• references/captions.md — caption anatomy, the narrative arc,

transcreation rules per locale (glossary, line breaks, CJK), captions.json

• references/capture-locales.md — per-locale capture loops, iPhone vs iPad

differences, state discriminators, every automation gotcha

• references/compositor.md — the HTML/CSS frame generator, auto-fit and

auto-push JS (with the bugs they prevent), render command, review checklist

• references/asc-upload.md — locale mapping table, the fan-out abort gotcha

+ mandatory verification, review-submission rebuild (incl. Game Center)

Bundled scripts (copy into the app's repo and adapt)

• scripts/generate.py — the frame compositor (HTML/CSS → headless Chrome)
• scripts/captions.example.json — the copy/config data shape
• scripts/loop_locales_skeleton.py — per-locale capture loop with the

battle-tested helpers (frame-targeted taps, state assertions, retries)

• scripts/verify_asc_screenshots.py — post-upload per-locale verification

Phase summary

0 — Plan. 5–7 shots, caption-led, arc: hook → core choice → retention → secondary mode → social → monetization → trust. Background colors rotate through the app's own palette, never repeating adjacently. No prices in screenshots (they vary by storefront and drift). Captions transcreated per locale with explicit line breaks.

1 — Prepare the app. Add a DEBUG-only launch flag (e.g. -MarketingScreenshots YES) that: hides store prices behind a neutral localized tag; forces the accessibility overlay on custom-drawn surfaces so automation can read them. Make sure a debug menu can reset/replay any state you need to capture.

2 — Capture iPhone. Use a sim whose native screenshot IS the store size (no resizing, ever). Build each app state once in English, then per locale: background the app (state saves on backgrounding!) → terminate → relaunch with -AppleLanguages "(xx)" -AppleLocale xx_XX → re-shoot with locale-independent navigation. Clean status bar via simctl status_bar.

3 — Capture iPad. Same flow, three traps: axe button home is a silent no-op (use button lock to background); the status bar shows a date in the SYSTEM language (switch .GlobalPreferences + reboot per locale); all layout metrics differ from iPhone — re-probe everything.

4 — Frame. generate.py + captions.json → headless Chrome at exact store resolution. Auto-fit shrinks long headlines; auto-push moves the device below wrapping subs. Validate every PNG's dimensions; eyeball the longest Latin locale and one CJK locale on every shot type.

5 — Upload. Stage a hardlink tree keyed by ASC locale codes (app languages fan out: en serves en-US/GB/AU/CA + all store-only locales). Upload with --replace to the display types the listing ALREADY uses. The fan-out aborts all remaining locales on the first delivery failure while exiting 0 — run verify_asc_screenshots.py and re-run the gaps.

6 — Resubmit (if a review was pending). Save the pending submission's item IDs → cancel → new build + screenshots → attach build → recreate submission → re-add every item (the appStoreVersions item only attaches after screenshot assets finish processing — add it last) → audit the count → submit.

Hard-won rules (apply everywhere)

• Frame-target every tap from axe describe-ui output; fixed coordinates

break across locales and states.

• The accessibility tree contains ALL layers at once — find a geometric

discriminator (e.g. a known card's y-position) to assert which screen you're on, and verify after every navigation.

• The first tap after a cold launch or transition is often eaten: retry loops

with state assertions, never fire-and-forget.

• Long-press = separate touch --down, real sleep, touch --up. The

single-command delay form sometimes registers as a tap.

• After any swipe, wait until two consecutive position reads agree before

computing tap targets (content decelerates).

• Anything that reads localized a11y labels (solvers, content checks) runs in

English only; per-locale passes navigate by geometry.

• Verification is part of every phase: look at the captures with your eyes,

measure the frames, list the uploads. Every silent failure we hit was caught by checking, not by exit codes.

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

What This Repo Is

This is a Claude Code skill (not an application). It documents and tools an end-to-end pipeline for producing localized, caption-framed App Store screenshots (iPhone + iPad) and replacing them on App Store Connect. Installed via npx skills add framara/app-store-screenshots-skill.

Repository Structure

• SKILL.md — the entry point Claude Code reads when the skill activates: prerequisites, the six-phase summary, the hard-won automation rules, and the routing list to references.
• references/ — five phase-specific deep dives (sizes-and-devices, captions, capture-locales, compositor, asc-upload). SKILL.md routes to these; keep the routing list in sync.
• scripts/ — working code meant to be COPIED into an app's repo and adapted: generate.py (frame compositor), captions.example.json (data shape), loop_locales_skeleton.py (per-locale capture loop), verify_asc_screenshots.py (post-upload verification).
• assets/ — README imagery only.

Editing Guidelines

• SKILL.md stays concise — it loads into context on every activation. Depth belongs in references/.
• Every rule in SKILL.md's "Hard-won rules" section was learned from a real failure; don't soften or remove them without strong evidence the underlying behavior changed.
• Scripts are stdlib-only Python by design (plus external CLIs: axe, asc, simctl, Chrome). Keep them dependency-free.
• Sizes, display types, and CLI flags drift with new devices and tool versions — when updating, verify against asc screenshots sizes --all and the current ASC API rather than trusting the tables.

app-store-screenshots-skill

A Claude Code skill for producing localized, caption-framed App Store screenshots (iPhone + iPad) from real simulator captures, and replacing them on App Store Connect.

Battle-tested end to end on a shipping game: 7 shots × 10 languages × iPhone + iPad = 140 frames, uploaded across 39 ASC locales and resubmitted for review in a single day.

!Before / after

What's included

The playbook covers six phases, each with a detailed reference:

• Sizes & devices — exact capture resolutions (1320×2868 / 2064×2752),

which simulators produce them natively, ASC display-type mapping, and the device-mock CSS values that shipped

• Captions — caption anatomy (eyebrow / headline / sub), a 7-shot

narrative arc, and transcreation rules per locale: app-glossary reuse, explicit per-locale line breaks, CJK sizing, formality

• Capture per locale — build app state once, re-shoot per language via

backgrounding + relaunch with locale args; iPhone vs iPad differences (lock-button backgrounding, system-language reboots for the iPad date); every accessibility-automation gotcha we hit

• Compositor — an HTML/CSS frame generator rendered by headless Chrome at

exact store resolution, with headline auto-fit and copy/device overlap auto-push

• ASC upload — app-language → 39-locale fan-out mapping, uploading to the

display types the listing already uses, and the silent fan-out-abort gotcha with a mandatory verification script

• Review resubmission — cancel/rebuild a pending submission without

losing Game Center items

Plus working scripts to copy into an app's repo: the compositor (scripts/generate.py), the captions data shape, a per-locale capture loop skeleton with all the hardened helpers, and the post-upload verifier.

Prerequisites

• Xcode + iOS simulators (iPhone 6.9" and iPad 13" classes)
• XcodeBuildMCP CLI

(brew install cameroncooke/xcodebuildmcp/xcodebuildmcp) — UI automation + bundles the AXe binary the capture scripts use

• asc CLI, authenticated
• Google Chrome (headless frame rendering)
• Python 3 (stdlib only)

Installation

npx skills add framara/app-store-screenshots-skill

To install globally (all projects):

npx skills add framara/app-store-screenshots-skill -g

Usage

Once installed, Claude Code uses this skill automatically when you ask things like:

• "Create App Store screenshots for my app in all our languages"
• "Redesign my store screenshots with captions, iPhone and iPad"
• "Replace the screenshots on App Store Connect and resubmit"

Philosophy

App Store screenshots are marketing frames, not raw UI: a big localized headline over a device mock containing a real, localized, real-data capture. The pipeline keeps three layers independent so each changes cheaply:

1. Raw captures — slow to make, often not regenerable; archived in git 2. Captions + design config — one JSON for all locales and shots 3. Compositor — re-renders all frames in minutes after any copy tweak

License

MIT

Uploading to App Store Connect (and resubmitting for review)

Locale mapping: app languages → ASC locales

ASC versions can have ~39 localizations; an app usually translates ~10. Stage an upload tree whose children are ASC locale codes, mapping each app-language screenshot set to every ASC locale it should serve, with English covering all store-only locales:

Get the authoritative locale list first: asc localizations list --version <VERSION_ID> --output json.

Stage with hardlinks (instant, no disk cost):

os.link(f"v2/{app_loc}/{dev}/{f}", f".upload/{asc_loc}/{dev}/{f}")

Upload (fan-out mode)

asc screenshots upload --app $APP_ID --version-id $VERSION_ID \
  --path .upload --device-type IPHONE_67 --replace
asc screenshots upload --app $APP_ID --version-id $VERSION_ID \
  --path .upload --device-type IPAD_PRO_3GEN_129 --replace

• --replace deletes the set's existing screenshots first (clean swap).
• Use the display types the listing ALREADY uses (see sizes-and-devices.md).
• Screenshots are only editable when the version is editable — a version in

WAITING_FOR_REVIEW must have its review submission canceled first.

⚠️ The fan-out abort gotcha (cost us ~20 locales silently)

On the first asset delivery failure, the CLI abandons ALL remaining locales in the list — and still exits 0, writing only a failure artifact for the one file. --resume <artifact> completes only THAT locale, not the rest.

So verification is mandatory, not optional:

for locale, loc_id in localizations:           # all ~39
    sets = asc_screenshots_list(loc_id)
    for display_type in (IPHONE, IPAD):
        assert count == N_SHOTS
        assert filenames == sorted(filenames) and filenames[0] == "01-...png"
        assert all(assetDeliveryState == "COMPLETE")

Re-run only the gap locales (stage a second tree with just those). Repeat verify → fix until all green. Transient VALIDATION_JOB_FAILED deliveries usually succeed on retry; an "ordering" failure after a resume means the re-uploaded file was appended out of order — re---replace that single set (--version-localization <loc_id> --path .upload/<loc>/<dev>).

Review submission rebuild (when a submission was already pending)

The order that works:

# 1. SAVE the pending submission's items before canceling
asc review submissions-items-ids --id $OLD_SUB --output json
#    ids are base64("sub|typecode|itemUUID"); typecodes:
#    6=appStoreVersions 9=achievementVersions 11=challengeVersions 12=leaderboardVersions

# 2. cancel → version becomes editable (DEVELOPER_REJECTED)
asc review submissions-update --id $OLD_SUB --canceled=true

# 3. new build + screenshots while editable
asc xcode version bump --type build       # keep marketing version
xcodebuild clean archive ... && xcodebuild -exportArchive ...
asc builds upload --app $APP_ID --ipa $IPA          # wait for VALID
# (replace screenshots now — see above)

# 4. rebuild the submission
asc versions attach-build --version-id $VID --build $BUILD_ID
asc review submissions-create --app $APP_ID --platform IOS
asc review items-add --submission $NEW_SUB --item-type gameCenterAchievementVersions --item-id <uuid>   # × each saved item
# the appStoreVersions item is REJECTED while screenshot assets are still
# processing ("screenshot ... still in progress") — add it LAST, after the
# per-locale verification passes:
asc review items-add --submission $NEW_SUB --item-type appStoreVersions --item-id $VID

# 5. audit count matches the canceled submission, then submit
asc review submissions-items-ids --id $NEW_SUB
asc review submissions-submit --id $NEW_SUB --confirm
asc review status --app $APP_ID        # expect WAITING_FOR_REVIEW

Game Center note: an app's FIRST leaderboard/achievement/challenge versions can only ship riding an app version in the same submission — never drop them when rebuilding (an app's first GC content must ride an app version).

Archive hygiene after upload

Keep the .xcarchive (dSYMs for crash symbolication): move it to ~/Library/Developer/Xcode/Archives/<date>/App X.Y.Z (build).xcarchive so the Organizer tracks it. The IPA export dir and DerivedData can be deleted.

Writing and localizing captions

Anatomy of one shot's copy

● DAILY CHALLENGE                    ← eyebrow: 1–3 words, small caps, accent dot
Minesweeper                          ← headline line 1   (explicit line breaks,
with no edges                        ← headline line 2    stored as an array)
The farther out you sweep, the more  ← sub: one sentence, wraps freely,
every tile is worth.                    carries the explanation

• Headline = the claim. Sub = the proof/detail. Eyebrow = the category.
• Accent color on ONE headline segment max (<em> in the data), e.g. the

final line of a 3-line stack: "One board. / Everyone. / Every day."

• Voice: calm, direct, short, no exclamation marks, no em dashes, no hype

adjectives. Read each headline aloud; if it sounds like an ad, cut it.

• Numbers shown in ghost elements (oversized translucent score, ∞ glyph) must

match what the device capture actually displays.

The narrative arc that worked (adapt per app)

Backgrounds rotate through the brand palette with no adjacent repeats.

Localization = transcreation, not translation

• Brand name stays Latin in every locale.
• Mode/feature names must match the app's own String Catalog glossary

(SAPPER: Endless = es Infinito, fr Sans fin, de Endlos, it Senza fine, pt-BR Infinito, ja エンドレス, ko 엔드리스, zh-Hans 无限, zh-Hant 無限). Open Localizable.xcstrings and reuse, never invent.

• Formality must match the app: SAPPER uses French tu, German du.
• Decide line breaks per locale explicitly. "Or sweep / forever" works in

English; German needs "Oder räum / endlos weiter". Store headlines as arrays of lines, one decision per locale per shot.

• Idioms transcreate: en "Looks good on you" → pt-BR "Ficou bom em você";

en "Every run draws a map" → ja "進んだ跡が、地図になる。"

• CJK: shorter headlines, smaller base size (the glyphs are dense), reduced

eyebrow tracking (.18em vs .32em). Periods 。 count as characters — budget for them.

• Punctuation per script: Chinese comma 「，」, Japanese 「、」「。」 — don't

paste Latin punctuation into CJK lines.

• Languages that will stress the layout: German + Italian (longest words),

French (longest subs). Spot-check those plus one CJK on EVERY shot type after rendering.

Data shape (captions.json)

{
  "shots": {
    "01-hero": { "raw": "01-board.png", "style": "cream", "ghost": "dot",
                  "deviceTop": 935 },
    "02-choice": { "raw": "02-cashout.png", "style": "yellow",
                   "ghost": "score", "deviceTop": 1000, "full": true }
  },
  "baseSize": { "01-hero": 168, "02-choice": 148 },
  "cjkSize":  { "01-hero": 120, "02-choice": 116 },
  "locales": {
    "de": {
      "01-hero": { "eyebrow": "Tägliches Rätsel",
                   "h": ["Minesweeper", "ohne Ränder"],
                   "sub": "Je weiter du kommst, desto mehr ist jede Kachel wert." }
    }
  }
}

One file is the single source of truth for all copy; the compositor reads it. Store-only ASC locales (no app translation) reuse the English entries.

Capturing real localized screenshots per locale

Principle: build state once, re-shoot per locale

App state (runs, scores, banked results) persists across relaunches — but only if the app gets a chance to save. So:

1. Build each capture state ONCE (play the game, bank the score, open the right sheets) in English — any automation that reads accessibility labels (solvers, content checks) must run in English because labels localize. 2. Per locale: background the app → terminate → relaunch with locale args → navigate to the same screens with locale-independent (frame-based) taps → screenshot.

# background FIRST or the in-progress state is lost on terminate:
axe button home --udid $UDID     # iPhone
axe button lock --udid $UDID     # iPad — 'home' is a SILENT NO-OP on iPads!
sleep 2
xcrun simctl terminate $UDID $BUNDLE_ID
xcrun simctl launch $UDID $BUNDLE_ID -AppleLanguages "(de)" -AppleLocale de_DE

Locale args pairs used: en/en_US es/es_ES fr/fr_FR de/de_DE it/it_IT pt-BR/pt_BR ja/ja_JP ko/ko_KR zh-Hans/zh_CN zh-Hant/zh_TW.

iPhone vs iPad locale differences

• iPhone status bar shows only the time → app-level -AppleLanguages is

enough; the system language never appears.

• iPad status bar shows the DATE in the SYSTEM language ("Wed Jun 10" /

"Miércoles 10 de junio"). Per locale you must also switch the system:

  xcrun simctl spawn $UDID defaults write .GlobalPreferences AppleLanguages -array de
  xcrun simctl spawn $UDID defaults write .GlobalPreferences AppleLocale -string de_DE
  xcrun simctl shutdown $UDID && xcrun simctl boot $UDID   # ~20 s
  # status_bar override does NOT survive reboot — re-apply it now

• simctl launch on an already-running app does NOT relaunch it (returns the

existing pid, old language) — always terminate first.

Status bar (set once per boot)

xcrun simctl status_bar $UDID override --time 9:41 \
  --batteryState discharging --batteryLevel 100 --wifiBars 3 --cellularBars 4
# batteryState 'charged' draws a green charging bolt — don't use it

Backgrounding via opening another app (e.g. Safari) leaves a "◀ Safari" breadcrumb in the status bar of subsequent captures — use the home/lock button instead.

The per-locale loop skeleton (full version: scripts/loop_locales_skeleton.py)

for locale in LOCALES:
    background_and_terminate()           # home btn (iPhone) / lock btn (iPad)
    switch_system_language(locale)       # iPad only, includes reboot
    launch(locale); sleep(5)
    frames = describe_ui_button_frames() # axe describe-ui, retry on bad JSON
    assert on_home(frames)               # see state discriminators below
    shot(f"{locale}/00-home.png")
    tap_center(resume_card(frames))      # FRAME-TARGETED, never fixed x/y
    retry_until(in_game)                 # first tap is often eaten
    shot(f"{locale}/01-board.png")
    ...
    print(f"ok {locale}")                # or '!! locale: reason' and continue

Run loops in the background, stream ok/!! lines, then fix and re-run ONLY the failed locales.

State discriminators & navigation rules (hard-won)

• axe describe-ui returns ALL layers at once (home + game + sheets). To tell

home from in-game, use geometry: e.g. the home card's y < 900 on home but

1000 (pushed off-screen) in game. Find an equivalent invariant per app.

• Identify buttons by FRAME SIZE, not label (labels localize): home rows were

404 pt wide on both devices; sheet buttons ~150–260×52 (iPhone) vs ~258×54 (iPad) — measure with a probe first, then codify with tolerant bounds (a 55-px lower bound silently excluded 54-px iPad buttons).

• The first tap after a cold launch or screen transition is frequently eaten:

loop tap → wait → re-verify → retry (max 4–5).

• Long-press: axe touch -x X -y Y --down, sleep 1.5, axe touch ... --up

as SEPARATE commands. The single-command --delay form sometimes registers as a tap (which, on a minesweeper mine, ends your run).

• After axe swipe, content decelerates for a while — wait, then read a

reference element's position twice and require it to be identical before computing any new tap coordinates.

• Sheets/popovers: dismiss by dragging the grabber down

(axe swipe from ~y of the grabber to near the bottom edge).

• If element-level a11y is missing on a custom-drawn view (Canvas), the app

needs a debug a11y overlay — and verify it exposes the FULL visible grid; a clamped/budgeted overlay that silently truncates rows corrupts any logic that reasons about neighbors (we shipped this bug: the overlay capped at 600 elements and vanished on iPad's ~830-tile viewport).

Verification is part of capture

After each loop, open 3–5 captures from different locales and LOOK at them (decode to ~250 px wide). Every silent failure mode we hit — wrong screen captured, Settings opened instead of a sheet, stale language — was caught by eyes, not by exit codes.

The frame compositor (HTML/CSS → headless Chrome)

Reference implementation: scripts/generate.py in this repo (~200 lines, no dependencies beyond Chrome). Copy it into the app's repo and edit the DEVICES table + STYLES + ghosts.

Architecture

captions.json   per-shot config + per-locale copy        (edit freely)
generate.py     template + DEVICES table + render loop   (stable)
<loc>/<device>/NN-shot.png                               (output, exact store px)

python3 generate.py [--device iphone|ipad] [locale ...] regenerates any subset in seconds — copy/design changes never require recapturing.

Template structure (one HTML page per frame)

• body = canvas at exact store size, brand background (solid/gradient per

shot "style"), optional faint grid texture echoing the app, masked to fade.

• .copy block: eyebrow (dot + small caps), h1 with one <span> per

headline line (display:block; white-space:nowrap), .sub.

• .device: absolutely positioned mock — dark bezel div, rounded screen-wrap

with overflow:hidden, the raw capture as <img width:100%>, plus a drawn Dynamic Island div on iPhone (sim captures don't include it).

• Ghost elements behind the device (z-index 1): oversized accent circle,

translucent score (must match the captured score!), ∞ glyph, etc.

• Background styles get per-style shadow colors (warm shadow on yellow, rim

light on ink) — one STYLES dict.

The two JS passes (run inside the page before screenshot)

Auto-fit — shrink headline until every line fits:

const h1 = document.querySelector('h1');
const max = h1.clientWidth;        // MEASURE — never hardcode!
let size = parseFloat(getComputedStyle(h1).fontSize);
const fits = () => [...h1.querySelectorAll('span')].every(s => s.scrollWidth <= max);
while (!fits() && size > 60) { size -= 4; h1.style.fontSize = size + 'px'; }

⚠️ Block-level spans report scrollWidth >= container width even when the text fits. Comparing against a hardcoded constant that is 4 px smaller than the real container made every headline shrink to the floor — measure clientWidth at runtime.

Auto-push — long-locale subs wrap an extra line and slide under the device; push the device down below the copy, but ONLY for cropped shots (full-device shots have fixed tops so they can't slip off-canvas):

if (AUTOPUSH) {
  const dev = document.querySelector('.device');
  const copy = document.querySelector('.copy');
  const minTop = copy.offsetTop + copy.offsetHeight + 60;
  if (dev.offsetTop < minTop) dev.style.top = minTop + 'px';
}

Rendering

chrome --headless=new --disable-gpu --hide-scrollbars \
  --force-device-scale-factor=1 --window-size=$W,$H \
  --virtual-time-budget=3000 --screenshot=$OUT file://$HTML

--virtual-time-budget guarantees the JS passes run before capture.

Fonts: -apple-system, "SF Pro Display", ..., "PingFang SC", "PingFang TC", "Hiragino Sans", "Apple SD Gothic Neo" — headless Chrome on macOS resolves the native stacks, so Latin and CJK both render Apple-grade with zero font files.

Review checklist after a full render

1. sips -g pixelWidth -g pixelHeight on every PNG — exact store size. 2. Eyeball EN, the longest Latin locale (de or it), and one CJK locale on EVERY shot type (cropped, full-device, 3-line headline). 3. Ghost numbers match the capture's visible numbers per device. 4. Nothing overlaps: sub vs device, eyebrow width, island vs content.

Sizes, simulators, and ASC display types

Capture simulators (native screenshot = exact store size, never resize)

These two classes are all ASC requires for a universal app today — the 6.9" set covers smaller iPhones, the 13" set covers smaller iPads.

⚠️ Upload to whichever display type the listing ALREADY has sets under (check asc screenshots list --version-localization <id>). 1320×2868 is valid under both IPHONE_67 and IPHONE_69 — uploading to the one the listing does not use creates a second parallel set instead of replacing. Example: SAPPER's live sets were APP_IPHONE_67 + APP_IPAD_PRO_3GEN_129.

Full dimension matrix: asc screenshots sizes --all --output json.

Frame canvas = the same store sizes

The compositor renders HTML at exactly 1320×2868 (iPhone) / 2064×2752 (iPad):

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless=new --disable-gpu --hide-scrollbars \
  --force-device-scale-factor=1 --window-size=1320,2868 \
  --virtual-time-budget=3000 --screenshot=out.png file://frame.html

Validate every output:

sips -g pixelWidth -g pixelHeight *.png   # all must match exactly

Device mock values that looked right (shipped values, copy as starting point)

Cropped shots bleed off the canvas bottom by design; full-device shots must fully fit (that's why auto-push never applies to them).

Type scale (values that shipped (SAPPER))

Headlines always get a JS auto-fit pass on top of these (see compositor ref).