appshot-core

name: appshot-core description: Foundation skill for Appshot. Defines the Remotion project architecture, primitives library, config schema, device presets, and store requirements. Owns the shared extraction phase used by appshot-videos and appshot-images. license: MIT metadata: author: kiennguyen version: 3.0.0

Appshot Core — Foundation

Reference skill for all Appshot skills. Read this before executing appshot-videos or appshot-images.

Architecture

• Remotion 4.0 + React 18 + Tailwind CSS 3.4
• Config defines app metadata and brand only — scenes are custom .tsx files, not config entries
• Each project has an orchestrator component (e.g., FooPreview.tsx) that sequences custom scenes via Remotion <Sequence> + <SceneWrap>
• All primitives are brand-aware via a brand prop derived from the config's BrandColors

Project Context (auto-injected)

• Package manifest: !cat package.json 2>/dev/null || cat pubspec.yaml 2>/dev/null || cat app.json 2>/dev/null
• App colors: !find . -maxdepth 4 \( -name 'colors.xml' -o -name 'Colors.swift' -o -name 'colors.ts' -o -name 'theme.ts' -o -name 'Color.kt' -o -name 'tailwind.config.js' -o -name 'tailwind.config.ts' \) 2>/dev/null | head -5 | xargs head -50 2>/dev/null
• App icon: !find . -maxdepth 5 \( -name 'ic_launcher.png' -o -name 'icon.png' \) -type f 2>/dev/null | head -3
• Store metadata: !cat fastlane/metadata/en-US/full_description.txt 2>/dev/null || cat fastlane/metadata/en-US/description.txt 2>/dev/null || cat fastlane/metadata/android/en-US/full_description.txt 2>/dev/null
• README excerpt: !head -80 README.md 2>/dev/null

Extraction & Context Caching

Both appshot-videos and appshot-images use this extraction process. Results are cached to .appshot-context.json so extraction only runs once per project.

Check for cached context

Before scanning, check if .appshot-context.json exists in the project root. If it does:

1. Load and present a summary to the user
2. Ask: "I found a previous extraction. Confirm this is still correct, or re-scan?"
3. If confirmed, skip extraction and proceed to the calling skill's next phase
4. If re-scan requested, run extraction below and overwrite the file

Extraction steps

Step 1: Detect framework

Check for marker files in this order. Stop at the first match.

Use ls or find . -maxdepth 3 to check. If none match, note that no framework was detected and move on — the user may describe their app verbally.

Step 2: Extract app identity

Expo / React Native:

• Name: app.json -> expo.name or name
• Description/tagline: app.json -> expo.description or description
• Bundle ID: app.json -> expo.ios.bundleIdentifier or expo.android.package
• Also check: package.json -> name, description

Flutter:

• Name: pubspec.yaml -> name:
• Description: pubspec.yaml -> description:
• Also check: android/app/src/main/AndroidManifest.xml -> android:label, ios/Runner/Info.plist -> CFBundleDisplayName

iOS (Swift):

• Name: Info.plist -> CFBundleDisplayName or CFBundleName
• Bundle ID: Info.plist -> CFBundleIdentifier
• Also check: project.pbxproj for product name

Android (Kotlin/Java):

• Name: app/src/main/res/values/strings.xml -> <string name="app_name">
• Package: AndroidManifest.xml -> package attribute
• Also check: build.gradle.kts or build.gradle -> applicationId

Next.js:

• Name: package.json → name; also check next.config.* → env.APP_NAME
• Description/tagline: package.json → description; also check app/layout.tsx → metadata.description
• URL: check .env or .env.local → NEXT_PUBLIC_APP_URL, NEXT_PUBLIC_SITE_URL

SvelteKit:

• Name: package.json → name
• Description: package.json → description; check src/app.html → <title>, <meta name="description">

Vite (React/Vue):

• Name: package.json → name
• Description: package.json → description; check index.html → <title>, <meta name="description">

Step 3: Extract brand colors

Search for color definitions. Read the first match in each framework.

Expo / React Native — search paths (in order):

1. src/theme.ts or src/theme.js
2. src/colors.ts or src/constants/colors.ts
3. theme/colors.ts or theme/index.ts
4. tailwind.config.js or tailwind.config.ts -> theme.extend.colors
5. app.json -> expo.primaryColor, expo.backgroundColor

Look for: named color exports (primary, secondary, background, surface, accent, success, danger/error), hex strings, rgb() values.

Flutter — search paths:

1. lib/theme.dart or lib/theme/app_theme.dart
2. lib/theme/colors.dart or lib/constants/colors.dart
3. lib/main.dart -> ThemeData()

Look for: Color(0xFF...) constants, primaryColor, accentColor, colorScheme definitions.

iOS (Swift) — search paths:

1. *.xcassets/Colors/**/*.colorset/Contents.json — parse components for RGB
2. **/Theme.swift or **/Colors.swift or **/ColorScheme.swift

Look for: static Color properties, UIColor hex initializers, asset catalog color definitions.

Android — search paths:

1. app/src/main/res/values/colors.xml — <color name="primary">#RRGGBB</color>
2. app/src/main/res/values/themes.xml — <item name="colorPrimary">
3. **/ui/theme/Color.kt — Jetpack Compose Color() definitions

Web (all frameworks) — search paths (in order):

1. tailwind.config.js or tailwind.config.ts → theme.extend.colors
2. src/styles/globals.css or src/app/globals.css → CSS custom properties (--primary, --background, etc.)
3. src/theme.* or src/lib/theme.*
4. src/styles/variables.css

Step 4: Find app icon

Step 5: Extract features & store metadata

These sources exist across all frameworks:

Step 5b: Extract ASO keywords

Apple and Google can now read text in screenshots and videos via visual intelligence. Extract a keyword list so overlay text can naturally incorporate high-value search terms.

Primary source: fastlane/metadata/en-US/keywords.txt (comma-separated). This is the developer's own keyword strategy — use it as the authoritative list.

Fallback sources (if no Fastlane keywords exist): derive 8-12 keyword candidates from:

1. App Store subtitle (fastlane/metadata/en-US/subtitle.txt) — split into individual terms
2. Store description — extract the most repeated nouns and action verbs
3. Feature names from extraction — map feature names to user-facing search terms
4. App category terms from Step 6 signals table

Output: A ranked list of keywords, most important first. Include both single words ("habits", "streak") and short phrases ("reading tracker", "book log"). Cap at 12 keywords.

Step 6: Infer app category

Based on extracted keywords, description, and feature names, infer the app category:

If no clear match, note "uncategorized" — the user will clarify.

Deep analysis

Go beyond identity and colors. Understand what the app actually does.

Screen inventory. Scan navigation files to discover all screens:

• React Native / Expo: read App.tsx, any *Navigator.tsx, *Router.tsx, tab bar configs, react-navigation setup
• Flutter: read lib/main.dart, router config, GoRouter or MaterialApp routes
• iOS: read storyboard references, UITabBarController setup, SwiftUI NavigationStack/TabView
• Look for: screen names, tab labels, navigation structure (tabs, stacks, drawers)

Navigation chrome extraction. For realistic mock screens, extract the navigation patterns the user actually sees:

• Navigation type: tabs, stack, drawer, or combination
• Tab bar: label text for each tab, icon descriptions (e.g., "house icon", "magnifying glass", "person circle"), which tab is default/home
• Navigation headers: title style (large title vs inline), back button presence, right bar button items (e.g., "gear icon", "plus", "bell")
• Status bar style: light content (white text, for dark backgrounds) or dark content (black text, for light backgrounds)
• Home indicator: present on all modern iPhones (bottom bar), absent on older devices

Where to find this:

• React Native / Expo: screenOptions, tabBarLabel, tabBarIcon, headerTitle, headerRight, navigationOptions in navigator files
• Flutter: BottomNavigationBar items, AppBar title/actions, Scaffold configuration
• iOS: UITabBarItem setup, navigationItem.title, navigationItem.rightBarButtonItems, SwiftUI .tabItem / .navigationTitle / .toolbar
• Android: BottomNavigationView menu XML, Toolbar/TopAppBar setup, Jetpack Compose NavigationBar items

Page/route inventory (web). Scan router config to discover all pages:

• Next.js: read app/ directory structure (each folder with page.tsx = route), or pages/ directory
• SvelteKit: read src/routes/ directory structure (each folder with +page.svelte = route)
• Vite/React: read router config (react-router, tanstack-router), or scan for route definitions
• Look for: page names, layout structure, protected vs public routes

Landing page analysis. If a landing/marketing page exists:

• Extract hero headline and subheadline
• Extract feature sections
• Note CTA text ("Get Started", "Sign Up Free", etc.)
• Note pricing structure if visible

Feature analysis. For each discovered screen, read the component file to understand:

• What data it displays
• What actions the user can take
• What makes it visually interesting or unique

UI pattern extraction. Scan component styling to capture the app's visual design language. Mock screens that don't match the real app's look undermine credibility — this data closes the gap.

What to extract:

• Border radius: button radius, card radius, input radius (e.g., "fully rounded buttons", "8px card corners", "pill-shaped inputs")
• Spacing rhythm: padding/margin values used in containers and between elements (e.g., "16px horizontal padding", "24px section gaps")
• Typography: font family (custom or system), heading weights (e.g., 700 vs 800), body size, whether the app uses ALL CAPS for section headers
• Button style: shape (rounded rectangle, pill, circle), size, fill vs outline, icon-only buttons
• Card style: background color, border, shadow depth, glass/blur effects
• Icon library: which icon set (SF Symbols, Material Icons, Lucide, custom SVGs, Ionicons)
• Special UI elements: waveform visualizers, progress rings, gradient backgrounds, tag/chip styles, badge indicators

Where to find this:

• React Native / Expo: StyleSheet.create() blocks, inline style={}, NativeWind/Tailwind classes, component library imports (react-native-paper, tamagui, gluestack)
• Flutter: BoxDecoration, BorderRadius, TextStyle, ButtonStyle in widget files and theme data
• iOS (Swift): .cornerRadius, .font(), .padding(), UIFont descriptors, SF Symbol names in SwiftUI/UIKit
• Android: shapes.xml, styles.xml, Compose RoundedCornerShape(), MaterialTheme.typography, Material icon imports

Value props / differentiators. Extract from README, store description, CLAUDE.md, marketing copy, or landing page:

• What problem does this app solve?
• How is it different from competitors?
• What is the emotional promise?

Core action loop. Identify the single most frequent user action:

• What does a user do every time they open the app?
• How many taps/steps does it take?
• What feedback do they get after completing it?

Theme detection. Check if the app supports light/dark modes:

• Look for theme toggle, useColorScheme, Appearance, ThemeProvider, darkMode in config
• Note which is the default or primary theme
• Note if the app is dark-theme-only (some brands like Spotify, cinema apps)

Save context

After extraction and user confirmation, save results to .appshot-context.json in the project root:

{
  "version": 2,
  "extractedAt": "ISO timestamp",
  "app": { "name": "", "tagline": "", "icon": "", "platform": "", "framework": "", "url": "string or null" },
  "brand": { "primary": "", "primaryLight": "", "background": "", "surface": "", "textPrimary": "", "textSecondary": "", "success": "", "danger": "", "accent": "" },
  "category": "string",
  "theme": "light | dark | both",
  "themeDefault": "light | dark",
  "navigation": {
    "type": "tabs | stack | drawer | tabs+stack",
    "tabs": [{ "label": "", "iconDescription": "", "isDefault": false }],
    "headerStyle": "largeTitle | inline",
    "statusBarStyle": "light | dark"
  },
  "screens": [{ "name": "", "tab": "", "description": "" }],
  "pages": [{ "route": "", "name": "", "description": "", "layout": "" }],
  "landingPage": { "heroHeadline": "string or null", "heroSubheadline": "string or null", "cta": "string or null", "featureSections": ["string"] },
  "uiPatterns": {
    "borderRadius": { "button": "string", "card": "string", "input": "string" },
    "spacing": { "horizontal": "string", "sectionGap": "string" },
    "typography": { "fontFamily": "string or 'system'", "headingWeight": "number", "bodySize": "string", "capsHeaders": "boolean" },
    "buttonStyle": "string — e.g., 'pill filled, 56px height' or 'rounded-lg outline'",
    "cardStyle": "string — e.g., 'dark surface, 16px radius, no border, subtle shadow'",
    "iconLibrary": "string — e.g., 'SF Symbols' or 'Ionicons' or 'custom SVG'",
    "specialElements": ["string — e.g., 'waveform visualizer', 'gradient background', 'pill-shaped tags'"]
  },
  "features": ["string"],
  "coreAction": "string",
  "valueProps": ["string"],
  "keywords": ["string — ranked ASO keywords, most important first, max 12"],
  "screenshots": [{
    "referenceFile": "original file path (for re-reading if needed)",
    "screen": "matched screen name",
    "description": "what this screenshot shows",
    "visualSpec": "structured visual analysis — layout, colors, components, typography, special elements (the actual styling reference for mock UI)"
  }],
  "storeDescription": "string or null",
  "sources": { "name": "source file", "colors": "source file", "keywords": "source file or 'derived'" }
}

Notes on schema v2:

• screenshots — empty array if user chose auto-mock; populated if user provided real screenshots
• app.framework valid values: "expo" | "flutter" | "ios" | "android" | "nextjs" | "sveltekit" | "nuxt" | "astro" | "remix" | "vite" | "web"
• app.platform valid values: "ios" | "android" | "both" | "web"
• pages — web route inventory (empty array for mobile apps)
• landingPage — extracted landing page data (null for mobile apps)

Present findings

Summarize what you found concisely. Always cite the source file so the user can verify.

I scanned your project and found:

- **App:** [name] (from [source file])
- **Tagline:** [text] (from [source file])
- **Platform:** [iOS/Android/both] (from [evidence])
- **Colors:** primary [hex], background [hex], surface [hex], ... (from [source file])
- **Icon:** [file path]
- **Category:** [category] based on [keywords/description]
- **Store description:** [found at path / not found]
- **Theme:** [light only / dark only / both — default is X]

**Navigation:** [tabs / stack / drawer] — [header style: large title / inline]
**Tab bar:** [Tab1 (icon)] | [Tab2 (icon)] | [Tab3 (icon)] — default: [Tab1]
**Status bar:** [dark content / light content]

**Screen inventory:**
- [Tab 1]: [ScreenName] — [what it shows]
- [Tab 2]: [ScreenName] — [what it shows]
- [Modal/Detail]: [ScreenName] — [what it shows]
- ...

**Page inventory (web):**
- `/` — [Landing page] — [hero headline, feature sections]
- `/dashboard` — [Dashboard] — [what it shows]
- `/settings` — [Settings] — [configuration options]
- ...

**Landing page:** [hero headline] / [CTA text] / [number of feature sections]
**URL:** [extracted URL or "not found"]

**Key features:** [bullet list of 3-5 main features extracted from code/docs]

**Core action loop:** [what users do most — e.g., "tap Log -> enter page number -> save (3 taps, ~5 seconds)"]

**Value props:**
- [Primary differentiator]
- [Secondary differentiator]
- [Emotional promise]

**UI patterns:** [font family], [heading weight], [button style], [card style], [border radius], [icon library]
**Special elements:** [waveform, gradient bg, pill tags, ...]

**ASO keywords:** [keyword1], [keyword2], [keyword3], ... (from [fastlane/keywords.txt / derived])

**Pre-filled config:**
[Show the AppConfig object with app, brand, and video sections filled in]

Does this look right? Anything to correct before I proceed?

If fields are missing, note them: "I couldn't find brand colors — do you have a theme file, or should we pick colors together?"

Only after confirmation, proceed to the screenshot collection step below.

Collect screenshots (optional)

After the extraction is confirmed, ask the user if they want to provide real app screenshots as visual references. Screenshots are reference material, not content — they are never embedded in the final output. Instead, the visual reference analysis extracts exact colors, shapes, spacing, and typography from the screenshots, which the skill uses to build animated mock UI that looks like the real app.

AskUserQuestion({
  questions: [{
    question: "Do you have screenshots of your app to use as screen content?",
    header: "Screenshots",
    options: [
      { label: "Yes, I'll provide screenshots", description: "Highest fidelity — your screenshots are analyzed and the mock UI is built to match exactly." },
      { label: "No, generate mock screens", description: "Skill builds UI from extracted code patterns. Good for most cases." }
    ],
    multiSelect: false
  }]
})

If the user provides screenshots:

1. Ask the user to provide screenshot file paths or drop them in the conversation
2. Read each screenshot image to understand what it shows
3. Map each screenshot to a screen from the extraction:

   I mapped your screenshots to app screens:
   
   - recording.png → Voice Recording screen
   - transcription.png → Transcription Detail screen  
   - scan-preview.png → Document Scan screen
   - home.png → Home / Notes List screen
   
   Missing: Settings screen (will use mock UI for this one)
   
   Does this mapping look right?
   

4. Run visual reference analysis on each screenshot (see below)
5. Note any gaps — screens that have no screenshot. These will fall back to mock UI built from uiPatterns.
6. Save the mapping AND the visual analysis to screenshots in .appshot-context.json

Visual reference analysis

CRITICAL: This step is mandatory when screenshots are provided. Without it, mock scenes will look generic and not match the real app.

For each provided screenshot, study the image and write a structured visual spec. This spec is used in two ways:

• Direct use scenes: The screenshot is used as-is via <Img>, so the spec confirms what it shows
• Mock scenes and gap-fill: When a scene needs mock UI (for animation, missing screenshots, or modified content), the spec is the source of truth for how to style it

For each screenshot, document:

## [filename] → [Screen Name]

**Layout:**
- [top-to-bottom description of what appears: nav bar, content sections, bottom bar]
- [approximate vertical proportions: "nav bar 8%, content 78%, tab bar 8%, home indicator 6%"]

**Colors (sample from the image):**
- Background: [exact color, e.g., "#0A1628 — very dark navy, NOT pure black"]
- Cards/surfaces: [e.g., "#1A2940 — slightly lighter navy with subtle border"]
- Accent: [e.g., "#3BB8E0 — teal/cyan for CTAs and active states"]
- Text primary: [e.g., "#E8ECF1 — off-white"]
- Text secondary: [e.g., "#6B7A8D — muted blue-grey"]
- Highlight/badge: [e.g., "#E5C044 — warm yellow for 'Voice Recording' badge"]

**Components (describe exactly what you see):**
- Back button: [e.g., "48px rounded-square (#1A2940 bg), white chevron, no text"]
- Nav actions: [e.g., "three icon buttons: more (⋯), share (↑), delete (🗑), same rounded-square style"]
- Type badge: [e.g., "'Voice Recording' in yellow text on dark pill, microphone emoji prefix"]
- Content cards: [e.g., "rounded-xl (~16px), #1A2940 bg, 1px border #2A3A50, 20px padding"]
- Buttons: [e.g., "'Enhance · 2 credits' — outlined, teal border, rounded-full, 48px height"]
- Tab bar: [e.g., "3 tabs with SF Symbol icons above labels, active=teal, inactive=grey, dark bg"]

**Typography:**
- Headings: [e.g., "32px, weight 700, white — 'May 28 at 11:03 PM'"]
- Section headers: [e.g., "ALL CAPS, 13px, weight 600, letter-spacing 1px, teal — 'TRANSCRIPTION'"]
- Body: [e.g., "16px, weight 400, off-white, line-height ~1.5"]
- Labels: [e.g., "12px, weight 500, muted grey — metadata, tab labels"]

**Special elements:**
- [e.g., "Waveform: grey rounded-rect container, horizontal bars, blue play button 48px circle"]
- [e.g., "Speed pills: row of 4 (0.75x, 1x, 1.5x, 2x), active has teal bg, others have dark bg"]
- [e.g., "Coral/red horizontal divider line below title, 2px height"]
- [e.g., "Vietnamese flag emoji + 'VI' in language selector pill"]

Rules for the analysis:

• Be exhaustive. List EVERY distinct UI element visible in the screenshot. Count them. If you see 15 elements, document 15 elements. Common elements that get missed: nav bar action buttons (all of them, not just back), tab bar icons, speed/playback controls, CTAs, badge indicators, credit counters, language selectors, divider lines, home indicator.
• Be precise about colors — sample from the actual image, don't guess. "#0A1628" is very different from "#000000".
• Describe component shapes exactly: "48px rounded-square with 12px radius" not "rounded button".
• Note spacing: "20px padding inside cards", "12px gap between elements".
• Note what is NOT there: "no shadow on cards", "no border on buttons", "no separator between list items".
• This analysis overrides uiPatterns from code extraction when they conflict — the screenshot is the visual truth.
• Sizes in the visual spec are phone-logical. The 886px App Store Preview canvas is 2.25× wider than an iPhone 16 Pro (393px). All sizes must be multiplied by 2.25 when writing scene code: a 48px button becomes 108px, 16px text becomes 36px, 11px tab labels become 25px. The code-guide has a complete scale table.

Screenshot requirements (tell the user):

• Any resolution — these are reference images, not embedded in the output
• Clean state — no notifications or debug banners (so the analysis captures the real design)
• One screenshot per distinct screen/feature. Multiple states of the same screen welcome.
• The skill will analyze your screenshots and build animated mock UI that matches your app's look exactly.

If the user declines, set screenshots: [] and proceed. The skill will generate mock UI from extracted patterns as before.

After this step, proceed to the calling skill's next phase.

Project Structure

src/
  app-config.ts         # App metadata, brand colors, video settings
  Root.tsx              # Remotion entry — registers the composition
  [AppName]Preview.tsx  # Orchestrator — sequences scenes with <Sequence> + <SceneWrap>
  scenes/
    S1_[Name].tsx       # Custom scene components (one per scene)
    S2_[Name].tsx
    ...
  components/           # Shared primitives library (imported from template)
    PhoneFrame.tsx      # Device frame with bezel, Dynamic Island, spring entrance
    AmbientBackground.tsx # Animated gradient bg with floating orbs
    Caption.tsx         # Word-by-word animated caption with frosted pill
    FadeIn.tsx          # Directional spring fade-in wrapper
    SceneWrap.tsx       # Fade envelope for scene transitions
    AppIcon.tsx         # App icon with optional glow pulse
    TypeWriter.tsx      # Character-by-character text reveal
    BrowserFrame.tsx    # macOS browser chrome (light/dark)
    AnimatedCursor.tsx  # Bezier-interpolated cursor with click ripple
    index.ts
  config.ts             # Type definitions, device dimensions, defaults
public/
  icon.png              # App icon
  *.png                 # Screenshots, assets

Config Schema

The config holds app identity, brand colors, and video settings. It does NOT contain scenes — scenes are custom components.

interface AppConfig {
  app: {
    name: string;        // Display name
    tagline: string;     // One-line value prop
    icon: string;        // Filename in public/
    platform: "ios" | "android" | "both";
  };
  brand: BrandColors;
  video: {
    fps: number;         // 30
    width: number;       // 886
    height: number;      // 1920
    device: DevicePreset;
    backgroundMusic?: string;       // Filename in public/
    backgroundMusicVolume?: number; // 0-1
  };
}

interface BrandColors {
  primary: string;       // Main brand color (hex)
  primaryLight: string;  // Tinted background
  background: string;    // App background
  surface: string;       // Card/container background
  textPrimary: string;   // Main text
  textSecondary: string; // Secondary/muted text
  success: string;       // Positive states
  danger: string;        // Destructive/error states
  accent?: string;       // Optional secondary brand color
}

Primitives Library

Every component below is available in src/components/. Import from "../components".

PhoneFrame

Device mockup with bezel, side buttons, and notch/Dynamic Island. Wraps any content to look like a real phone screen.

When to use: Any scene showing app UI inside a phone. The core visual anchor for mobile app videos.

AmbientBackground

Animated gradient background with floating blurred orbs. Sets the mood for each scene.

When to use: Behind every scene. Use "light" or "medium" for feature/solution scenes, "dark" for problem/contrast scenes, "deep" for emotional/proof scenes.

Caption

Bottom-anchored text overlay with word-by-word entrance animation. Dark pill background for readability.

When to use: Every scene should have one. Captions tell the story for sound-off viewers.

FadeIn

Wraps any element with a directional fade-in animation using Remotion spring.

When to use: Stagger card reveals, headline entrances, any element that should animate in.

SceneWrap

Wraps each scene with fade-in/fade-out transitions (12 frames each). Used by the orchestrator.

When to use: In the orchestrator component, wrap each scene inside <Sequence> + <SceneWrap>.

AppIcon

Renders the app icon with optional animated glow effect.

When to use: CTA/closing scenes. Builds brand recognition.

TypeWriter

Character-by-character text reveal with optional blinking cursor.

When to use: Search bars, text inputs, chat messages, anywhere you want to simulate user typing.

BrowserFrame

macOS-style browser chrome with traffic lights, address bar, and content area. Light and dark variants.

AnimatedCursor

Bezier-interpolated cursor that moves between keyframe positions with click ripple effect.

Animation Patterns

The removed primitives (FloatingCard, StatCard, HeatMap, ProgressBar, AppStoreBadge, IconSet) were simple wrappers that constrained the agent with hardcoded sizes. Write these patterns inline instead, scaled appropriately for your canvas:

Animated counter (before/after stat):

const counter = spring({ frame, fps, delay: 10, config: { mass: 0.6, damping: 18, stiffness: 80 } });
const value = Math.round(interpolate(counter, [0, 1], [beforeValue, afterValue]));

Cell-by-cell grid fill (heatmap/contribution grid):

{cells.map((cell, i) => {
  const cellEnter = spring({ frame, fps, delay: baseDelay + i * 0.4, config: { mass: 0.2, damping: 10, stiffness: 180 } });
  return <div key={i} style={{ opacity: 0.3 + cellEnter * 0.7, transform: `scale(${0.6 + cellEnter * 0.4})` }} />;
})}

Progress bar fill:

const progress = interpolate(frame, [delay, delay + 30], [0, targetPercent], { extrapolateRight: "clamp" });
<div style={{ width: `${progress}%`, height, backgroundColor: color, borderRadius }} />

Spring-entrance card (replaces FloatingCard):

const entrance = spring({ frame, fps, delay, config: { mass: 0.8, damping: 14, stiffness: 120 } });
<div style={{ opacity: entrance, transform: `translateY(${(1 - entrance) * 20}px)`, borderRadius, padding, background }}>

App Store / Play Store badge (for Marketing CTA scenes):

// iOS badge — black rounded rect with Apple SVG
<div style={{ background: "#000", borderRadius: 14, padding: "14px 28px", display: "flex", alignItems: "center", gap: 12 }}>
  <svg width="28" height="34" viewBox="0 0 28 34" fill="white">
    <path d="M23.2 17.8c0-3.6 2.9-5.3 3-5.4-1.6-2.4-4.2-2.7-5.1-2.8-2.1-.2-4.2 1.3-5.3 1.3-1.1 0-2.8-1.2-4.6-1.2C8.5 9.8 6 11.2 4.6 13.5c-2.8 4.9-.7 12.1 2 16.1 1.3 1.9 2.9 4.1 5 4 2-.1 2.8-1.3 5.2-1.3 2.4 0 3.1 1.3 5.2 1.3 2.2 0 3.5-2 4.8-3.9 1.5-2.2 2.1-4.3 2.2-4.4 0-.1-4.2-1.6-4.2-6.4zM19.3 7.5c1.1-1.3 1.8-3.2 1.6-5-1.6.1-3.4 1-4.6 2.3-1 1.2-1.9 3-1.6 4.8 1.7.2 3.5-.9 4.6-2.1z" />
  </svg>
  <div>
    <div style={{ fontSize: 16, color: "rgba(255,255,255,0.8)" }}>Download on the</div>
    <div style={{ fontSize: 28, fontWeight: 600, color: "#FFF" }}>App Store</div>
  </div>
</div>

Device Presets

Store-to-Device Mapping

For multi-store projects, Root.tsx registers one <Composition> per store. Scenes are shared — only the device frame (and navigation chrome style) differ. Canvas stays 886×1920 for both. Note: App Store Preview videos do not include store badges in the CTA (redundant inside the store listing); Marketing videos include an inline store badge in the CTA (see Animation Patterns above for the SVG snippet).

Output Targets

AppShot supports two output targets with different visual rules:

Why this matters: Apple rejects App Store previews that include device frames or that don't sufficiently show the app in use. The App Store Preview target ensures compliance. The Marketing target preserves the current polished look for non-store contexts.

Default: App Store Preview for appshot-videos and appshot-images. Marketing for social/web contexts.

When the user selects App Store Preview target:

• Do NOT use PhoneFrame in any scene
• App UI fills the full 886×1920 canvas (videos) or store-required dimensions (screenshots)
• Include status bar, navigation bar, tab bar, and home indicator in every mock screen
• Caption/overlay text uses a semi-transparent pill background so it's readable over the app UI
• The result should look like a screen recording with text overlays

When the user selects Marketing target:

• Use PhoneFrame at scale 1.5 as before
• Text, cards, and badges appear outside/around the device frame
• Navigation chrome inside the phone is nice-to-have but not required

Store Requirements

Videos

Default output is 886×1920. This canvas works for both App Store (iPhone 6.7″ native) and Google Play. All sizing rules in appshot-videos are calibrated for this canvas width.

Screenshots

iOS App Store:

Google Play:

Project Setup

The skill scaffolds an appshot-video/ directory inside the target project during Phase 3 code generation. See code-guide.md for the full scaffolding steps.

cd appshot-video
npm run dev     # Preview at localhost:3000
npm run build   # Render to out/AppPreview.mp4

Orchestrator Pattern

The orchestrator sequences scenes using Remotion <Sequence> and wraps each with <SceneWrap> for fade transitions.

import { Composition, Sequence } from "remotion";
import { SceneWrap } from "./components";
import { S1_Hook } from "./scenes/S1_Hook";
import { S2_Feature } from "./scenes/S2_Feature";
import { S3_CTA } from "./scenes/S3_CTA";

const scenes = [
  { component: S1_Hook, duration: 120 },
  { component: S2_Feature, duration: 150 },
  { component: S3_CTA, duration: 120 },
];

export const AppPreview: React.FC = () => {
  let offset = 0;
  return (
    <>
      {scenes.map(({ component: Scene, duration }, i) => {
        const from = offset;
        offset += duration;
        return (
          <Sequence key={i} from={from} durationInFrames={duration}>
            <SceneWrap durationInFrames={duration}>
              <Scene />
            </SceneWrap>
          </Sequence>
        );
      })}
    </>
  );
};

Shared Resources

• Copy principles: copy-principles.md
• Extraction logic is built into this skill (see Extraction & Context Caching above)