zaferayan/store-screenshots-panorama-skill/store-screenshots-panorama

Store screenshots — panorama

Makes App Store sets from raw app screenshots that read as one surface. The layout was measured from a large marketplace app's set; the 3D objects and the hero come from the app's own content. Details are in references/style.md. Read that file end to end before the first set: the decisions the template doesn't make (colours, curves, which part comes forward, which symbols become 3D, the Duo layout) come from there.

The user wants the result, not the process. Don't write plan, spec or measurement files, and don't stop for approval. Make the decisions yourself, produce the sets, check them, deliver. Ask only when an input is really missing and there is no sensible default — for example, ask for larger originals if the raw screenshots are narrower than 1206px.

Core rules

• The UI stays pixel-exact. Raw screenshots and crops of them are plain image layers. Don't redraw, regenerate with

AI, translate, or change any text on the screen. Cards are only cropped from the raw file with data-crop. A store screenshot has to show the real app; an invented UI costs both trust and App Review.

• Each device is shown with its own raw screenshots. On iPhone Duo the tab bar and status bar sit on the side, and

split views open on the inner display. Putting an iPhone screenshot in a Duo frame shows the app as something it isn't; don't. If there are no Duo screenshots, make the iPhone sets and tell the user what to capture for Duo (style.md §10).

• Dimming is a separate layer. The only thing applied to the screen is the .phone.dim layer; the pixels don't

change.

• Decoration comes from context. The 3D objects repeat the app's subject. Don't borrow campaign badges, ribbons,

discount language, or random plus signs and hearts from shopping sets; they make every app look like a store ad.

• AI or 3D generation is only for objects and the hero symbol, never with a phone or UI in it.
• Unverified hardware is not drawn. The Duo frame has no camera, hinge or buttons; their positions are not verified.
• No other brands' logos or names.
• Superiority claims ("the best", "number 1") only with a source. Without one, write a benefit, not a claim.
• The status bar stays as it is in the raw screenshot.

Inputs and defaults

Output: <out>/<lang>/<theme>/<device>/01.png … NN.png. Theme is light or dark; device is iphone-6.9, iphone-6.3, duo-outer or duo-inner. The source HTML files and previews stay in <out>/.src/; don't delete them, so the user can change the copy and render again. If the output folder already holds another set's files, don't touch them; if anything would clash, pick a new subfolder and say so.

Files

• references/style.md: colour roles, background, headline, devices, highlight techniques, 3D objects from context,

hero, copy tone, dark theme, iPhone Duo.

• assets/panorama.html: the template. Device frames (iPhone, Duo outer, Duo inner), headline, crops (pop-out card,

spotlight, frame, chip), dimming, puffy 3D objects (.obj: crescent, star, sparkle, bubble, play, note, heart, orb, or your own path), the hero object and per-theme raw folders (RAW) are ready; the layout measurements are fixed. Copy it and edit only the palette, the background shapes, the images and RAW.

• scripts/render.mjs: slices the panorama into PNGs.

node <skill>/scripts/render.mjs <panorama.html> --out <dir> --theme light|dark --device iphone|duo-outer|duo-inner [--size WxH] [--preview <png>] [--only 2,5] [--no-slices]. Each device's default size is one App Store Connect accepts; for iPhone the default is 6.9", pass --size 1206x2622 for 6.3". The warnings field of its JSON output lists size, ratio and alpha problems, page errors, and contrast and crop warnings (WARN:).

• scripts/grid.mjs: draws a labelled pixel grid and trial boxes over a raw screenshot, to measure crops.

node <skill>/scripts/grid.mjs raw/02.png --out <png> [--box x,y,w,h]. A crop guessed by eye drifts once it is scaled, so measure every crop on the grid.

Needs Node 18+ and Chrome (or Chromium, Edge, Brave); set CHROME_PATH if it isn't found. The headline font is SF Pro Display on macOS and Inter (Google Fonts) elsewhere.

Workflow

1. Inspect the raw screenshots. Check each file's pixel size, what each screen is for, and the text on it. Note the

app's subject and symbols: icon, tab icons, illustrations on the screens. The 3D objects and the hero symbol are picked from these. Pick the accent (A): the colour of buttons, the selected tab or the logo. Derive the palette from A as in style.md §1. To sample colours, use magick <png> -format "%[hex:p{x,y}]" info: or the grid image. Check whether the Duo folders exist and have the right sizes (style.md §10). Check which raw folders exist and pick each theme's folder (style.md §9). With light and dark folders, check that they hold the same file names at the same pixel sizes and show the same state (content, scroll position, time).

1. Plan the set in your head; don't write it down. Order: the hero, then the screens in order of value. For each

image, decide: the headline, the colour of the headline zone (A or the second background, in groups of 2–3), the main highlight technique and the part to crop. Whatever part proves the screen's point is the main highlight. Then spread the 3D objects over the seams. The Duo sets tell the same story: same order, headlines, palette and symbols.

1. Measure the crops. Run grid.mjs for each part, look at the image, try the box with --box, and look again.

The box should hug the element with a little air, not cut text, and not take in neighbouring UI. Measure the card's corner radius too (data-r). Measure the Duo crops separately, from their own raw files. Measure on the light screenshots. With a dark folder, try the same boxes on the dark ones too (grid.mjs raw-dark/02.png --box …): the crops are shared, so they must hug the same element in both.

1. Build the iPhone panorama. Copy assets/panorama.html to <out>/.src/panorama.html:

• Change the palette in :root.
• Set RAW in the script: { light: 'raw-light', dark: 'raw-dark' } with two folders, { light: 'raw', dark: 'raw' }

with one. Write every path with the light folder; the dark render swaps it.

• Write a <section class="shot"> for each image. Give data-raw for the crops; paths are relative to the .src

folder the HTML is in (../../raw/… when the output is out/, ../../../raw/… for out/x/). The crop and colour values in the template are only examples; measure all of them for this app.

• Draw the background shapes in svg.bg, in panorama coordinates: decide the colour sequence of the headline zones

first, then route the shapes to match it.

• Put the 3D objects on the seams as direct children of .pano. Put the hero object in the first section.
• Delete the example sections and objects.

1. Build the Duo panoramas (if there are Duo screenshots). Copy the iPhone panorama to

.src/panorama-duo-outer.html and .src/panorama-duo-inner.html and adapt them as in style.md §10: the same headlines, palette and symbols; new crops; cards, objects and background shapes laid out again for the design height; RAW set to the Duo folders (e.g. { light: 'raw-duo-outer-light', dark: 'raw-duo-outer-dark' }).

1. Render. One run per theme and device (for dark, --theme dark and dark):

`` R=<skill>/scripts/render.mjs; S=<out>/.src; O=<out>/<lang>/light node $R $S/panorama.html --theme light --device iphone --out $O/iphone-6.9 --preview $S/preview-light.png node $R $S/panorama.html --theme light --device iphone --out $O/iphone-6.3 --size 1206x2622 node $R $S/panorama-duo-outer.html --theme light --device duo-outer --out $O/duo-outer --preview $S/preview-light-duo-outer.png node $R $S/panorama-duo-inner.html --theme light --device duo-inner --out $O/duo-inner --preview $S/preview-light-duo-inner.png ` Fix every warning; for a contrast warning, adjust the palette. Each image is its own Chrome run (~10 s). While fixing, render only the changed images with --only 2,5, or only the preview with --no-slices --preview …`; render everything from scratch before delivery.

1. Look and fix. Look at the previews first, then at each image, and go through the checklist. Fix and render

again. Don't deliver an image you haven't looked at: a shifted crop, a curve behind a headline or an object covering a card only shows in the picture. The 6.3" set is the 6.9" set scaled down; looking at one is enough, but check the file count and size of both.

1. Deliver. Briefly give the folders, the device sets, the number of images, each image's headline and which raw

folder each theme used. If a dark screenshot showed a different state, name the screens to retake. If no Duo sets were made, say why and what needs to be captured. Mention that changing the copy only takes editing the HTML in .src/ and running the commands from step 6.

If a reference set is given

If the user gives another app's store screenshots as a reference, replace the layout values in style.md with measurements of that set:

• Look at the images one by one, then side by side, and measure them at full resolution: background and continuity,

headline, device, highlight techniques, decoration, special images, rhythm and tone.

• Don't add anything the reference doesn't have.
• If the reference's aspect ratio differs from the output's, carry measurements over relative to the width. Pin

elements at the top to the top and elements cut off at the bottom to the bottom.

• Take only style and layout from the reference. Never copy its logo, brand name, mascot, photos or text. Translate

its decoration into the app's own context too.

• Don't write files for the measurements either.