1. App screenshots — "Where are your app screenshots? (PNG files of actual device captures)"
2. App icon — "Where is your app icon PNG?"
3. Brand colors — "What are your brand colors? (accent color, text color, background preference)"
4. Font — "What font does your app use? (or what font do you want for the screenshots?)"
5. Feature list — "List your app's features in priority order. What's the #1 thing your app does?"
6. Number of slides — "How many screenshots do you want? (Apple allows up to 10)"
7. Style direction — "What style do you want? Examples: warm/organic, dark/moody, clean/minimal, bold/colorful, gradient-heavy, flat. Share App Store screenshot references if you have any."
8. Devices — "Which devices did you capture screenshots on? (e.g. iPhone 17 Pro, iPhone 17 Pro Max, iPad Pro 11", iPad Pro 13", etc.)"

1. Localization — "Do you want screenshots in multiple languages? If so, which languages? (e.g. English, German, French). You'll get a language switcher in the preview to toggle between them."
2. Project location — "Do you want to keep the screenshot generator project permanently so you can come back to make changes or add languages later? If so, where should I create it? (e.g. inside your app's repo)"
3. Component assets — "Do you have any UI element PNGs (cards, widgets, etc.) you want as floating decorations? If not, that's fine — we'll skip them."
4. Additional instructions — "Any specific requirements, constraints, or preferences?"

• Background style: gradient direction, colors, whether light or dark base
• Decorative elements: blobs, glows, geometric shapes, or none — match the style
• Dark vs light slides: how many of each, which features suit dark treatment
• Typography treatment: weight, tracking, line height — match the brand personality
• Color palette: derive text colors, secondary colors, shadow tints from the brand colors

• Node.js 18+
• FrameMe — required for pixel-perfect device framing (including Dynamic Island). Install by building from source:
  bash

  git clone https://github.com/joshluongo/frameme.git /tmp/frameme
  cd /tmp/frameme && swift build -c release
  strip .build/release/frameme
  cp .build/release/frameme /usr/local/bin/frameme

  If the user doesn't have FrameMe, ask them to install it before proceeding.

iPhone (pick the matching bezel)

OR: frameme "$SKILL_DIR/iphone-17-pro-max.png" ...

iPad (pick the matching bezel)

OR: frameme "$SKILL_DIR/ipad-pro-13.png" ...

If the app UI doesn't change across languages (only marketing text differs), frame once under `en/` — the Device component's `onError` fallback will use English images for all locales.

FrameMe automatically:
- Detects the screen area from the bezel's alpha channel
- Creates a per-scanline mask (handles Dynamic Island, rounded corners)
- Composites the screenshot behind the bezel
- Outputs `filename_framed.png`

• Match the bezel to the capture device — using a mismatched bezel will cause clipping or misalignment
• FrameMe does NOT resize — the screenshot should match the bezel's screen area
• The framed images are what the page.tsx will reference — the user sees the final device appearance in the ad layouts

• Each slide sells ONE idea. Never two features on one slide.
• Vary layouts across slides — never repeat the same template structure.
• Include 1-2 contrast slides (inverted bg) for visual rhythm.

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. Control where lines break with

   <br />

   .

• Feature lists as headlines: "Log every item with tags, categories, and notes"
• Two ideas joined by "and": "Track X and never miss Y"
• Compound clauses: "Save and customize X for every Y you own"
• Vague aspirational: "Every item, tracked"
• Marketing buzzwords: "AI-powered tips" (unless it's actually AI)

1. Write 3 options per slide using the three approaches
2. Read each at arm's length — if you can't parse it in 1 second, it's too complex
3. Check: does each line have 3-5 words? If not, adjust line breaks
4. Present options to the user with reasoning for each
5. If localized: translate approved headlines into all requested languages. Respect the tone/formality of each language. Line breaks may need adjusting per language — German and French text is often longer than English.

• Raycast — specific, descriptive, one concrete value per slide
• Turf — ultra-simple action verbs, conversational
• Mela / Notion — warm, minimal, elegant

1. Preview: CSS

   transform: scale()

   via ResizeObserver to fit a grid card
2. Export: Offscreen at

   position: absolute; left: -9999px

   at true resolution

• Separate sections: Render iPhone and iPad in distinct sections with device headers (

  <h2>iPhone</h2>

  ,

  <h2>iPad</h2>

  ), each with its own grid. Do NOT mix them in a single grid.
• Device filter: The toolbar includes an All / iPhone / iPad toggle that shows/hides sections.
• Each section filters

  SCREENSHOTS.filter(s => s.device === "iphone")

  etc.

• The device image is wider relative to the canvas — use narrower widths (70-78% instead of 82-86%) to avoid crowding
• Captions may need to sit above the device rather than beside it, since the wider device leaves less horizontal space
• Two-device layouts work best with smaller scaling and more overlap
• iPad's larger visible screen area means the app UI is more readable — lean into showing the content

• Double-call trick: First

  toPng()

  loads fonts/images lazily. Second produces clean output. Without this, exports are blank.
• On-screen for capture: Temporarily move to

  left: 0

  before calling

  toPng

  .
• Offscreen wrapper: Use

  position: absolute; left: -9999px

  (not

  fixed

  ). Do NOT set

  width

  /

  height

  on the wrapper — let the slide component define its own dimensions.
• No resizing needed: Each slide is already at the exact export resolution. No canvas scaling step.
• Zip export (asc-client compatible): Two export buttons. "Export ({LOCALE})" exports the current language. "Export All Languages" loops through every locale (sets state, waits for re-render, captures). Both create a zip compatible with asc-client. Structure:

  en-US/APP_IPHONE_67/01_hero.png
  en-US/APP_IPAD_PRO_3GEN_129/01_hero.png
  de-DE/APP_IPHONE_67/01_hero.png

  Device type mapping:

  iphone → APP_IPHONE_67

  ,

  ipad → APP_IPAD_PRO_3GEN_129

  . Each locale entry needs an

  asc

  field for the App Store Connect locale code (e.g.

  { code: "en", label: "English", asc: "en-US" }

  ). Files are ordered alphabetically so use zero-padded prefixes:

  01_name.png

  .
• Single-click export: Downloads individual PNGs with device in filename:

  01-iphone-hero-en-1320x2868.png

  .
• 300ms delay between sequential exports.
• Set

  fontFamily

  on the offscreen container.
• Use

  String(index + 1).padStart(2, "0")

  for numbering.