Appshot

Generate polished App Store and Google Play preview videos and screenshots — from your app's 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.

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) projects out of the box — or any app if you provide context manually.

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

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

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.

Install specific skills only:

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

Clone and copy:

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

Git submodule:

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

Fork and customize — fork this repo and modify the skills, strategies, and templates for your needs.

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.

Skills

appshot-core is loaded automatically by the other two. You interact with appshot-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

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.

Components

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

Device 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",
  },
};

Store Requirements

Videos

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

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