App Store Screenshots

App Store & Google Play Screenshots Generator

Overview

Scaffold a pre-built Next.js + ShadCN editor that lets the user design and export App Store and Google Play screenshots as advertisements (not UI showcases). The editor handles all the heavy lifting:

• Connected live preview at the canvas's true resolution (scaled to fit)
• Drag-to-reorder screens, inline text editing, layout switcher per screen
• Cross-screen mockups: phone/device frames, captions, and layered elements can be moved across adjacent screens, then exported as clipped crops
• Drop-target screenshot picker (file → saved to public/screenshots/uploaded/<hash>.png)
• Auto-save to `app-store-screenshots.json` at the project root (git-trackable) + localStorage mirror
• Easy iOS ↔ Android platform switch — separate slide decks live side by side
• One-click bulk PNG export at every Apple/Google-required resolution via html-to-image
• Light/dark variant toggle per slide, theme presets, locale select
• Guided in-place migration for older projects created by this skill; passive and explicit migrations keep legacy decks isolated until the user intentionally opts into connected canvas

Supported devices out of the box:

• iPhone (portrait) — Apple App Store
• iPad (portrait) — Apple App Store
• Android Phone (portrait) — Google Play
• Android Tablet 7" (portrait + landscape) — Google Play
• Android Tablet 10" (portrait + landscape) — Google Play
• Feature Graphic (1024×500 banner) — Google Play store listing header

Core Principle

Screenshots are advertisements, not documentation. Every screenshot sells one idea. If you're showing UI, you're doing it wrong — you're selling a feeling, an outcome, or killing a pain point. Use this skill's interactive editor to iterate on copy and layout fast; do not hand-craft the page from scratch.

What This Skill Does

1. Copies a pre-built template from template/ (co-located with this SKILL.md) into the user's working directory. 2. Installs dependencies with the user's package manager. 3. Drops the user's screenshots into public/screenshots/... and their app icon into public/. 4. (Optionally) prefills app-store-screenshots.json with the user's app name, starting copy, screenshots, and connected-canvas preference so the first preview is meaningful. 5. Starts the dev server and tells the user to open the editor in the browser.

You should NOT write page.tsx, device frames, or export logic by hand. They live in the template.

Step 0: Probe for Existing Screenshot Projects

Before asking the new-project questions in Step 1, always inspect the current working directory for an existing app-store-screenshots implementation.

Run lightweight probes:

test -f package.json && sed -n '1,220p' package.json
test -f app-store-screenshots.json && sed -n '1,120p' app-store-screenshots.json
rg -n "app-store-screenshots|html-to-image|toPng|ScreenshotEditor|DeckCanvas|connectedCanvas|EXPORT_SIZES|mockup.png|PHONE_SCREEN" package.json src app public 2>/dev/null
find public -maxdepth 4 \( -path "*/screenshots*" -o -name "mockup.png" -o -name "app-icon.png" \) -print 2>/dev/null

Treat the project as an older implementation when any of these are true:

• app-store-screenshots.json exists but has no schemaVersion, has schemaVersion < 2, or lacks connectedCanvas.
• src/components/editor/screenshot-editor.tsx exists but the editor does not reference DeckCanvas or connectedCanvas.
• src/app/page.tsx contains a previous all-in-one generator (html-to-image, toPng, EXPORT_SIZES, PHONE_SCREEN, hardcoded slide arrays/themes).
• The repo contains the old screenshot asset layout (public/mockup.png, public/screenshots...) plus a screenshot generator package setup.

If an older implementation is detected, ask exactly one question before doing anything else:

I found an older App Store screenshots project here. Do you want me to migrate this existing project to the new connected-canvas editor?

>

1. Yes — migrate the existing project to the new editor

2. No — set up or modify a project another way

If the user chooses Yes, do not ask the Step 1 questionnaire. Run the migration path below using the files already in the repo. If the user chooses No, continue to Step 1.

Migration Path (When User Says Yes)

The goal is an in-place UI/template upgrade, not a redesign. Preserve the user's existing app name, copy, screenshot paths, app icon, uploaded assets, locales, and device decks wherever they already exist. Replace the old UI implementation with the current template. Keep legacy decks in isolated export mode unless the project already explicitly opted into connected canvas.

Migration rules:

1. Do not ask further product/design questions. The user already has a project. Infer from existing files and report any non-blocking gaps at the end. 2. Never delete user assets. Preserve public/screenshots/, public/app-icon.png, uploaded screenshots, and any existing app-store-screenshots.json. 3. Preserve recoverability. If the worktree is not clean, do not revert unrelated changes. Before overwriting template files, copy replaced project-state/assets/code snapshots to a temporary backup outside the repo (for example /tmp/app-store-screenshots-migration-<timestamp>/) and mention the path in the final response. 4. Prefer structured migration. Read and write app-store-screenshots.json with JSON tooling. Do not regex-edit JSON. 5. Set `schemaVersion: 2` and keep legacy `connectedCanvas` safe. If the existing project already has an explicit boolean connectedCanvas, preserve it. If the project is pre-v2 or lacks the flag, write "connectedCanvas": false so offscreen/clipped legacy mockups do not leak into neighboring exports. New projects still default to connected canvas. 6. Keep screenshots pointed at existing files. Do not rename screenshot files unless the old project already depended on numeric names and the migration needs them. Existing static paths are fine. 7. Handle custom themes without asking. If the old project references a custom themeId, merge the matching theme object into the new src/lib/constants.ts when it can be found. If it cannot be recovered, leave the themeId in project JSON; the editor will fall back to clean-light and warn, and you should note that a custom theme needs manual restoration. 8. Merge package metadata when possible. The template's dependencies and scripts must win for the screenshot editor, but preserve unrelated existing dependencies, devDependencies, and useful scripts unless they directly conflict. 9. Do not import template sample decks into real migrations. If the old project already has decks or screenshots, use the template for UI/code only. Keep template sample screenshots/decks out of the migrated project so the user's app does not inherit unrelated example content. 10. Use a disposable copy for dogfooding. If the user asks to test or review the migration instead of actually migrating their project, copy the app to a temp directory or worktree and run the migration there. Only touch the real checkout when the user explicitly asks for the real migration and answers Yes.

Recommended migration sequence:

# 1. Snapshot useful old files outside the repo.
STAMP=$(date +%Y%m%d-%H%M%S)
BACKUP_DIR="/tmp/app-store-screenshots-migration-$STAMP"
mkdir -p "$BACKUP_DIR"
cp -R app-store-screenshots.json public src package.json tailwind.config.ts next.config.mjs "$BACKUP_DIR/" 2>/dev/null || true

# 2. Preserve project state and assets that must survive template copy.
PRESERVE_DIR="$BACKUP_DIR/preserve"
mkdir -p "$PRESERVE_DIR"
cp app-store-screenshots.json "$PRESERVE_DIR/" 2>/dev/null || true
cp -R public/screenshots "$PRESERVE_DIR/screenshots" 2>/dev/null || true
cp public/app-icon.png "$PRESERVE_DIR/app-icon.png" 2>/dev/null || true

# 3. Copy the current template over the old UI implementation.
cp -R "<SKILL_DIR>/template/." "$PWD/"
cp app-store-screenshots.json "$BACKUP_DIR/template-app-store-screenshots.json" 2>/dev/null || true

# 4. Restore preserved user state/assets over template samples.
cp "$PRESERVE_DIR/app-store-screenshots.json" app-store-screenshots.json 2>/dev/null || true
mkdir -p public
if [ -d "$PRESERVE_DIR/screenshots" ]; then
  mkdir -p "$BACKUP_DIR/template-samples/public"
  mv public/screenshots "$BACKUP_DIR/template-samples/public/screenshots" 2>/dev/null || true
  cp -R "$PRESERVE_DIR/screenshots" public/screenshots
else
  mkdir -p public/screenshots
fi
cp "$PRESERVE_DIR/app-icon.png" public/app-icon.png 2>/dev/null || true

After copying, upgrade or create app-store-screenshots.json. If an existing project file exists, coerce it in place. If no project file exists but old slide data is embedded in src/lib/defaults.ts or src/app/page.tsx, extract it best-effort into the template's project JSON before falling back to starter slides. Prefer old arrays or objects named slides, screens, features, defaultSlides, appName, tagline, theme, and screenshot paths. If the old implementation only has image files, sort public/screenshots/** by path and seed slides from those files.

Use a small JSON script like this for the final project-state coercion:

BACKUP_DIR="$BACKUP_DIR" node <<'NODE'
const fs = require("fs");
const path = require("path");

const PROJECT_FILE = "app-store-screenshots.json";
const DEFAULT_LOCALE = "en";
const DEVICE_KEYS = ["iphone", "ipad", "android", "android-7", "android-10", "feature-graphic"];
const LAYOUTS = ["hero", "device-bottom", "device-top", "two-devices", "no-device", "split-landscape", "feature-graphic"];

function readJson(file) {
  try {
    return JSON.parse(fs.readFileSync(file, "utf8"));
  } catch {
    return null;
  }
}

const templateState =
  readJson(path.join(process.env.BACKUP_DIR || "", "template-app-store-screenshots.json")) ||
  readJson(PROJECT_FILE) ||
  {};
const existingState = readJson(PROJECT_FILE) || {};
const hasExplicitConnectedCanvas = typeof existingState.connectedCanvas === "boolean";
const existingDecks =
  existingState.slidesByDevice && typeof existingState.slidesByDevice === "object"
    ? existingState.slidesByDevice
    : {};
const hasExistingDecks = Object.keys(existingDecks).length > 0;
const state = {
  ...templateState,
  ...existingState,
  slidesByDevice: hasExistingDecks ? existingDecks : templateState.slidesByDevice || {},
};

const legacySlides =
  Array.isArray(existingState.slides) ? existingState.slides :
  Array.isArray(existingState.screens) ? existingState.screens :
  Array.isArray(existingState.features) ? existingState.features :
  null;

if (legacySlides && !hasExistingDecks) {
  state.slidesByDevice = {
    iphone: legacySlides,
  };
}

function localized(value) {
  if (typeof value === "string") return { [DEFAULT_LOCALE]: value };
  if (value && typeof value === "object") return value;
  return {};
}

function cleanTransform(value) {
  if (!value || typeof value !== "object") return undefined;
  const { x, y, width, height, rotation, zIndex } = value;
  if (![x, y, width, height].every((n) => typeof n === "number" && Number.isFinite(n))) return undefined;
  return {
    x,
    y,
    width: Math.max(1, width),
    height: Math.max(1, height),
    ...(typeof rotation === "number" && Number.isFinite(rotation) ? { rotation } : {}),
    ...(typeof zIndex === "number" && Number.isFinite(zIndex) ? { zIndex } : {}),
  };
}

function firstString(...values) {
  return values.find((value) => typeof value === "string") || "";
}

function migrateSlide(slide) {
  if (!slide || typeof slide !== "object") return null;
  const transforms = {};
  const rawTransforms = slide.transforms && typeof slide.transforms === "object" ? slide.transforms : {};
  for (const [id, transform] of Object.entries(rawTransforms)) {
    const cleaned = cleanTransform(transform);
    if (cleaned) transforms[id] = cleaned;
  }
  const textElements = Array.isArray(slide.textElements)
    ? slide.textElements
        .map((element) => {
          const transform = cleanTransform(element.transform);
          if (!element || typeof element.id !== "string" || !transform) return null;
          return {
            ...element,
            text: localized(element.text),
            transform,
          };
        })
        .filter(Boolean)
    : undefined;

  return {
    ...slide,
    id: typeof slide.id === "string" ? slide.id : `migrated-${Math.random().toString(36).slice(2, 10)}`,
    layout: LAYOUTS.includes(slide.layout) ? slide.layout : "device-bottom",
    label: localized(slide.label),
    headline: localized(slide.headline || slide.title || slide.caption || slide.copy),
    screenshot: firstString(slide.screenshot, slide.image, slide.src, slide.path),
    ...(Object.keys(transforms).length ? { transforms } : { transforms: undefined }),
    ...(textElements && textElements.length ? { textElements } : { textElements: undefined }),
  };
}

state.schemaVersion = 2;
state.connectedCanvas = hasExplicitConnectedCanvas ? existingState.connectedCanvas : false;
state.locales = Array.isArray(state.locales) && state.locales.length ? state.locales : [DEFAULT_LOCALE];
state.locale = state.locales.includes(state.locale) ? state.locale : state.locales[0];
state.device = DEVICE_KEYS.includes(state.device) ? state.device : "iphone";

if (state.slidesByDevice && typeof state.slidesByDevice === "object") {
  for (const [device, slides] of Object.entries(state.slidesByDevice)) {
    if (!DEVICE_KEYS.includes(device)) continue;
    state.slidesByDevice[device] = Array.isArray(slides) ? slides.map(migrateSlide).filter(Boolean) : [];
  }
}

if (!state.slidesByDevice[state.device]) {
  const firstDeviceWithSlides = DEVICE_KEYS.find((device) => state.slidesByDevice[device]?.length);
  if (firstDeviceWithSlides) state.device = firstDeviceWithSlides;
}

fs.writeFileSync(PROJECT_FILE, JSON.stringify(state, null, 2) + "\n");
NODE

If package.json existed before the template copy, merge it after the project-state coercion instead of leaving a blind overwrite. Keep the template's dev, build, and start scripts and all editor dependencies, then add any old non-conflicting scripts and dependencies from the backed-up package.json.

BACKUP_DIR="$BACKUP_DIR" node <<'NODE'
const fs = require("fs");
const path = require("path");

function readJson(file) {
  try {
    return JSON.parse(fs.readFileSync(file, "utf8"));
  } catch {
    return null;
  }
}

const oldPkg = readJson(path.join(process.env.BACKUP_DIR || "", "package.json"));
const templatePkg = readJson("package.json");

if (oldPkg && templatePkg) {
  const merged = {
    ...oldPkg,
    ...templatePkg,
    scripts: {
      ...(oldPkg.scripts || {}),
      ...(templatePkg.scripts || {}),
    },
    dependencies: {
      ...(oldPkg.dependencies || {}),
      ...(templatePkg.dependencies || {}),
    },
    devDependencies: {
      ...(oldPkg.devDependencies || {}),
      ...(templatePkg.devDependencies || {}),
    },
  };

  fs.writeFileSync("package.json", JSON.stringify(merged, null, 2) + "\n");
}
NODE

Then install/update dependencies and verify:

bun install      # or pnpm install / yarn / npm install
set -o pipefail
bun run build 2>&1 | tee "$BACKUP_DIR/build.log"    # or the detected package-manager equivalent

Start the dev server and verify in the browser:

• The toolbar shows Isolated for migrated pre-v2 decks, unless the project file already explicitly had "connectedCanvas": true.
• Existing screens, copy, screenshot paths, and app icon are present.
• Referenced screenshot files exist for every configured locale, or the final report lists the missing paths.
• Device decks retained from the old project do not silently become template placeholders. If a retained deck has empty screenshots or lacks active-locale copy, report it as a follow-up instead of removing it.
• A bundle export succeeds for the active device.
• app-store-screenshots.json contains "schemaVersion": 2 and a boolean "connectedCanvas" value.

Step 1: Gather Input (Before Scaffolding)

Ask the user these. Do not proceed until you have answers:

Required

1. App screenshots — "Do you already have screenshots of the devices?"

• If yes: ask "Where are your app screenshots? (PNG files of actual device captures)" and proceed.
• If no and the app is iOS + Swift: offer the companion capture skill — "Want to capture them automatically with the ios-marketing-capture skill (https://github.com/ParthJadhav/ios-marketing-capture)?" If they say yes, install it with:

     npx skills add ParthJadhav/ios-marketing-capture

Then have them run that skill first to generate the screenshots before continuing here.

• If no and the app is not iOS + Swift (e.g. Android, React Native, Flutter, web): the capture skill won't work — the user needs to capture screenshots manually (simulator/device screenshots) before continuing.

2. App icon — "Where is your app icon PNG?" 3. App name — "What's the app called?" 4. Feature list — "List your app's features in priority order. What's the #1 thing your app does?" 5. Style direction — "What style do you want? You can either (a) pick one of the named deep-spec styles, or (b) describe your own vibe in your own words (warm/organic, dark/moody, clean/minimal, bold/colorful, plus any reference apps you like) and I'll build a custom palette. The template also ships with clean-light, dark-bold, warm-editorial, ocean-fresh, and bloom-roast palette presets you can start from. The named deep specs live in style-prompts/ — see style-prompts.md for the full index. Currently available: Retro Rubberhose Mascot, Moody Curated Dating, Paper Sticker Skeuomorphic, Dreamy Pastel Couples, Hand-Drawn Editorial Tasks, Glossy 3D K-Beauty Creator. If the user names one of these — or describes something that clearly matches one — read style-prompts/_QUALITY_BAR.md first, then the matching deep spec file, and apply its entire spec (palette, gradients, shadows, rotations, per-slide breakdown). If the user describes a fully custom style, fall back to the General Visual Design Principles below and pick the closest deep spec as a starting reference."

Optional

6. Target stores — Apple App Store only, Google Play only, or both? Determines which platform decks to seed. 7. iPad / Android tablet screenshots — If yes, what sizes and orientations? 8. Feature Graphic — Want a 1024×500 Play Store banner too? 9. Localized screenshots — Languages? (e.g. en, de, es, pt, ja, ar, he) 10. Number of slides — Apple allows up to 10, Google Play up to 8. 11. Brand colors / font — If they want a custom theme beyond the built-in presets. 12. Additional instructions — Anything specific.

IMPORTANT: If the user gives instructions at any point, follow them. They override skill defaults.

Step 2: Scaffold the Template

Detect Package Manager

Priority: bun > pnpm > yarn > npm.

which bun && echo bun || which pnpm && echo pnpm || which yarn && echo yarn || echo npm

Copy the Template

The template lives at <this skill dir>/template/ — when the skill is installed, the whole folder is already on disk. Copy its contents (NOT the folder itself) into the user's working directory. The trailing /. copies dotfiles like .gitignore too.

# Replace <SKILL_DIR> with the absolute path to this skill (the directory containing SKILL.md).
cp -R "<SKILL_DIR>/template/." "$PWD/"

If the target directory already has a package.json, ask the user before overwriting during a new scaffold. If Step 0 detected an old implementation and the user chose Yes, do not ask this again; follow the migration path, preserve recoverability with the backup directory, and merge package metadata after the template copy.

Install Dependencies

bun install      # or pnpm install / yarn / npm install

Drop the User's Assets

Move the user's screenshots into the layout the template expects:

public/
├── app-icon.png                      # ← user's app icon
├── mockup.png                        # ← already copied by the template (iPhone bezel)
└── screenshots/
    ├── apple/
    │   ├── iphone/{locale}/01.png … N.png
    │   └── ipad/{locale}/01.png   … N.png
    └── android/
        ├── phone/{locale}/01.png  … N.png
        ├── tablet-7/{portrait|landscape}/{locale}/...
        └── tablet-10/{portrait|landscape}/{locale}/...

The starter project state lives in app-store-screenshots.json, not src/lib/defaults.ts. If the user names their screenshots differently, either rename them or update the relevant slide screenshot fields in app-store-screenshots.json so the initial deck points at the right files. The user can also drag-drop files directly into the editor at runtime — those uploads are written to public/screenshots/uploaded/<hash>.png when the dev server is running.

(Optional) Seed Initial Copy

If the user provided headlines, edit app-store-screenshots.json to set:

• appName
• themeId (one of "clean-light" | "dark-bold" | "warm-editorial" | "ocean-fresh" | "bloom-roast", or add a matching entry to THEMES in src/lib/constants.ts)
• connectedCanvas (true for new connected decks; migrated legacy decks should stay false until the user opts in)
• Starter slides per device with the user's label + headline + screenshot paths

Otherwise, leave the defaults — the user can rewrite copy in the editor.

Start the Dev Server

bun dev    # → http://localhost:3000

Tell the user to open the URL and start editing. The editor auto-saves to `app-store-screenshots.json` at the project root (plus a localStorage mirror for instant paint). Uploaded screenshots land in public/screenshots/uploaded/<hash>.png. Both are git-trackable — committing them means another machine can git clone and resume the exact deck.

Step 3: Coach the User on Copy

Inside the editor the user will write headlines themselves, but they often need guidance. Apply these rules when reviewing their copy or generating suggestions.

The Iron Rules

1. One idea per headline. Never join two things with "and." 2. Short, common words. 1-2 syllables. No jargon unless it's domain-specific. 3. 3-5 words per line. Must be readable at thumbnail size in the App Store. 4. Line breaks are intentional. Newlines in the textarea map directly to visible breaks.

Three Approaches

Bad-to-Better

Narrative Arc

The user's slide deck should follow a rough arc (skip slots that don't fit):

Layout Variation

Vary the layout field across slides. The editor exposes:

• hero — centered headline + bottom-anchored device
• device-bottom — same composition, smaller headline
• device-top — flipped, device above caption (good contrast slide)
• two-devices — back + front phones layered
• no-device — big standalone headline (use sparingly)
• split-landscape — caption left + device right (tablet landscape only)
• feature-graphic — Play Store banner (1024×500)

Never repeat the same layout twice in a row. Use 1-2 inverted (dark) slides for visual rhythm.

Cross-Screen / Cross-Canvas Composition

Use the connected canvas as a design tool during Step 3, after the narrative arc and layout rhythm are chosen and before final export. For most decks with 5+ slides, plan one tasteful cross-screen moment by default. For 8-10 slide decks, use at most two. For short, formal, or compliance-heavy decks, zero is fine. The goal is "these screenshots belong together," not "one giant poster chopped into pieces."

Good cross-screen patterns:

• An oversized phone, tablet, or screenshot mosaic bridges two adjacent screens by 10-30% of its width, while each exported crop still reads as a complete ad.
• A background horizon, photo, gradient, doodle path, waveform, starfield, sticker trail, or map route continues across the seam.
• A mascot, 3D object, floating chip, or notification peeks from one screen into the next as a secondary visual, not the whole message.
• Related ideas form a pair: problem → solution, before → after, overview → detail, plan → result.
• The seam passes through negative space, a soft shadow, a simple object body, or a non-critical decorative area.

Bad cross-screen patterns:

• Splitting headlines, app names, prices, legal text, ratings, CTAs, or critical UI across a seam.
• Centering one giant phone on the seam so each crop shows only a half-device and no clear benefit.
• Using cross-screen movement on every slide; it becomes a gimmick and makes the deck harder to scan.
• Cutting through faces, mascot eyes, key chart numbers, product claims, or app-store-required information.
• Requiring the viewer to understand the carousel as one uninterrupted poster. Every exported PNG must still pass the one-second standalone test.
• Letting shadows, stickers, or partial objects look accidentally clipped. If it crosses a boundary, make the bleed deliberate with scale, shadow, rotation, or continuation.

Placement rules:

• Use adjacent screens only unless a deliberate 3-screen panorama is the entire concept.
• Keep all text fully inside a single exported screen with safe margins.
• Let 10-30% of a non-critical visual cross the seam; go beyond 40% only for backgrounds, paths, or abstract decoration.
• If adjacent screens have different background colors, bridge them with a shared object, matching shadow direction, or a designed transition band.
• Review both views: the zoomed-out connected canvas must look cohesive, and each individual export must still sell one idea.

Visual Design Principles

These rules are derived from studying the best app store screenshots in the wild (Superlist, Headspace, CRED, (Not Boring) Camera, Arc Search, Linktree, Gentler Streak, etc.). They apply regardless of which style preset the user picks. Style-specific tokens (fonts, palette, accents) live in style-prompts.md — point the user there.

1. The background is a designed surface — never white

Plain white is the amateur tell. Every great deck uses a deliberate surface: a saturated color block, a warm cream/off-white (#F4F1EC-ish), a dark navy/near-black, or a gradient. The background can shift per slide (Headspace, Linktree do this), but it must read as intentional, not default.

2. Headlines dominate

The headline occupies roughly the top 30–40% of the canvas — much bigger than a typical web hero. If a person can't read it at thumbnail size with no zoom, redesign.

3. Mixed emphasis inside the headline

Almost every great headline has one word styled differently from the rest — a contrast color, an italic script, a heavier weight, or a hand-drawn underline. Examples:

• Superlist: "The one app that fits your whole day" (script + coral)
• Headspace: "Stress less" (less orange against black)
• Arc Search: "Fastest way to search. Cleanest way to browse." (purple / navy)

Flat single-color headlines look weaker. Pick one emphasis word per slide.

4. Decorative accents are the rule, not the exception

Top decks layer at least one of these on most slides:

• Hand-drawn squiggles, arrows, scribbles (Superlist)
• Sparkles / glow (Gentler Streak, Arc)
• Label badges on the visual ("SUPER RAW", "Cinematic", "LUT")
• Floating widget chips with real stats ("$3,630 earned", "11,175 steps") — these tell the story without copy
• Award lockups on the hero only (Apple Design Award, Webby, star count)

A bare phone on a bare bg with a bare headline is the default-skill output. Add one accent.

5. Phone framing is a deliberate choice — vary it across the deck

Three common framings, each carries a different feeling:

• Bezelless / minimal frame — maximizes UI legibility, modern (Arc, Linktree, Gentler)
• Tilted floating phone with soft shadow — product / advertorial feel (Superlist, CRED hero)
• Full device with visible bezel, dead-center — editorial, premium (CRED, NB Camera)

Mix at least two framings across the deck.

6. Proof anchors the hero, nothing else

Award badges, press quotes, star counts, install counts — concentrate them on slide 1 only. Spreading them dilutes both the proof and the rest of the slides. NB Camera does this perfectly: Verge quote + Apple Design Award + 15,000+ stars all on the cover, none after.

7. Density inside the phone, sparsity outside

The screenshot inside the phone can (and should) be a real, dense product capture — actual lists, dashboards, charts, conversations. The space outside the phone is the opposite: one headline, one visual, one optional sub-line, one optional badge. Don't add bullet lists, multi-line paragraphs, or competing logos around the device.

8. Break the phone parade

Every 2–3 slides, drop the phone and use a different hero element to keep visual rhythm:

• 3D rendered product object (NB Camera's stylized camera)
• Photographic still (NB Camera slide 2)
• Real human / lifestyle photo (Linktree)
• Mascot illustration (Headspace's mascot, Gentler Streak's character)
• Typographic feature wall (Superlist's last slide)
• Phone grid mosaic (Linktree's "Trusted by 70M+" final slide)

9. Last slide pattern

The closer is almost always one of two things:

• Feature wall — a vertical list of one-word features styled as big type ("Real-time collaboration / Offline support / Widgets / Integrations…")
• Phone mosaic — multiple bezelless mini-screenshots arranged in a grid to convey "look at all the things this does"

Pick one. Don't make the last slide another single-feature hero — it wastes the spot.

10. Thumbnail test (mandatory before export)

Shrink the slide to ~160px wide (App Store search-result size). Squint. Can you read the headline? Can you tell what the app does in under a second? If not, the headline is too long, the type is too thin, or there's no contrast between text and background. Fix before exporting.

Step 4: Localization

Always confirm the language list with the user before scaffolding — even if they didn't volunteer it. Ask: _"Should screenshots be localized? If yes, which locales? (e.g. en, de, es, pt, ja)."_ Default to English-only if they say no or skip.

The project state file (app-store-screenshots.json) carries a locales: string[] field — the list of locale codes the project targets. The editor reads this to decide:

• The locale dropdown in the toolbar is hidden when locales.length <= 1.
• The dropdown's options come from this list (not a hardcoded set).
• The Export bundle loops every locale in the list × every required size.

After scaffolding, edit `app-store-screenshots.json` to set `locales` to the user's chosen list, e.g. "locales": ["en", "de", "ja"]. Also set "locale": "en" (or whichever is the source-of-truth language) so the editor opens on it.

The editor stores headlines and labels per-locale on each slide — switch to a locale and type to fill it in; unfilled locales fall back to en at preview time. Screenshots are a single string per slide; put {locale} anywhere in the path and the editor substitutes the active locale at render and export (e.g. /screenshots/apple/iphone/{locale}/01.png).

• Don't literally translate — rewrite for the target market.
• Re-check line breaks per locale; German/French/Portuguese often need shorter claims.
• For RTL (ar, he, fa, ur), the template handles direction inversion through CSS — let the user verify each slide looks intentional, not just flipped.

Step 5: Export Time

Inside the editor, the user picks a device, then hits Export bundle. A single zip downloads with every required size × every project locale for that device, organized as <platform>/<device>/<WxH>/<locale>/NN-<layout>.png. Repeat per device.

When connectedCanvas is enabled, exports are crops of the connected canvas, not isolated screen renders. If a mockup sits halfway across screen 2 and screen 3, screen 2's PNG contains its left crop and screen 3's PNG contains its right crop exactly as placed. Legacy decks should start with connectedCanvas: false, including Step 0 migrations, so old offscreen/clipped elements export as they did before. The user can turn on Connected after intentionally composing cross-screen elements.

Before export, zoom out to inspect the connected canvas as a strip, then inspect the individual cropped screens. Cross-screen elements should feel intentional in the strip and harmless in isolation.

Project locales come from app-store-screenshots.json locales field — set during scaffolding (Step 4). Single-locale projects produce a flat per-size structure with just the one locale folder.

If exports come out blank or with black screen rectangles:

• Verify source screenshots are RGB (not RGBA). The template flattens via objectFit: cover, but truly transparent sources can still produce black regions.
• Confirm the referenced screenshot paths exist under public/; export retries paths that were previously missing before it starts rendering.
• Keep export scaling inside html-to-image via canvasWidth/canvasHeight; CSS transform: scale(...) can leave transparent gutters when App Store sizes differ slightly in aspect ratio.

Step 6: Final QA Gate

Message Quality

• One idea per slide
• Hero slide communicates the main benefit in one second
• Readable at arm's length at thumbnail size

Visual Quality

• No two adjacent slides share the same layout
• Landscape tablet slides use split-landscape — never two devices side-by-side
• At least one contrast (inverted: true) slide when the deck is long enough
• For decks with 5+ slides, either one cross-screen/cross-canvas moment exists or there is a clear reason to keep every screen isolated
• Cross-screen moments are limited to adjacent screens and never split text, required info, faces, or critical UI

Export Quality

• No clipped text or assets after scaling to export size
• No transparent gutters or blank edge pixels in the generated PNGs
• Cross-screen elements split cleanly across adjacent PNGs
• Screenshots correctly aligned inside every device frame
• Filenames sort correctly (zero-padded numeric prefixes)
• Feature Graphic exports cleanly at 1024×500 (no device frame)

Common Mistakes

Project Migration

The current template writes schemaVersion: 2. Existing projects made by earlier versions of this skill usually have no schemaVersion and may still store string label / headline values. Do not hand-edit those projects unless the JSON is invalid. On load, src/lib/storage.ts:

1. Converts legacy string copy to localized { "en": "..." } objects. 2. Sanitizes existing element transforms. 3. Preserves every existing slide/screen and device deck. 4. Keeps pre-v2 decks in isolated-screen mode by setting connectedCanvas: false, so already-clipped phones or captions do not suddenly appear in neighboring exports. 5. Lets the user opt into connected crops with the toolbar's Connected/Isolated control when they are ready to use cross-screen placement. 6. Saves the upgraded state back to app-store-screenshots.json and localStorage only after the file endpoint has loaded successfully, so stale browser cache cannot overwrite the canonical project file during dev-server restarts.

There are two migration modes:

• Passive runtime migration: when a user opens an old project in the current editor, keep connectedCanvas: false for pre-v2 JSON so old exports remain visually stable.
• Explicit skill migration: when Step 0 detects an old implementation and the user answers Yes, upgrade the UI in place and write schemaVersion: 2. Preserve an existing explicit connectedCanvas boolean; otherwise write connectedCanvas: false without asking more product/design questions.

For explicit in-place upgrades, copy the current template's src/components/editor/, src/lib/, app routes, config, and package files into the project while preserving user assets and project JSON. If the old project had custom themes, merge those THEMES entries into src/lib/constants.ts; otherwise the editor falls back to clean-light and warns in the browser. Then run the app once and confirm schemaVersion: 2 and a boolean connectedCanvas are present.

Template Reference

The template structure (after copy):

project/
├── package.json
├── tsconfig.json
├── next.config.mjs
├── tailwind.config.ts
├── postcss.config.mjs
├── components.json              # ShadCN config (for future `shadcn add`)
├── public/
│   ├── mockup.png               # iPhone bezel (do NOT replace without re-measuring PHONE_SCREEN)
│   ├── app-icon.png             # → user supplies
│   └── screenshots/...
└── src/
    ├── app/
    │   ├── layout.tsx           # Font + root layout
    │   ├── page.tsx             # Renders <ScreenshotEditor />
    │   └── globals.css          # Tailwind + ShadCN tokens
    ├── components/
    │   ├── editor/
    │   │   ├── screenshot-editor.tsx   # Top-level editor (state, autosave, export)
    │   │   ├── toolbar.tsx             # Platform tabs, device select, theme, locale, export
    │   │   ├── sidebar.tsx             # Screen list with @dnd-kit reordering
    │   │   ├── slide-thumb.tsx         # Draggable screen card
    │   │   ├── preview-stage.tsx       # ResizeObserver-scaled connected canvas
    │   │   ├── inspector.tsx           # Right-pane controls for active slide
    │   │   ├── screenshot-picker.tsx   # File drop + picker
    │   │   ├── slide-canvas.tsx        # Data-driven screen/deck renderer (all layouts)
    │   │   └── device-frames.tsx       # Phone, AndroidPhone, IPad, tablets
    │   └── ui/                         # Minimal ShadCN primitives (button, select, etc.)
    └── lib/
        ├── constants.ts                # Canvas sizes, export sizes, themes, frame ratios
        ├── defaults.ts                 # Initial slide decks per device
        ├── types.ts                    # Slide / ProjectState / Theme types
        ├── storage.ts                  # useProject() — localStorage autosave hook
        ├── image-cache.ts              # preloadImages + img() helper
        └── utils.ts                    # cn() helper

Hand-off Behavior

When you finish scaffolding, start the dev server (bun dev / pnpm dev / yarn dev / npm run dev) and then tell the user the following, in this order:

1. The server is running at `http://localhost:3000` (or whichever port Next picked — read it from the dev server output and quote the actual URL). Tell them to open it in the browser. 2. How to run it next time — give them the exact two-command recipe for their package manager:

   bun install   # only needed the first time, or after pulling new deps
   bun dev       # → http://localhost:3000

Substitute pnpm / yarn / npm run as appropriate for what was detected in Step 2. 3. Which platforms have starter decks seeded (iOS, Android, or both). 4. Any user-supplied screenshots that didn't match the expected filenames (so they can rename or use the in-editor drop target). 5. Point them at the Export bundle button once they're happy with the layouts. 6. Invite further edits: say something like _"Feel free to ask me to make any changes you'd like to the screenshots — copy, layout, palette, anything. I can iterate with you."_ 7. Showcase callout (always include this, verbatim spirit):

Check out apps generated by this skill here: https://www.parthjadhav.com/products/app-store-screenshots — and tag @parthjadhav8 on Twitter if you want your app to be added to the showcase.

Style Prompts

A library of named visual styles distilled from the best App Store screenshots in the wild. When a user names one of these styles (or pastes one of the prompts), the screenshot deck should adopt the entire spec in the matching file — palette, typography, layout rhythm, decorative accents, and copy tone.

Apply a style globally first; let the user override specific slides afterwards.

If a user gives a prompt that does not match a named style, fall back to the General Visual Design Principles in SKILL.md and pick the closest style here as the starting point.

---

Deep style spec index (./style-prompts/)

Before you read any deep spec, read [`./style-prompts/_QUALITY_BAR.md`](./style-prompts/_QUALITY_BAR.md). It defines the universal sizing, illustration-polish, contrast, and auto-reject rules that apply to every style. Each deep spec adds style-specific quantitative rules on top.

When a user names one of these styles, ALWAYS read the matching deep spec file before generating slides.

---

How to apply a style

When a user invokes a style by name (e.g. "use the Hand-Drawn Editorial style"):

1. Read the matching deep spec file (and _QUALITY_BAR.md first). 2. Set the theme palette to the listed hex values. 3. Set the font family for headline + body to the listed stack. 4. Match the listed headline emphasis behavior. 5. Apply the listed layout rhythm (which slide types and in what order). 6. Decide whether the deck should include a cross-screen/cross-canvas moment. For 5+ slide decks, include one tasteful adjacent-screen bridge when the style supports it; keep minimal or photo-led styles subtle. 7. Add the listed decorative accents on at least 60% of slides. 8. Rewrite the copy tone to match the listed voice rules.

If the style and a user-supplied brand color clash, keep the brand color and adjust adjacent palette entries to be analogous.

---

Combining and overriding

• If the user names a style and gives custom brand colors, swap the palette colors closest in lightness to the brand colors but keep the typography and accent rules intact.
• If the user names a style and a layout (e.g. "style 05 but with style 04's layout rhythm"), keep the named style's typography + accents, swap only the layout rhythm.
• If two styles are named, pick the first as primary and pull at most one element (typography OR decoration) from the second.
• Cross-screen moments inherit the primary style's rules. In a moody/photo style, continue a photograph, vignette, or notification across the seam; in an editorial style, use a tilted phone, doodle, or sticker trail; in a maximalist style, let chips, mascots, or 3D objects bridge the pair. Never use the cross-screen device as an excuse to break type contrast, phone sizing, or standalone readability.

Adding new styles

When the user describes a new style not in this list and likes the result, propose appending a new deep spec file in ./style-prompts/ using the next sequential number, following the same field layout as the existing specs (Palette / Typography / Headline emphasis / Layout rhythm / Decorative accents / Copy tone), then add a row to the index table above.

Universal Quality Bar (read before any style spec)

These rules apply to every style in this folder. They override slide-specific instructions only when violated by them. If your output fails any of these, it is not done.

Canvas reference: every rule below is calibrated to the App Store iPhone canvas 1320 × 2868 (6.9"). For other canvas sizes, scale proportionally by canvas width.

---

1. Composition (no dead space, no clipping)

• Phone must occupy 68–82% of the canvas vertical height when a phone is present (spec-permitted "no-device" slides exempt). Below 65% means the phone reads as small and the slide reads as empty.
• Headline + phone together must occupy at least 80% of canvas height. The remaining 20% is split between top margin (above headline) and bottom margin (below phone). No single empty band > 22% of canvas height.
• Headlines must auto-fit horizontally. If a single word's measured width > 88% of canvas width at the chosen font size, you MUST do one of: (a) break the word onto its own line; (b) reduce font size to fit; (c) hyphenate. Letters running off-canvas is an instant fail. Verify with a measurement pass — do not eyeball.
• Use up to 3 visual layers max per slide: background → phone/illustration → headline + 1 accent. Above this becomes noise.
• Never center-vertically a phone with empty bands above AND below. Anchor the phone to one edge (top bleed, bottom bleed, or flush bottom).

2. Cross-screen / cross-canvas moments

The template exports crops from one connected canvas. Use that power sometimes, not constantly:

• Default frequency: in a 5+ slide deck, include one adjacent-screen cross-canvas moment unless the user's brief is strict, formal, or every screen must stand alone for legal/compliance reasons. In 8-10 slide decks, use at most two. In 3-4 slide decks, use it only when the concept obviously benefits.
• Standalone rule: every exported PNG must still read as one complete advertisement at thumbnail size. The neighbor may add delight, but it must not be required for comprehension.
• Good seam-crossers: oversized non-critical phone edges, screenshot mosaics, background gradients/photos, map routes, doodle paths, waveforms, sticker trails, glow/starfields, mascot limbs, 3D props, notification cards, and soft shadows.
• Bad seam-crossers: headline text, app name, legal copy, price, rating, CTA, required store info, faces/eyes, key chart numbers, primary product claim, or UI the headline depends on.
• Amount: let 10-30% of a visual cross the seam. Above 40% is allowed only for backgrounds, abstract paths, or deliberate panoramas; otherwise each crop feels like an accident.
• Style fit: minimal/photo-led styles should use background/photo continuation or one quiet card crossing the seam. Editorial and maximalist styles can use tilted devices, doodles, stickers, chips, mascots, or 3D objects, but still obey the style's density rules.
• Seam placement: put the boundary through negative space, a simple shape, or a shadow/texture transition. Never cut through detailed anatomy, text, or the focal point of a screenshot.

If a cross-screen element makes either individual crop feel broken, remove it or turn it into a contained single-screen element.

3. Illustration & SVG quality bar (anti-clipart)

The single biggest failure mode is "Figma-quick-draw" mascots and props that read as clipart. Every illustrated element must clear at least 3 of these 5 polish gates:

1. Two or more fill tones per major shape — a body shape gets a base fill PLUS a 5–15% darker shadow side AND/OR a 5–10% lighter highlight rim. Single-flat-fill shapes are clipart. 2. A cast shadow on the ground — an elliptical drop shadow under standing characters/objects at 10–25% black opacity, 60–80% of object width, blurred 6–10px. Floats without shadows look pasted in. 3. A surface texture — halftone dots, paper grain, film noise, micro-stipple, or specular streak — whichever the style demands. At least 4% opacity, never zero. 4. Volume cue — at minimum an inner-shadow on the shaded side, a specular highlight on the lit side, OR a contour line that thickens on the shadow side. Flat outlined shapes with no volume cue look like icons. 5. Detail density appropriate to scale — a mascot rendered at 300px on a 1320px canvas needs visible facial expression (eyes with highlights, mouth with depth, cheeks/blush). The viewer should not be able to count the shapes in 1 second.

A 30-second sanity test: if you cropped the mascot/illustration out and put it next to a piece of art from the style's named inspiration (Cancoco, Mate, Superlist, etc.), would it look like it belongs in the same product, or would it look like a knock-off? If knock-off, re-render.

4. Mascot & illustration sizing minimums

When a style features a mascot/character/object, it must be physically large on the canvas — viewers see thumbnails:

If the spec gives a specific size, that size wins. Otherwise, use these minimums.

5. Typography contrast & legibility

• All headline text must clear WCAG AA 4.5:1 against the local pixel underneath it. If your headline sits over a gradient or photo, sample the worst pixel under the letter shapes — not the average — and verify against that.
• The "emphasis word" trap. Accent / italic / colored emphasis words are the most common contrast failure point: they're often a pale tint of the brand color (lilac on cream, mustard on sage, peach on tan) chosen for style without measuring contrast. Every emphasis color must independently clear 4.5:1 against its slide bg. If it doesn't, swap to a darker variant of the same hue family — never just "hope the user catches it." Examples that historically failed:
• lilac #B49BE6 on cotton-candy gradient → 2.3:1 → FAIL, must darken to deep violet ~#5B3FC8
• mustard #F2BB46 on sage #BFD9B6 → 1.7:1 → FAIL, must switch hue to coral #E45A4A (~4.1:1) or darken to brown-mustard #7A4F1B
• any pale color over a 3-stop pastel gradient → ALWAYS verify against the lightest stop, not the average
• If contrast falls below 4.5:1 anywhere under the headline, you MUST do one of: (a) swap the color to a darker/different hue; (b) add a scrim (linear gradient overlay) under the text; (c) add a text-shadow large enough to lift contrast (2–4px offset, 30–45% alpha — not a "subtle" shadow that disappears in thumbnails); (d) move the headline off the busy area. Never ship low-contrast text and hope.
• Headline-over-decoration rule: if a 3D object (globe, mascot, glossy numeral, etc.) sits in the same vertical band as the headline, the headline letters MUST NOT cross the object's silhouette. Either move the object or move the headline — overlap is always a contrast disaster.
• Inside floating chips and stickers, body text must clear 4.5:1. Tiny labels (< 12px equivalent) must clear 7:1.
• Subtitle / body copy on textured bg (cork mosaic, paper grain, photo, gradient) must be either (a) larger than 36px equivalent at 1320px canvas width AND ≥ 4.5:1, OR (b) sit on a clean rounded scrim card. Small navy text on cork mosaic at 28px = unreadable at thumbnail size.
• Never use pure #FFFFFF text on a pure-saturated mid-tone background (e.g., white on #7BC9F5 cyan) — drop to a near-white tinted with the bg's complement, or add a scrim.

6. Headline composition rules

• Max characters per line, soft cap by canvas width: floor(canvasWidth / fontSize × 0.45) chars. For a 96px Inter Bold headline on 1320px canvas, that's ~13 chars/line including spaces. Going over forces clipping risk.
• Max 3 lines for any headline. 2 is better. 1 is allowed only if the line fits comfortably in < 80% canvas width.
• Hand-break lines for visual rhythm. Each line should be approximately the same width OR alternate short-long deliberately. Avoid one fat line and one tiny widow line.
• Trailing punctuation: follow the style's spec. Default to a single period at end of full sentences; never a question mark in marketing headlines unless the spec allows it; never multiple exclamation marks.
• Tracking and leading for big display type: leading should be ≤ 1.05 (lines should kiss), tracking should be slightly negative (-0.01em to -0.03em). Loose default browser leading at display size always looks amateur.

7. Phone treatment

• Bezel sizing matches the iPhone 15 Pro silhouette: corner radius scales with phone width. At 920px phone width (≈70% canvas), use a 52–56px outer radius and a 36–42px inner screen radius.
• Phone screenshot fill: the user-supplied screenshot must fill the inner screen edge-to-edge with no white margin and no visible status-bar duplication. If the screenshot has a transparent background, that's a bug — flatten it first.
• Tilt range: respect the spec. If the spec calls for upright (0°), stay upright. If the spec allows tilt, stay within the stated range; never exceed it.
• Phone drop shadow tinted with the bg: pure black shadow on a colored bg looks pasted-in. Tint the shadow with the bg complement at 10–20% opacity. Two-shadow stack always (a long soft shadow + a tight contact shadow).
• Use the default iPhone bezel. Every phone-bearing slide MUST render the user's screenshot inside the template's default Phone device frame (the iPhone mockup PNG at public/mockup.png driven by the Phone component in src/components/editor/device-frames.tsx). Do NOT replace it with a bezelless rounded rectangle, a paper cutout, a cream paper border, or any custom-drawn frame. The bezel is the unifying visual across the whole skill output — strip it and the screenshots lose the iPhone read at thumbnail size. Per-style spec sheets may tint or shadow the area around the bezel, but they must NOT replace the bezel itself.

8. Background quality

• No accidental gradient on flat-color slides — if the spec says "flat" the bg must be a single hex, no gradient at all. Inverse: if the spec calls for a gradient, the gradient must use at least 3 stops with intentional hue shift, not a 2-stop near-identical-color gradient.
• Noise / grain texture at the opacity the spec requires. 0% noise on styles that demand grain (Retro Rubberhose, Hand-Drawn Editorial, Moody Curated Dating) is a fail.
• Vignette only when the spec calls for it. Adding a vignette to a Glassy Iridescent slide kills the brightness; omitting it on Moody Curated Dating kills the atmosphere. Follow the spec.

9. Decoration density discipline

Per slide:

• Minimal styles (Crisp Teal Bezelless Wallet, Editorial Minimal, Moody Curated Dating): 0 floating decorations.
• Editorial styles (Hand-Drawn Editorial, Soft Sunset): 2–5 decorations, intentionally placed.
• Maximalist styles (Glassy Iridescent Social, Paper Sticker Skeuomorphic, Glossy 3D K-Beauty): 8–14 decorations, scattered with at least one bleeding off-canvas.

Decoration density wrong-side either way (sparse maximalist or dense minimalist) reads as a style misfire.

10. Auto-reject checks (run before declaring done)

Before exporting, run through this list. Any "yes" means re-render:

• [ ] Any text running off-canvas or clipped by a slide edge?
• [ ] Any cross-screen element making an individual export incomprehensible, accidentally clipped, or dependent on its neighbor?
• [ ] Any seam cutting through headline text, legal/store info, faces/eyes, key UI, or the primary product claim?
• [ ] Any phone smaller than 65% of canvas height (on a phone-bearing slide)?
• [ ] Any empty band wider than 22% of canvas height?
• [ ] Any mascot/object below the minimum size for its role?
• [ ] Any headline text failing WCAG AA contrast at its hardest point against the bg?
• [ ] Any illustrated element failing 3+ of the 5 polish gates?
• [ ] Any pure-white text on a saturated mid-tone bg without scrim?
• [ ] Any single decoration that visibly snaps to a horizontal/vertical pixel grid in a style that calls for hand-placed rotation?
• [ ] Any image flattened with a transparent or black-rectangle artifact?
• [ ] Any "chrome" / "glass" / "3D" treatment that reduces to a flat color shift with no extrusion + highlight + shadow stack?

The agent's job is not done until all of the above are "no."

11. The thumbnail test (mandatory)

Shrink the rendered PNG to 220px wide (App Store search-result thumbnail). Squint. Answer in one sentence: 1. What style is this? 2. What does the app do? 3. Why should I tap it?

If you cannot answer all three in one sentence, the slide failed the thumbnail test. The most common cause is undersized typography or a phone that becomes a tiny rectangle when scaled.

Retro Rubberhose Mascot

READ FIRST: `./_QUALITY_BAR.md` — universal quality rules apply to this style.

Hard quality rules (this style)

• Phone size on phone-bearing slides (this includes the HERO — the hero is NOT exempt): phone height = 80–88% of canvas height (≈ 2300–2520 px on a 1320×2868 canvas). The phone bottom MUST bleed off the canvas edge by 4–10% of its own height. *Concretely: render the phone at `height = canvas.height 0.84` and crop the bottom.** On the hero, the mascot row (4 walking variants) peeks from BEHIND the phone — partially hidden behind its lower edge, not in front of an empty cream slab. Phone smaller than 80% canvas height on the hero is a hard fail.
• Use the default iPhone bezel. Use the template's stock Phone device frame (the iPhone mockup PNG). Do NOT replace it with a cream paper bezel, a hand-drawn outline, or any custom frame. The retro warmth comes from the cream/mustard backgrounds, mascot, and inside-phone UI stickers — not from re-skinning the iPhone itself. A 1-2% warm tint behind the phone (drop shadow color, halo glow) is fine.
• Mascot scale is non-negotiable: hero/cover mascot ≥ 420px tall on a 1320×2868 canvas (≈ 14.5% canvas height). Companion mascots ≥ 300px. A 150px mascot in the corner is a fail.
• Mascot polish gates — must hit ALL of these:

1. Halftone shadow on the lower-right third of the body: black dots at 8–14% opacity, dot size 3–4px, denser at edge, fading toward middle. Pure flat fill = clipart. 2. Pie-cut eyes ≥ 22% of body width each, two large overlapping ovals, wedge cut from each, cream #FBEFD2 whites (not pure white), large solid pupils, tiny cream highlight dot upper-right of pupil. 3. Mitten gloves with 3 black curved cuff lines on each wrist. No cuff lines = no character. 4. Sausage-tube arms and legs — uniform width, no joints. Knees and elbows are forbidden. 5. Elliptical ground shadow under any standing mascot: ~80% body-width wide, 8–10px tall, blurred 6px, #1A1A1A at 12% opacity. 6. Surface line weight ≥ 3.5px black ink at this scale, uniform width, stroke-linecap: round. Hairlines are a fail.

• The bezel is the default iPhone mockup — see above. (Earlier drafts of this spec required a cream paper bezel; that requirement is rescinded — use the stock bezel.)
• Paper grain noise on every bg at 7–9% opacity (SVG feTurbulence baseFrequency 0.65, mix-blend multiply).
• Headline emphasis squiggle: hand-drawn SVG path, 4–6 control points, 4–5px stroke, accent color (see below), extends 8–16px past the underlined word.
• Accent color = coral `#E45A4A` by default. Mustard #F2BB46 is reserved for backgrounds, not accents — mustard-on-cream is ~2:1 contrast (the warm yellows sit at similar lightness as cream/sage) and reads as faded. Coral pops on every bg in this palette.
• Cream #F4E6CC bg → coral #E45A4A accent ✅ (~4.6:1)
• Mustard #F2BB46 bg → coral #E45A4A accent ✅ (~4.0:1) or deep brown #5C3A1E ✅
• Pink #F3A6B7 bg → coral #E45A4A accent ✅ or deep brown #5C3A1E ✅
• Sage mint #BFD9B6 bg → coral #E45A4A accent ✅
• Cowboy-brown / terracotta bg → cream #FBEFD2 accent ✅
• The rule: coral is the universal accent; only swap to deep brown/cream when coral itself clashes with bg-adjacent stickers/illustrations.
• Sticker UI inside the phone: every card/button has the 2-3px black border + the hard offset shadow 0 3-4px 0 #1A1A1A. Soft blur shadows are a fail.

Vibe summary

This is a warm, hand-drawn world that feels like a vintage tin lunchbox someone forgot in a sunny attic. A chunky yellow can-shaped mascot with white gloves and pie-cut eyes walks you through your day, surrounded by cream-paper backgrounds and chunky brown display type. Every shape is hugged by a fat black ink outline, every color is dialed warm (mustard, peach, pink, mint), and the UI inside the phones is rendered as soft sticker buttons that look pressable. The overall feeling is "1932 cereal box meets 2026 wellness app" — playful, slightly silly, and never cold or corporate.

Global palette

Warm cream backgrounds

• Primary cream paper: #F4E6CC (slide 1, slide 3 base, slide 5 stat-card)
• Soft butter cream: #FBEFD2 (lightest variant, inside phone areas)
• Warm off-white: #FAF3E3 (status bar / card highlights)

Accent backgrounds (full-bleed slide colors)

• Mustard sun: #F2BB46 (slide 2 main background, the "16628 steps" slide)
• Mustard deep: #E5A52E (gradient bottom edge on slide 2)
• Bubblegum pink: #F3A6B7 (slide 4 "more you walk" slide background)
• Salmon coral: #F19A8E (decorative accents inside pink slide)
• Sage mint: #BFD9B6 (slide 5 green stats slide)
• Mint deep: #9CC692 (chart bars, accent shadows on mint)

Character body fills

• Mustard can-yellow: #F2BB46 (primary mascot body)
• Peach: #F2B07A (secondary mascot body)
• Pink mascot: #EE92A4
• Cowboy / wide character body: #E08767 (terracotta)

Text & ink

• Outline ink: #1A1A1A (a true-warm near-black, never pure #000)
• Brown wordmark fill: #5C3A1E (the CAN COCO logo color)
• Body text dark: #2A2118 (slightly desaturated coffee)
• Caption gray: #6B5E4D (warm gray for secondary copy)

UI accents inside phone

• Coupon yellow chip: #FCD34D
• Soft red "TODAY" stamp ink: #C0392B
• Mint button accent: #8FCB9B

Mascot anatomy & rules

The mascot is the soul of this style. Document every rule strictly.

Body shape

• A rounded upright soft rectangle / oval can — roughly 1.0 wide × 1.25 tall ratio.
• Top: a soft dome (think a can lid with no sharp seam).
• Bottom: identical rounded dome.
• Side silhouette is slightly convex — the can bulges out 4-6% in the middle.
• Cowboy / "wide" variant: same height but ~1.4× width, more pumpkin-shaped.

Fill color

• Default: mustard #F2BB46.
• Peach variant: #F2B07A.
• Pink variant: #EE92A4.
• Body is rendered with a subtle inner shadow on the lower-right third — inset -8px -10px 0 0 rgba(180, 120, 30, 0.18) equivalent — to suggest 3D roundness without losing flatness.

Eyes (pie-cut eyes)

• Two large overlapping ovals, roughly 22% of body width each.
• Whites are pure cream #FBEFD2 (NOT pure white — keep them warm).
• Each eye has a pie-cut slice removed (a wedge missing, classic 1930s style), filled with body color OR with the dark pupil itself.
• Pupils: solid #1A1A1A, large (about 60% of the eye), positioned to convey expression (looking up-left, down-right, etc.).
• A tiny #FBEFD2 highlight dot may sit at the upper-right of the pupil (1-2px at full size).
• Eyes are outlined with the same 3-4px black stroke as the body.

Hands & gloves

• White four-fingered mitten gloves — classic rubber-hose hands.
• Glove fill: #FBEFD2 (warm cream, never pure white).
• Glove outline: same 3-4px black.
• 3-line cuff detail — three small black curved lines on the wrist of each glove (the classic button-cuff).
• Hand silhouette is a soft pillow oval with a thumb stub and the suggestion of fingers (often just a slight pinch line, not full finger separation).
• Arms are sausage tubes — uniform thickness, no elbow joint, no shoulder seam. They emerge directly from the body silhouette.
• Arm width: ~14% of body width.

Feet / legs

• Same sausage-tube rule: legs are rounded stubs, no knee.
• Shoes: simple rounded black or brown lozenges that look like vintage spats or oxfords.
• One foot usually lifted in a walk cycle pose.

Outline rules

• Every shape gets a solid black `#1A1A1A` stroke at 3-4px when the mascot is rendered at ~280-360px tall (on a 1242px phone canvas this is roughly 1% of canvas width).
• Stroke is uniform width — no tapering, no calligraphy.
• Stroke style: stroke-linecap: round; stroke-linejoin: round;
• NEVER use a thin or hairline outline. If in doubt, make it thicker.

Pose vocabulary

• Walking forward: one arm raised in a wave, one leg lifted, slight forward lean.
• Holding object: both gloves cupped in front holding a coin, coupon, or phone.
• Leaning back / posing: hand on hip, the cowboy-hatted variant.
• Tipping hat: cowboy variant with one glove on hat brim.
• Headband / sweatband: fitness variant with a red or pink terry headband.
• Sitting / chilling: shorter pose, both legs forward.

Costume / accessory variations seen

• Cowboy hat: brown #8B5A2B ten-gallon hat with a darker band.
• Red sweatband: thick #E74C3C headband across the forehead.
• Sunglasses: black rounded squares, no shine.
• Tiny phone / coin / coupon held in gloves.

Surface texture on body

• A very light halftone dot shadow sits on the bottom-right curve of the body — small #1A1A1A dots at ~8% opacity, arranged in a gradient density (denser at the shadow edge, fading out). This is the 1930s newsprint feel.

Typography

Headline display font

• Cooper Black (or Recoleta Black, Filson Soft Black, Sofia Pro Black as fallbacks).
• Weight: 900 / Black.
• Letter-spacing: -0.01em.
• Line-height: 1.05.
• Color: dark brown #2A2118 for body text, or accent color (mustard / red) for the highlighted word.

Wordmark font (the "CAN COCO" logo)

• A custom-feel chunky slab/sans — closest off-the-shelf match: Recoleta Black or Cooper Std Black with manual tracking.
• Color: deep brown #5C3A1E.
• Inline white shadow: each letterform has a thin (2-3px) cream #FBEFD2 inline highlight offset by 1px 1px toward the upper-left, sitting INSIDE the letter shape. This creates the classic 1930s "embossed candy bar" look.
• Letter-spacing: 0.02em.
• All-caps.

Body / UI label font

• Nunito or Fredoka at weight 600-700.
• Rounded sans, slightly bouncy.
• Color: #2A2118 for primary, #6B5E4D for secondary.

Caption font

• Same Nunito family, weight 500, size ~11-13px on phone canvas.

Text effects checklist

• Headline emphasis word: color swap to mustard #F2BB46 or coral #F19A8E, often paired with a hand-drawn squiggle underline in black 3px.
• Wordmark: inline cream shadow as above.
• Sticker labels (App Store badge): cream pill with thin black border.
• NO neon glows. NO gradients on type. NO modern variable-weight tricks.

Headline emphasis

• One word is colorized — usually the action verb. Examples: in "Walk Can be a lot of fun", the word "Walk" is mustard #F2BB46 while the rest is dark brown #2A2118.
• The emphasized word may sit on its own line for visual weight.
• A hand-drawn underline squiggle sometimes sits under the emphasized word — 3px black, gently wavy (not perfectly straight).
• Mixing case: headlines are sentence-case ("Walk Can be a lot of fun"), not Title Case or ALL CAPS, except for the wordmark.

Phone / device frame treatment

• Bezel: warm cream `#F4E6CC` for the outer shell, NOT standard black. This makes the phone feel like a tin toy.
• Frame thickness: ~14-18px outer ring.
• Inner ring: a 2-3px #1A1A1A black outline traces the outer edge of the phone AND the inner screen edge (because every shape gets the black ink treatment).
• Corner radius: outer 48-56px, inner screen 36-42px (Apple-ish, but exaggerated softness).
• Shadow under phone: a single soft drop shadow, warm-toned: 0 24px 40px -8px rgba(92, 58, 30, 0.22). Never blue, never pure black.
• Status bar inside phone: simplified — small clock at top-left in dark brown, signal/wifi/battery icons in dark brown, NO color.
• Phone tilt: slides 1 and 3 use straight upright phones; slides with the mascot interacting may show a tiny ±2° tilt. Avoid heavy 3D rotation.
• The phone often sits with its bottom edge cropped off the slide to feel grounded.

Background treatment

• Solid warm cream #F4E6CC is the workhorse background.
• Accent slides use full-bleed flat color (mustard, pink, mint) — no gradients EXCEPT a very subtle vertical darken at the bottom 25% (e.g., mustard #F2BB46 → #E5A52E).
• Paper grain overlay: a 6-8% opacity noise texture across every background. CSS: background-image: url(noise.png); mix-blend-mode: multiply; opacity: 0.07;.
• NO photographs as backgrounds. NO gradients with multiple stops. NO blurs.
• Optional: a very faint repeating halftone dot pattern at the slide edges, ~4% opacity, dot size 3px, spacing 8px.

Decorative accents

• Halftone dot fields: small black dots on a transparent layer, used to suggest shadow under the mascot or to fill a corner.
• Scattered ink doodles: tiny stars (4-point asterisks), squiggles, plus signs, small hearts — all in black 2-3px stroke, sprinkled in negative space at ~6-10% density.
• Sparkle stars: 4-point sparkle shapes (like a Twinkle Twinkle Little Star icon) in cream or mustard near the mascot's face to suggest cuteness.
• Sunbeam rays: optional — 8-12 thin triangular rays radiating from behind the mascot on accent-color slides, in a slightly lighter tint of the background (mustard rays on mustard at +8% lightness).
• Footprint trail: small black footprint icons trailing behind a walking mascot, fading from 100% to 30% opacity along the trail.
• Polka dots: large #FBEFD2 cream dots scattered on pink slide background, 24-40px diameter, very low density.
• Hand-drawn arrows: chunky black 4px-stroke arrows with rounded heads, pointing at UI elements.

Icons & UI sticker treatment

Inside the phone screens, every UI element is a sticker with personality.

• Buttons: rounded squircle pills, corner radius 18-24px.
• Button border: 2-3px solid #1A1A1A.
• Button fill: warm cream #FBEFD2 for neutral, mustard #F2BB46 for primary, mint #9CC692 for success.
• Button drop shadow: 0 3px 0 0 #1A1A1A (a hard offset shadow that makes it look like a stuck-on sticker), NOT a soft blur.
• Inset highlight: a 1px cream #FBEFD2 line along the top inside edge of the button.
• Button label: Nunito 700, 14-16px, dark brown.
• Icon style inside buttons: simple line icons, 2.5px stroke, rounded caps, black ink — never filled flat icons.
• Cards: corner radius 20-28px, same 2-3px black border, same hard offset shadow, cream fill with a subtle paper noise.
• The "TODAY" coupon-style stamp uses a red #C0392B distressed ink stamp font, slightly rotated -8°.
• Bullet list items in slide 1: each bullet is a small mascot-color filled circle outlined in black, NOT a generic dot.

Photo / illustration treatment

• No photos anywhere. Every visual is flat vector illustration with subtle textural fills.
• Body fills get a halftone shadow on the shadow side (described in Mascot anatomy).
• Each character has a soft elliptical drop shadow on the ground beneath them — pure #1A1A1A at 12% opacity, ellipse ~80% of body width, 8-10px tall, blurred 6px. This grounds the character without breaking the flat aesthetic.
• No gradient meshes, no realistic shading, no Photoshop layer styles. The shading vocabulary is: flat fill + halftone dots + a single mid-tone shape (optional) + black ink outline.
• Illustrated props (coins, hats, coupons) follow the same rules: flat fill, 3-4px black outline, optional halftone shadow.

Copy tone

• Childlike enthusiasm, second-person, friendly verbs.
• Exclamation marks are welcome but not overused (max one per headline).
• Sentence-case throughout, not Title Case.
• Use simple short words: "Walk", "fun", "cute", "buddy", "today", "steps".
• Quoted lines actually visible on this mosaic:
• "Walk Can be a lot of fun"
• "Cute walking buddy"
• "Step count redeem for cans"
• "Encountering animals on walks"
• "Walking Companion"
• "16628" (large step count)
• "CAN COCO" (wordmark)
• "TODAY" (coupon stamp)
• "The more you walk the more animals you meet"
• "Accurate Data Recording"
• "App Store — Featured on Today" (top badge on slide 1)

Per-slide breakdown (mandatory)

Slide 1 — "Walk Can be a lot of fun" cover with bullet list

• Background: warm cream #F4E6CC full bleed with 7% paper noise overlay.
• Top badge: an "App Store — Featured on Today" pill at the very top, cream fill, 2px black border, small Apple logo and red "Today" word inside. Centered horizontally, ~60px from top.
• Headline: "Walk Can be a lot of fun" — large Cooper Black, three lines, left-aligned, starting ~120px from top, left padding ~60px. "Walk" word is mustard #F2BB46, rest is dark brown #2A2118. Font size ~84-96px on a 1242px canvas.
• Bullet list: three rows below the headline.
• Each bullet: a 24px circle filled in mustard, peach, or pink with a 2.5px black outline.
• Each label: Nunito 600, ~28-32px, dark brown.
• Lines: "Cute walking buddy", "Step count redeem for cans", "Encountering animals on walks".
• Row spacing: ~48px vertical gap.
• Mascot placement: a row of 4-5 small mascot variants at the bottom edge of the slide, walking left-to-right, partially cropped at the bottom. Includes the default yellow, peach, cowboy-hat brown, and a sunglasses variant. Each about 180-220px tall.
• Floating elements: a few sparkle stars and ink doodles between mascots.
• Notable effects: subtle ground shadow under the mascot row; paper grain visible throughout.

Slide 2 — Mustard "16628 steps" slide with phone & CAN COCO wordmark

• Background: full-bleed mustard #F2BB46 with a vertical gradient darkening to #E5A52E at the bottom 25%. 6% paper noise overlay.
• Headline / wordmark: "CAN COCO" wordmark in deep brown #5C3A1E with cream inline highlight, sitting in the bottom-right area, stacked on two lines ("CAN" / "COCO"), font size ~110-140px, very chunky.
• Phone: a single phone centered slightly left, straight upright, cream bezel, showing a screen with a large "16628" step count in dark brown Cooper Black centered, mascot illustration above the count, a "TODAY'S" coupon-style label below in red ink stamp, and a yellow primary action button at the bottom. Phone is roughly 60% of slide height.
• Mascot placement: a tiny mustard mascot inside the phone above the step count; also potential walking mascots along the bottom edge outside the phone.
• Floating elements: scattered sparkle stars in cream around the wordmark; subtle sunbeam rays behind the phone (mustard +8% lightness).
• Notable effects: warm soft drop shadow under the phone; the "TODAY'S" stamp is rotated -6° to feel hand-applied.

Slide 3 — "Walking Companion" on white/cream

• Background: soft butter cream #FBEFD2 full bleed with 6% noise. A subtle horizon line of slightly darker cream at the lower third.
• Headline: "Walking Companion" at the top center, Cooper Black, dark brown, ~72px, single line, with a small mascot-color highlight dot to the left of the word.
• Phone: a single phone, upright, cream bezel, showing a "home" screen with three mascot character cards (mustard, peach, cowboy) arranged in a 3-column grid, the big "16628" stat below, and a primary mustard CTA at the bottom labeled with a short action verb.
• Mascot placement: two larger mascots OUTSIDE the phone, one on the left (peach, holding a coin) and one on the right (cowboy-hat brown, tipping hat), each about 320px tall, both grounded with elliptical ground shadows.
• Floating elements: small footprint trail between the two outside mascots; a couple of ink-doodle stars.
• Notable effects: the three card portraits inside the phone each have a 3px black border and a hard offset shadow; subtle halftone shadow on the right side of the outside mascots' bodies.

Slide 4 — Pink "more you walk, more animals you meet"

• Background: full-bleed bubblegum pink #F3A6B7 with 6% noise. Scattered large cream #FBEFD2 polka dots at low density (~6 dots, 28-40px each).
• Headline: "The more you walk the more animals you meet" at the top, two or three lines, Cooper Black, dark brown, ~58-66px, centered. The phrase "more animals" may be colorized in coral #F19A8E.
• Phone: a single phone, slight 2° tilt to the right, cream bezel, showing a chat-style screen where the wider pink mascot greets the user with a speech bubble; a mustard CTA at the bottom.
• Mascot placement: the wide pink mascot (#EE92A4, pumpkin-shaped) sits centered inside the phone with arms wide open. A second smaller terracotta mascot (#E08767) stands outside the phone on the right at slide bottom.
• Floating elements: a few sparkle stars and tiny hearts in cream around the mascots; a soft halftone shadow patch under the phone.
• Notable effects: the chat bubble inside the phone has the same 2-3px black border and hard offset shadow as other sticker UI.

Slide 5 — Mint green "Accurate Data Recording" stats slide

• Background: full-bleed sage mint #BFD9B6 with 6% noise.
• Headline: "Accurate Data Recording" at the top, Cooper Black, dark brown, ~64px, with a sparkle icon to the left of "Accurate". "Data" may be colorized in deeper mint #9CC692 or in mustard #F2BB46.
• Phone: a single phone, upright, cream bezel, showing a stats / chart screen — a cream #FBEFD2 card at the top with a small bar chart in mint #9CC692 bars, a "Today" label, numeric stats in dark brown, and a yellow CTA button at the bottom.
• Mascot placement: a tiny mustard mascot inside the phone at the top of the stats card, waving. No exterior mascots (or one small one peeking from a corner).
• Floating elements: small ink-doodle plus signs and stars around the corners of the slide.
• Notable effects: chart bars have the same 2px black outline treatment; the card has a hard offset shadow 0 4px 0 0 #1A1A1A.

How to apply this style

1. Lock the palette first: cream #F4E6CC for base, mustard #F2BB46 / pink #F3A6B7 / mint #BFD9B6 for accent slides. 2. Apply a 6-8% paper grain noise overlay to every background. 3. Draw or place the mascot at consistent scale (~280-360px tall on a 1242px canvas). Always include the 3-4px black outline and white-gloved hands. 4. Set headlines in Cooper Black (or Recoleta Black), dark brown #2A2118, with ONE word colorized in an accent. 5. Render the wordmark in deep brown #5C3A1E with a 2-3px cream inline highlight offset to the upper-left. 6. Build phone mockups with cream bezels, not black. Add a 2-3px black outline tracing the phone edge. 7. Style all interior UI buttons and cards as stickers: rounded corners, 2-3px black border, hard offset shadow 0 3-4px 0 0 #1A1A1A, soft inset cream highlight on top edge. 8. Sprinkle small ink doodles (stars, sparkles, footprints) at 6-10% density in negative space. 9. Add an elliptical ground shadow under any free-standing mascot at 12% black opacity. 10. NEVER use pure white, pure black, or cool colors as primaries. Everything is warm.

What this style is NOT

• Do NOT use modern flat geometric icons (no Material symbols, no thin SF icons). Icons must be hand-feel line drawings with 2.5px rounded strokes.
• Do NOT use thin black outlines — outlines must be heavy, 3-4px, uniform.
• Do NOT use cold colors (no #FFFFFF whites, no #000 blacks, no blue/purple gradients) as primaries.
• Do NOT use realistic 3D shading or gradient meshes on the mascot — only flat fill plus halftone dots plus optional single mid-tone.
• Do NOT use sans-serif headlines like Inter, Helvetica, SF Pro. The headline MUST be a chunky retro display.
• Do NOT use Title Case in headlines — sentence-case only ("Walk Can be a lot of fun" is the rule).
• Do NOT use blurred soft shadows alone — sticker UI uses HARD offset shadows.
• Do NOT use photos, photographic backgrounds, photo textures of skin/landscape, or AI-photoreal renders.
• Do NOT use neon, glow, glassmorphism, or any 2020s-era trendy treatments.
• Do NOT separate the mascot's fingers into five — gloves are mitten-style with at most a thumb split.
• Do NOT make the mascot's pupils small dots — they are LARGE, expressive, and pie-cut.
• Do NOT use angular sharp corners on UI — every rectangle is a squircle with 18-28px radii.
• Do NOT use Apple's default black bezels for phone mockups — bezels must be cream.
• Do NOT crop the wordmark or shrink it below readable size; it deserves stage space.
• Do NOT center every headline — slide 1 uses left-aligned text, and slides vary intentionally.
• Do NOT overload a slide with more than ~3 mascots; the mosaic uses small character ensembles only at the bottom of slide 1.
• Do NOT pick saturated or candy-bright colors. The mustard is warm, the pink is dusty, the mint is sage. Everything reads as slightly faded vintage paper.

Moody Curated Dating

READ FIRST: `./_QUALITY_BAR.md` — universal quality rules apply to this style.

Hard quality rules (this style)

• Headline font size MUST be large. On a 1320×2868 canvas, the cream serif headline must render at ≥ 132pt (≈ 176 px) per line — minimum cap-height ~115 px. Previous renders at 78–82pt read as "small text floating in a dark void" and is a hard fail for this style. Use 140–160 px font-size as your default and only drop if the line genuinely cannot fit at 88% canvas width. Line-height ≤ 1.08. The subhead/italic underline can be 40–50 px.
• Phone size on phone-bearing slides: phone height = 78–88% of canvas height. Cover/hero slides without a phone keep the same headline-size rules.
• Photography or photo-grade gradient is mandatory. A simple 2-stop radial gradient on black is NOT enough. Build the fake-photo with at least: (a) a warm tungsten radial off-center at #C99566 → #8A5A33 → #1F1C1A → #0A0A0B, (b) a candle-bokeh blob (50px blur, 12% opacity, warm amber) in the upper third, (c) a teal-shifted shadow blob (40px blur, 8% opacity, #1A2026) on one side, (d) a radial vignette overlay radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.62) 100%), (e) a bottom linear linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%) covering the bottom 35–50%, (f) a 5% film-grain SVG overlay with mix-blend-mode: overlay. Skip any one and the slide reads as a plain dark gradient.
• Headline serif weight = 400 (regular), never bold or black. The contrast comes from italic, not weight. If your headline reads as "thick" you have used the wrong weight.
• Italic phrase MUST exist on every slide that has a headline. Same color, same weight, italic only. Without it, the headline is generic.
• macron diacritic over the wordmark `a`: a single horizontal cream #F4EBDD bar, length ~14% of cap-height, positioned one stem-width above the bowl of the a. Required on every wordmark instance. Omitting it breaks the lockup.
• Phone tilt = 0°. Tilted phones are a fail in this style.
• No saturated accent colors anywhere. Gold/candle-amber #C99566/#E8B97A is the only accent. Adding red/green/blue chips kills the mood.
• Photo never crops through eyes or jawline when actual photos are used.

Vibe summary

This style sells exclusivity through atmosphere, not through chrome or gradients. Every slide reads like a still from a 35mm short film about a private dinner club — warm tungsten light spilling across faces, deep teal-black shadows swallowing the edges, and a quiet serif headline floating like a whispered line of dialogue. The voice is selective, second-person, and a little romantic: "your circle," "hand-picked," "worth your time." Nothing shouts. The photography does all the heavy lifting, and the UI hides almost entirely so the brand reads as a lifestyle, not a product.

Global palette

Use these values as Tailwind arbitrary values or CSS custom properties.

Color philosophy: zero pure white, zero pure saturated colors. Even the brightest highlight is the warm cream, never #FFFFFF. Even "black" is a 1-2% warm-shifted dark, never #000.

Photography rules (signature)

These are non-negotiable. The photography IS the brand.

• Color grade: classic teal-orange. Highlights pushed to warm amber #C99566 / #E8B97A. Shadows pushed to cool teal #1A2026. Mids slightly desaturated. Hue shift roughly +8 on highlights warm, -12 on shadows cool.
• Saturation: sit it at ~70% of source. Reds should never glow; skin should look candle-lit, not Instagram-filtered.
• Contrast: high, with crushed blacks. Black point lifted to about RGB 8-12. Highlights rolled off so they don't clip — keep them around 235, never 255.
• Vignette: heavy radial darkening. Center at ~95% luminance, corners at ~55%. Use a radial-gradient overlay: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.62) 100%).
• Subjects: candid moments only — dinner parties, two friends embracing, head thrown back laughing, hand on glass of wine, eye-contact portrait at a bar. NEVER staged headshots, NEVER stock smiles, NEVER white-background product shots.
• Skin tone preservation: even with the warm grade, do not let skin go orange. Pull yellow out of skin slightly so warmth reads as light, not jaundice. Maintain ethnic skin-tone integrity — the grade should flatter every tone, not flatten differences.
• Lighting: warm key from side or above. Think practical lights — Edison bulbs, taper candles, a single window. Never on-camera flash, never softbox-flat. A visible falloff into shadow on one side of the face is mandatory.
• Film grain overlay: 4–6% monochrome noise on top of the entire photo. Use a tiled SVG noise or a filter: url(#grain) turbulence node. Grain stays consistent across all 5 slides for set cohesion.
• Bottom gradient overlay: the lower 35% of every photo gets a top-down linear-gradient linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 100%). This is what makes the white headlines legible without a card.
• Top gradient (light): the top 12% gets a subtle linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0)) so the wordmark sits cleanly.
• No HDR clipping, no halation, no chromatic aberration. This is cinema-grade, not filter-app.

Typography

• Headline face: thin to regular serif with high contrast strokes. Use one of: Tiempos Headline, GT Sectra, Canela, or Recoleta as a free fallback. Weight 400 (regular) for body of the headline, italic 400 for the emphasis phrase. Optical size: display.
• Headline size at 1290×2796 canvas: 78pt (≈104px) for the dominant title, 62pt (≈82px) for shorter titles on slides with phones.
• Line-height: 1.08. Tracking: −0.5%. Hanging punctuation off.
• Color: --cream #F4EBDD. No drop shadow. Optional 0–1px text-shadow rgba(0,0,0,0.35) only if grain breaks legibility.
• Subhead: same serif family, 34pt (≈45px), regular roman, color --cream-dim (cream at 72% opacity). One short line, no period required.
• Phone UI body: clean grotesque sans — Inter, Söhne, or SF Pro Display. Sizes inside phones: 13pt header, 11pt body, 9pt caption. Weight 500 for titles, 400 for body.
• Wordmark — `mate`: lowercase serif, same headline face, weight 400, size 44pt (≈58px) in the top-left of slide 1 and centered below the phone on slide 2. The wordmark has a diacritic-like macron or hairline stroke above the `a` — a single horizontal short bar (~14% of cap-height long) sitting one stem-width above the bowl of the a, drawn in --cream. It evokes a long-vowel diacritic (mā́te) and is part of the lockup. Always render the mark; never strip it.
• Tracking, leading, optical size:
• Display headlines: letter-spacing: -0.005em, line-height: 1.08.
• Subheads: letter-spacing: 0, line-height: 1.3.
• Phone UI: letter-spacing: -0.01em, line-height: 1.35.

Headline emphasis

Every headline contains ONE italicized phrase, never two. The italic phrase always carries the emotional payload of the line. Color stays identical to the rest of the headline (no color shift, no weight shift — italic only). Examples taken from the deck:

• "Every Thursday, with people at your level. Upgrade your circle." (italic on the imperative)
• "We make a filter so every person you meet is worth your time." (italic on the promise)
• "Every Thursday, We sit you at a table of 6 hand-picked members." (italic on the differentiator)
• "Every day, Limited curated profiles. Quality is key." (italic on the value prop)
• "Complete profil[es] — deep conversations." (italic on the product noun)

Rule: italicize the part that, if removed, would leave the line generic.

Phone / device frame treatment

• Bezel: matte black, very thin — 6–8px equivalent at canvas scale. No silver edge, no notch chrome reflection.
• Body: flat black #0A0A0B, no gloss. A subtle 1px inner stroke at rgba(255,255,255,0.04) to separate bezel from screen.
• Screen background: --ink-1 #0E0E10. Never pure black, never a gradient.
• Inner glow: an inset shadow on the screen inset 0 0 60px rgba(201,149,102,0.06) — a barely-there warm halo from the photo bleeding around the phone.
• Drop shadow: soft and warm-tinted. 0 40px 80px rgba(0,0,0,0.55), 0 8px 16px rgba(60,30,10,0.25).
• Tilt: essentially none. Phones sit upright, perpendicular to the canvas. Slight ±1° rotation is acceptable for life; never more.
• Status bar: rendered, monochrome white at 80% opacity, time 9:41, full signal, full battery. Never colored carrier text.
• Home indicator: 5px tall white pill at 35% opacity, 35% of screen width, centered, 8px from bottom.

Background photo placement & cropping

• Full-bleed: photo covers the entire 1290×2796 slide, edge-to-edge. Zero margin, no rounded corners on the photo itself (the App Store does that).
• Subject placement: off-center. Subjects sit on a vertical third — usually left third or right third — leaving the opposite negative space for typography. On full-screen-photo slides (no phone), subjects can also occupy upper third with text in the lower third.
• Rule of thirds: eyes of the primary subject sit on the upper third-line. Hands, glasses, and gestures live on the lower third-line.
• Face safety: never crop through eyes, never crop at the jawline. Hairline or shoulders are acceptable crop points.
• Photo extends below the headline gradient. The image itself never stops where the text starts — it fades behind via the gradient overlay.
• Aspect handling: if a source image is too tall or too wide, scale-to-fill (object-fit: cover) and bias the focal point toward the off-center subject.

Floating UI elements (notifications/stickers)

• Notification card (slide 2 — "Welcome to the circle"):
• Shape: rounded rectangle, border-radius: 22px (translates to ~28px at canvas scale).
• Size: ~78% of phone screen width, 96px tall at canvas scale.
• Padding: 16px horizontal, 12px vertical.
• Fill: --notif-fill rgba(28,26,24,0.78) with backdrop-filter: blur(28px) saturate(120%).
• Border: 1px --notif-border rgba(255,255,255,0.06), plus an inner 1px rgba(255,255,255,0.04) highlight at the top edge for glass realism.
• Shadow: 0 20px 40px rgba(0,0,0,0.45).
• Content: small square app icon (22px, gold M monogram on dark) on left; bold title "Welcome to the circle." in 13pt Inter Semibold cream; body "Membership approved, you're a perfect fit. Only 1 in 5 applicants passes the filter." in 11pt Inter Regular at --cream-mute.
• Position: bursts out of the phone — its right edge extends ~8% beyond the phone bezel, sitting roughly vertically centered on the screen. Gives the impression the notification is "lifting off" the device.
• Profile sticker bubbles (slide 3): small circular avatars overlapping the phone:
• Diameter: ~84px at canvas scale.
• Border: 2px solid --cream with an outer 1px --gold-hairline ring (two-tone ring effect).
• Drop shadow: 0 8px 20px rgba(0,0,0,0.55).
• Photo inside is the same warm-graded portraiture.
• Three bubbles per cluster, slightly staggered vertically, the topmost one bleeding 30% off the right bezel.
• Wordmark sticker: the mate wordmark with macron sits cleanly on photo (slide 1, top-left) or below phone (slide 2, centered). Never inside the phone screen.

Dark phone UI inside screenshots

• App background: solid --ink-1 #0E0E10.
• Cards: fill --card-fill rgba(255,255,255,0.04), border 1px solid --card-border rgba(255,255,255,0.08), border-radius: 16px, internal padding 16px.
• Profile photos in lists: square or rounded-square with border-radius: 12px, wrapped in a 1px solid --gold-hairline ring with 2px inset gap (use double box-shadow trick: 0 0 0 2px var(--ink-1), 0 0 0 3px var(--gold-hairline)).
• Profile grid (slide 4): 2-column grid of portrait cards, gap 8px, each card aspect 3:4, name overlaid bottom-left in 11pt Inter Medium cream with a small linear-gradient(transparent, rgba(0,0,0,0.7)) foot. Tags/age live in 9pt under the name.
• Schedule / time pills (slide 3 — "Your table for The Thursday Ritual is ready"):
• Pill: border-radius: 9999px, padding 6px 12px, fill rgba(201,149,102,0.10), border 1px solid rgba(201,149,102,0.30), text in --candle #E8B97A at 11pt Medium.
• Icon (calendar / pin): 12px line-icon in --candle, stroke 1.5px.
• Buttons: ghost style only — 1px solid rgba(255,255,255,0.18), text cream, padding 12px 20px, border-radius: 12px. No filled CTAs inside the screen.
• List item text hierarchy: name 13pt SemiBold cream; meta 11pt Regular --cream-mute; tertiary 9pt at 50% opacity.
• Tab bar (slide 4): 5 monoline icons, stroke 1.5px, active icon cream, inactive rgba(255,255,255,0.35). No labels.
• Profile screen (slide 5): photo top with red/cream tag pills (e.g., "Tapas, cocktails and good conversations") overlaid in rgba(201,149,102,0.18) fill with --candle text, plus a horizontal interest bar / progress strip in muted gold below.

Decorative accents

• Wordmark lockup with macron (always required where wordmark appears).
• Optional gold hairline divider — 1px --gold-hairline, width ~12% of canvas, horizontally centered, used between wordmark and subhead.
• Soft warm noise grain layered globally (~5% opacity).
• A single small candle-glow bokeh blur in upper third on dinner-table slides — natural to the photo, never added as graphic element.
• No icons floating freely on the background. No badges. No "App Store Rating 4.9". No arrows. No emoji. No confetti. No gradient blobs. The photography carries the deck.

Copy tone

• Voice: intimate, selective, occasionally second-person ("your circle", "your level", "your time"). Confident understatement.
• Vocabulary palette: curated, hand-picked, your circle, worth your time, ritual, filter, table of 6, members, quality, level, profile, deep conversation, Thursday.
• Avoid: "swipe", "match", "find love", "soulmate", any superlative ("best", "top", "#1"), exclamation marks, emojis, all-caps words, abbreviations.
• Sentence case only. Periods end every line. No question marks in headlines.
• Numbers spelled out below ten ("a table of six" preferred), digits acceptable for time/dates ("Thursday").
• Actual lines from the deck:
• "Every Thursday, with people at your level. Upgrade your circle."
• "Congrats, Andy"
• "We make a filter so every person you meet is worth your time."
• "Your table for The Thursday Ritual is ready"
• "Every Thursday, We sit you at a table of 6 hand-picked members. 3 boys, 3 girls"
• "Every day, Limited curated profiles. Quality is key."
• "Complete profil[es] — deep conversations."

Per-slide breakdown (mandatory)

Slide 1 — "Upgrade your circle" (group dinner hero)

• Background photo: warm dinner-party scene, two-row composition. Top half: a candle-lit table with several people, glasses raised mid-toast, deep crimson velvet/curtain behind them. Bottom half: two women in foreground embracing or leaning into each other, laughing. Color cast: heavy tungsten amber on faces and glasses, deep teal-black behind the figures. Crimson reds in clothing and curtain are desaturated to brick.
• Vignette / gradient overlay: radial vignette darkening the four corners by ~40%. A central vertical band stays slightly brighter so the wordmark at top and headline at middle both read.
• Headline: "Every Thursday, with people at your level." in cream serif, three-line stack centered horizontally, sitting at vertical middle (52–60% from top). Below it, a smaller line "Upgrade your circle." in subhead size at 72% opacity cream — this is where the italic phrase lives if you choose to italicize the subhead instead of inside the headline.
• Wordmark: mate (with macron) top-left, 44pt, 56px from top edge, 56px from left.
• Phone: NONE. Full-bleed lifestyle photo only.
• Floating elements: none.
• Notable effects: strongest grain on this slide because the dim midtones reveal it most. Slight warm halation around the brightest candle highlight is acceptable.

Slide 2 — "Congrats, Andy" (acceptance moment)

• Background photo: medium close-up of a young man with longish dark hair under warm bar light, half-smile, looking slightly off-camera. Background blown out to a soft tungsten haze (deep golden bokeh). Strong key from upper-right, shadow falls across left cheek.
• Vignette / gradient overlay: standard radial vignette; bottom gradient takes over the lower 30% to cradle the wordmark.
• Headline: "Congrats, Andy" in cream serif, two-line stack with a comma break, centered horizontally, sitting at the top third (around 18–24% from top). Size 78pt. No italic (this slide uses the floating notification card as the rhetorical beat instead).
• Phone: NONE — the entire screen IS the "phone view" in a sense, but no device frame is rendered. The notification floats directly on the photo as if Andy just got the push.
• Floating elements: the "Welcome to the circle." notification described above, horizontally centered, sitting at ~56% from top. App icon on the left of the card is a small dark square with a gold m monogram.
• Wordmark: mate (with macron) centered below the notification card, ~22% from bottom, 44pt cream.
• Notable effects: the notification card's backdrop-blur should genuinely blur the photo behind it — this is the moment of contact between brand and user.

Slide 3 — "Your table for The Thursday Ritual is ready" (booking confirmation phone)

• Background photo: dim dinner table or bar interior, very dark, mostly out-of-focus warm bokeh. Subject (likely a hand pouring wine or a candle) sits low-left or low-right. Used mainly as atmosphere — the phone is the hero.
• Vignette / gradient overlay: heavier than other slides — the photo is functionally a moody backdrop. Bottom gradient extends up to 50% to anchor the headline.
• Phone: upright, centered horizontally, occupies vertical 18–78% of canvas. Screen content:
• Top: small cream serif title "Your table for The Thursday Ritual is ready" centered, 13pt.
• Two amber-tinted pills stacked: calendar pill with date "Tuesday, December 20", location pill "Carrer Casp 24, Barcelona" (or similar). Both use the candle-amber tint described above.
• Center: three overlapping circular avatars (the cluster described in floating elements) — but these specific ones live inside the phone screen on a dark card, with the cream/gold ring treatment, suggesting the table of 6 starting to fill.
• Bottom: ghost button "Let's go" or similar in cream ghost-button style.
• Wordmark mate with macron sits at the bottom of the screen, just above the home indicator, in cream 18pt.
• Floating elements: profile sticker bubble(s) may bleed slightly off the phone's right bezel as noted.
• Headline (outside phone): "Every Thursday, We sit you at a table of 6 hand-picked members." in cream serif, 3-line, centered horizontally below the phone (~85% from top). Italic on "hand-picked members." Subhead beneath: "3 boys, 3 girls" in 28pt cream at 60% opacity.
• Notable effects: the phone's inset warm glow is most visible here because the surrounding photo is darkest.

Slide 4 — "Quality is key" (curated profile grid phone)

• Background photo: very dark — a single subject (woman in profile, half-lit, soft smile) on the right side, mostly silhouetted against a tungsten-glow background. The photo's job here is to frame the phone.
• Vignette / gradient overlay: strong radial vignette; bottom gradient again pulls the headline forward.
• Phone: upright, slightly left-of-center to balance the right-side photo subject. Screen content:
• Dark --ink-1 background.
• Top status bar.
• 2×N grid of portrait cards (4 visible: a curly-haired woman, a man in blue tracker, a man with glasses labeled "Julian", a woman with red hair). Each card has the gold-hairline ring described, with name + age overlay bottom-left.
• Bottom tab bar with 5 monoline icons as specified.
• Floating elements: the small "Tracker 11" or "Julian" name labels — these are inside the cards, not floating.
• Headline (outside phone): "Every day, Limited curated profiles. Quality is key." centered below phone in cream serif, italic on "Limited curated profiles. Quality is key." Position ~84% from top.
• Notable effects: the grid cards' gold rings catch warm light from the photo behind — keep that gold ring opacity high enough (50–60%) so it reads as part of the brand language.

Slide 5 — "Complete profiles, deep conversations" (single profile detail phone)

• Background photo: waist-up portrait of a woman, looking directly at camera, soft smile, warm candle-amber light from frame-left. Brown/charcoal background, slightly out of focus. Most photographically forward slide of the deck.
• Vignette / gradient overlay: lighter vignette than slides 3 and 4 because the portrait itself is the hero alongside the phone.
• Phone: upright, positioned right-of-center or centered. Screen content:
• Profile photo at top filling ~55% of screen height.
• Overlaid name "Lucía" in cream serif 22pt, bottom-left of the photo, with a 4px round-cap underline in --candle directly beneath.
• Two interest tags as candle-amber pills: e.g., "Tapas, cocktails and good conversations" — pill wraps to two lines, full-width minus 16px margins, gold-tinted.
• Horizontal "interest bar" — a 4px tall progress-style strip in muted gold (--tungsten-deep fill, --candle highlight at ~40% width), no label, just a visual.
• Below it, secondary metadata in --cream-mute 11pt: language, neighborhood, profession in one line separated by ·.
• Headline (outside phone): "Complete profil[es] — deep conversations." or similar, italic on "Complete profiles", positioned bottom of canvas at ~92% from top, may be partially cropped in mosaic preview as is intentional in the deck.
• Notable effects: subtle 1px cream underline beneath "Lucía" should be drawn as a separate element with rounded caps, not text-decoration, so it has presence.

How to apply this style

1. Source the photograph first. Choose a dim, candid lifestyle shot with a single clear off-center subject and natural warm lighting. If you don't have a great photo, this style fails — don't substitute. 2. Apply the orange-teal grade. In CSS, layer: a mix-blend-mode: multiply warm-amber overlay at 8% opacity on top of the photo, plus a mix-blend-mode: screen cool-teal at 5% on shadows (via mask). Easier path: pre-grade in source and serve as JPG. 3. Apply radial vignette as a positioned overlay div with radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.62) 100%). 4. Apply the bottom linear gradient as another absolutely-positioned div covering the lower 35–50% of the canvas with linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 100%). 5. Apply the global film grain as a fixed pointer-events:none overlay using a tiled SVG noise at 5% opacity. 6. Place the serif headline in cream, centered, with one italic phrase. Use Tiempos / GT Sectra / Canela / Recoleta. 7. Add the wordmark with the macron diacritic above the a. Same family as headline. 8. If using a phone, render it upright with thin black bezel, dark #0E0E10 screen, glass cards, gold-hairline avatar rings, candle-amber pills, ghost buttons. No filled CTAs. 9. Add at most ONE floating element per slide — either a notification card OR a profile bubble cluster, never both on the same slide. 10. Step back. If anything reads loud, remove it. The style's strength is restraint.

What this style is NOT

• Do not use bright daylight, pastel, or high-key photography. No beach, no white sheets, no flat outdoor light.
• Do not use sans-serif headlines. Ever.
• Do not use a bold or black weight serif. Headlines are regular or thin — the contrast comes from italic, not weight.
• Do not use solid color backgrounds, gradients-as-backgrounds, or blurred photo backgrounds in lieu of real photography. The photo IS the background.
• Do not use neon, electric blue, magenta, lime, or any saturated accent color. Gold/candle-amber is the only accent.
• Do not use rounded card containers around the headline. Text floats directly on the photo with help only from the bottom gradient.
• Do not use pure #FFFFFF text or pure #000000 shadows. Cream and warm near-black only.
• Do not tilt phones, do not put them in clay-style 3D scenes, do not use floating shadows that look like Figma defaults.
• Do not use emojis, sticker graphics, badges, app store rating banners, arrows, or "As seen in" press logos.
• Do not stack more than 3 lines of headline text. If the line doesn't fit in 3, cut copy.
• Do not exclaim, do not ask a question, do not use all-caps. Sentence case with periods only.
• Do not include a CTA button in the screenshot graphics ("Download Now" etc). The App Store provides the CTA — your job is mood.
• Do not show filled brand-colored buttons inside the phone UI. Ghost buttons only.
• Do not show match percentages, swipe arrows, "It's a match!" graphics, hearts, flames, or any other dating-app cliché. This brand sells dinner, not Tinder.
• Do not let skin tones go orange. Warmth is in the light, not in the skin.
• Do not omit the macron over the a in the mate wordmark. It is the lockup.

App Store Screenshots — Editor Template

A pre-built Next.js + ShadCN editor for generating App Store and Google Play screenshots. Scaffolded by the app-store-screenshots skill.

Quick start

bun install   # or pnpm / yarn / npm
bun dev       # http://localhost:3000

What's inside

• Connected canvas editor (src/components/editor/) — every screen sits on one horizontal canvas, so phones, captions, and other elements can be dragged across screen boundaries and exported as split crops when Connected mode is enabled.
• Screen controls — drag-to-reorder screens, click-to-edit text, screenshot drop targets, per-screen layout switcher, dark/light toggle.
• Device frames (src/components/editor/device-frames.tsx) — iPhone (PNG mockup), iPad, Android phone, Android tablet (portrait + landscape), feature graphic.
• Auto-save (git-trackable) — every change is persisted within ~600ms to `app-store-screenshots.json` at the project root (via /api/project) and mirrored to localStorage as an instant-paint cache. Commit app-store-screenshots.json and you can git clone to another machine and resume exactly where you left off.
• Multi-device decks — iOS and Android slide decks live side by side; switching the platform tab preserves both.
• One-click export — bulk PNG export at any required App Store / Play Store resolution using html-to-image; each PNG is rendered from the current connected or isolated deck mode.
• Project migration — older app-store-screenshots.json files are migrated on load. Existing per-slide transforms remain valid, and connected crops become available without rewriting the deck by hand.
• Legacy-safe mode — pre-v2 projects opened directly in the editor start in isolated-screen mode first, then can opt into connected crops with the toolbar's Connected/Isolated control. Skill-run in-place migrations keep legacy decks isolated unless the project had already explicitly opted into connected canvas.

Adding screenshots

Two ways:

1. Drop a file in the inspector — drag-and-drop or click Pick. The file is sent to /api/upload, hashed, and written to public/screenshots/uploaded/<hash>.png. The slide stores the resulting /screenshots/uploaded/... path, so commit those files alongside app-store-screenshots.json and the screenshots survive a git clone. 2. Reference a static file — put PNGs under public/screenshots/{platform}/{device}/{locale}/ and reference them by path. Default sample slides expect:

• public/screenshots/apple/iphone/en/...
• public/screenshots/android/phone/en/...
• public/screenshots/apple/ipad/en/...

Update the matching screenshot fields in app-store-screenshots.json to point at whatever filenames you choose.

Exporting

The toolbar dropdown lists every Apple/Google-required size for the current device. Click Export bundle to download a zip. In Connected mode, each PNG is clipped from the connected canvas, so an element that straddles two screens appears split exactly where you placed it. In Isolated mode, each screen clips its own elements and legacy offscreen content cannot leak into neighboring exports.

Customizing

Notes

• mockup.png is the iPhone bezel overlay; replacing it requires re-measuring the PHONE_SCREEN constants.
• Image preloading converts every static path to a base64 data URI before exports run, and export retries paths that were previously missing — this prevents the html-to-image race where some slide screenshots come out black.
• Reset via the toolbar's circular arrow icon clears in-memory state and reloads the default screens. To wipe disk state too, delete app-store-screenshots.json.
• Persistence model — the canonical state lives in app-store-screenshots.json (git-tracked). On load, the editor reads localStorage first for instant paint, then overwrites with the file contents if present; if the file endpoint is unavailable, autosave is blocked so stale cache cannot overwrite disk. On save, both are written. If you ever see a conflict, the file always wins.
• Migration model — schema v1 projects do not need a manual conversion. On first load, the editor upgrades localized text and transform records, writes schemaVersion: 2, preserves all existing screens, and keeps connectedCanvas: false so old offscreen/clipped elements export exactly as isolated screens. Turn on Connected in the toolbar when you want elements to cross screen edges. Explicit skill migrations preserve an existing connectedCanvas choice, otherwise they keep legacy decks isolated too.
• Custom themes — if a project file references a theme id that is not present in src/lib/constants.ts, the editor falls back to clean-light and shows a warning. Merge custom THEMES entries during in-place upgrades.