Appshot

Generate polished App Store preview videos, Google Play preview videos, and website demo videos — from your codebase, not a video editor.

Appshot is a primitives library + AI skill that acts as a creative director: it scans your project, understands your app, and generates custom scene files tailored to your product. No video editing experience required. For mobile apps, it generates store-compliant preview videos. For websites and SaaS products, it generates 1920×1080 product demo videos with browser mockups.

Works with Claude Code, Cursor, Windsurf, Codex, and any AI agent that supports the Agent Skills spec.

Supports React Native / Expo, Flutter, Swift (iOS), and Kotlin/Java (Android) for mobile, plus Next.js, SvelteKit, Nuxt, Astro, Remix, and Vite projects for web.

Used in production: BookStreak: Reading Tracker — App Store preview videos and screenshots generated entirely with Appshot.

Real-World Example: BookStreak

BookStreak is a reading habit tracker on the App Store. Its preview videos and store screenshots were generated entirely with Appshot — no CapCut, no Canva, no video editing.

See examples/bookstreak/ for the generated config and scene files.

How It Works

The AI skill generates custom .tsx scene files for each project — no fixed scene templates, no one-size-fits-all layouts:

1. Install the skills into your mobile app project
2. Ask your AI agent — "Generate App Store and Play Store preview videos for this app"
3. The skill scans your codebase — extracts app name, brand colors, icon, features, and store metadata automatically
4. You answer a few creative questions — what problem does your app solve? What's the core action? What proof do you have?
5. The skill generates custom scenes — writes bespoke .tsx components using Appshot primitives, wired into a Remotion composition
6. Preview and render — npm run dev to preview in-browser, npm run build to export MP4

Every video is unique to your app. The skill picks the right narrative arc, writes copy, chooses animations, and composes scenes from the primitives library below.

Quick mode

Don't want a conversation? Add --quick and the skill makes all creative decisions from your codebase context alone:

Generate an App Store preview video for this app --quick

Quick mode works for web videos too:

Generate a product demo video for this website --quick

Install

Install the skills into your app project (recommended):

npx skills add trunghaiy/appshot

This installs three skills into your project's .agents/skills/ directory. Your AI agent picks them up automatically on the next session.

npx skills add trunghaiy/appshot --skill appshot-videos appshot-images

git clone https://github.com/trunghaiy/appshot.git
cp -r appshot/skills/* your-project/.agents/skills/

git submodule add https://github.com/trunghaiy/appshot.git .agents/appshot

What You Can Generate

Videos

15-30 second animated preview videos for App Store and Google Play. The skill generates both store versions in one session — same scenes, only the device frame (iPhone vs Pixel) and store badge differ. Each video is unique to your app's story, brand, and features.

Screenshots

Store listing screenshots with device frames, captions, and branded backgrounds. Supports all required App Store and Google Play dimensions.

Web Demo Videos

1920×1080 landscape product demo videos for websites and SaaS products. The skill generates custom scenes with browser mockups (Chrome-style frame), animated cursor interactions, and bespoke UI recreations of your product's actual pages. Perfect for landing page heroes, product tours, and marketing videos.

Skills

appshot-core is loaded automatically by the other skills. You interact with appshot-videos, appshot-web-videos, or appshot-images directly.

Manual Quick Start

If you prefer full control without AI skills, scaffold a standalone Remotion project:

# 1. Scaffold
npx create-appshot my-video
cd my-video

# 2. Edit src/app-config.ts with your app's info

# 3. Preview in browser
npm run dev

# 4. Render to MP4
npm run build                     # Both stores (if configured)
# npm run build:app-store         # App Store only
# npm run build:play-store        # Play Store only

Components

The primitives library that the AI composes into custom scenes. All components accept brand colors via a brand prop:

Device Presets

Browser Presets

Config Reference

Everything is driven by src/app-config.ts. The skill generates this for you, but here's the schema if you're customizing manually:

export const appConfig: AppConfig = {
  app: {
    name: "MyApp",
    tagline: "Your tagline",
    icon: "app-icon.png",     // in public/
    platform: "ios",          // "ios" | "android" | "both"
  },
  brand: {
    primary: "#007AFF",
    primaryLight: "#E5F1FF",
    background: "#F5F5F7",
    surface: "#FFFFFF",
    textPrimary: "#1D1D1F",
    textSecondary: "#86868B",
    success: "#34C759",
    danger: "#FF3B30",
  },
  video: {
    fps: 30,
    width: 886,       // App Store required: 886x1920
    height: 1920,
    device: "iphone-15",
  },
};

Web video config

export const appConfig: AppConfig = {
  app: {
    name: "MyProduct",
    tagline: "Your tagline",
    icon: "logo.png",
    platform: "web",
    url: "myproduct.com",
  },
  brand: {
    primary: "#2563EB",
    primaryLight: "#DBEAFE",
    background: "#FFFFFF",
    surface: "#F8FAFC",
    textPrimary: "#0F172A",
    textSecondary: "#64748B",
    success: "#22C55E",
    danger: "#EF4444",
  },
  video: {
    fps: 30,
    width: 1920,
    height: 1080,
    browser: "chrome-desktop",
  },
};

Store Requirements

Videos

Default output is 886×1920. This canvas works for both App Store (iPhone 6.7″ native) and Google Play.

Web Demo Videos

No store-specific constraints. Output is standard 16:9 landscape video suitable for YouTube, landing pages, social media embeds, and product documentation.

Screenshots — iOS App Store

Screenshots — Google Play

Customization

• Custom components — Build on top of the existing primitives in src/components/
• Screenshots — Use staticFile("screenshot.png") inside PhoneFrame
• Audio — Place .mp3 in public/, set backgroundMusic in config
• Category strategies — The video skill includes strategies for habit tracking, fitness, finance, and more. Add your own in skills/appshot-videos/strategies/

License

MIT