{
  "markdown": "# Appshot\n\nGenerate polished App Store preview videos, Google Play preview videos, and **website demo videos** — from your codebase, not a video editor.\n\nAppshot 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.\n\nWorks with **Claude Code**, **Cursor**, **Windsurf**, **Codex**, and any AI agent that supports the [Agent Skills spec](https://agentskills.io).\n\nSupports **React Native / Expo**, **Flutter**, **Swift (iOS)**, and **Kotlin/Java (Android)** for mobile, plus **Next.js**, **SvelteKit**, **Nuxt**, **Astro**, **Remix**, and **Vite** projects for web.\n\n**Used in production:** [BookStreak: Reading Tracker](https://apps.apple.com/us/app/bookstreak-reading-tracker/id6767014813) — App Store preview videos and screenshots generated entirely with Appshot.\n\n<p align=\"center\">\n  <img src=\"examples/bookstreak/app-preview.gif\" alt=\"BookStreak App Store preview video generated with Appshot\" width=\"240\" />\n</p>\n\n## Real-World Example: BookStreak\n\n[BookStreak](https://apps.apple.com/us/app/bookstreak-reading-tracker/id6767014813) 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.\n\n<p align=\"center\">\n  <img src=\"examples/bookstreak/before-after.png\" alt=\"The Old Way vs The Appshot Way\" width=\"720\" />\n</p>\n\nSee [examples/bookstreak/](examples/bookstreak/) for the generated config and scene files.\n\n## How It Works\n\nThe AI skill generates custom `.tsx` scene files for each project — no fixed scene templates, no one-size-fits-all layouts:\n\n1. **Install the skills** into your mobile app project\n2. **Ask your AI agent** — \"Generate App Store and Play Store preview videos for this app\"\n3. **The skill scans your codebase** — extracts app name, brand colors, icon, features, and store metadata automatically\n4. **You answer a few creative questions** — what problem does your app solve? What's the core action? What proof do you have?\n5. **The skill generates custom scenes** — writes bespoke `.tsx` components using Appshot primitives, wired into a Remotion composition\n6. **Preview and render** — `npm run dev` to preview in-browser, `npm run build` to export MP4\n\nEvery 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.\n\n### Quick mode\n\nDon't want a conversation? Add `--quick` and the skill makes all creative decisions from your codebase context alone:\n\n```\nGenerate an App Store preview video for this app --quick\n```\n\nQuick mode works for web videos too:\n\n```\nGenerate a product demo video for this website --quick\n```\n\n## Install\n\nInstall the skills into your app project (recommended):\n\n```bash\nnpx skills add trunghaiy/appshot\n```\n\nThis installs three skills into your project's `.agents/skills/` directory. Your AI agent picks them up automatically on the next session.\n\n<details>\n<summary>Other installation methods</summary>\n\n**Install specific skills only:**\n\n```bash\nnpx skills add trunghaiy/appshot --skill appshot-videos appshot-images\n```\n\n**Clone and copy:**\n\n```bash\ngit clone https://github.com/trunghaiy/appshot.git\ncp -r appshot/skills/* your-project/.agents/skills/\n```\n\n**Git submodule:**\n\n```bash\ngit submodule add https://github.com/trunghaiy/appshot.git .agents/appshot\n```\n\n**Fork and customize** — fork this repo and modify the skills, strategies, and templates for your needs.\n\n</details>\n\n## What You Can Generate\n\n### Videos\n\n15-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.\n\n### Screenshots\n\nStore listing screenshots with device frames, captions, and branded backgrounds. Supports all required App Store and Google Play dimensions.\n\n### Web Demo Videos\n\n1920×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.\n\n## Skills\n\n| Skill | What it does |\n|-------|-------------|\n| `appshot-core` | Foundation — architecture, config schema, component inventory, device presets |\n| `appshot-videos` | Creative director for mobile preview videos — scans your app, guides narrative, generates custom scenes |\n| `appshot-web-videos` | Creative director for web demo videos — scans your web project, generates browser mockup scenes |\n| `appshot-images` | Creative director for screenshots — scans your app, designs layouts, generates custom scenes |\n\n`appshot-core` is loaded automatically by the other skills. You interact with `appshot-videos`, `appshot-web-videos`, or `appshot-images` directly.\n\n## Manual Quick Start\n\nIf you prefer full control without AI skills, scaffold a standalone Remotion project:\n\n```bash\n# 1. Scaffold\nnpx create-appshot my-video\ncd my-video\n\n# 2. Edit src/app-config.ts with your app's info\n\n# 3. Preview in browser\nnpm run dev\n\n# 4. Render to MP4\nnpm run build                     # Both stores (if configured)\n# npm run build:app-store         # App Store only\n# npm run build:play-store        # Play Store only\n```\n\n## Components\n\nThe primitives library that the AI composes into custom scenes. All components accept brand colors via a `brand` prop:\n\n| Component | Purpose |\n|-----------|---------|\n| `PhoneFrame` | Realistic device with bezel, side buttons, notch/Dynamic Island |\n| `BrowserFrame` | Chrome-style browser window with address bar and traffic lights |\n| `AmbientBackground` | Animated gradient with floating orbs (light/medium/deep/dark) |\n| `Caption` | Bottom caption with word-by-word entrance animation |\n| `FadeIn` | Directional fade-in (up/down/left/right) |\n| `SceneWrap` | 12-frame fade transitions between scenes |\n| `AnimatedCursor` | Keyframe-driven mouse cursor for browser interaction demos |\n| `ProgressBar` | Animated horizontal bar (loading, progress, metrics) |\n| `Icon` | 30 SVG stroke icons for UI mockups |\n| `HeatMap` | GitHub-style contribution grid |\n| `AppIcon` | Icon with optional glow effect |\n| `AppStoreBadge` | iOS App Store / Google Play badges |\n| `StatCard` | Before/after stat with animated counter |\n| `FloatingCard` | Glass/solid/dark card with spring entrance |\n| `TypeWriter` | Character-by-character text reveal |\n\n## Device Presets\n\n| Preset | Screen | Notch | Store |\n|--------|--------|-------|-------|\n| `iphone-16-pro` | 393x852 | Dynamic Island | App Store |\n| `iphone-15` | 375x812 | Dynamic Island | App Store |\n| `ipad-pro-13` | 1024x1366 | None | App Store (iPad) |\n| `pixel-9` | 412x915 | Punch hole | Play Store |\n\n## Browser Presets\n\n| Preset | Viewport | Chrome | Use case |\n|--------|----------|--------|----------|\n| `chrome-desktop` | 1440x900 | Light | Default for web demo videos |\n| `chrome-dark` | 1440x900 | Dark | Dark-themed web apps, developer tools |\n\n## Config Reference\n\nEverything is driven by `src/app-config.ts`. The skill generates this for you, but here's the schema if you're customizing manually:\n\n```typescript\nexport const appConfig: AppConfig = {\n  app: {\n    name: \"MyApp\",\n    tagline: \"Your tagline\",\n    icon: \"app-icon.png\",     // in public/\n    platform: \"ios\",          // \"ios\" | \"android\" | \"both\"\n  },\n  brand: {\n    primary: \"#007AFF\",\n    primaryLight: \"#E5F1FF\",\n    background: \"#F5F5F7\",\n    surface: \"#FFFFFF\",\n    textPrimary: \"#1D1D1F\",\n    textSecondary: \"#86868B\",\n    success: \"#34C759\",\n    danger: \"#FF3B30\",\n  },\n  video: {\n    fps: 30,\n    width: 886,       // App Store required: 886x1920\n    height: 1920,\n    device: \"iphone-15\",\n  },\n};\n```\n\n### Web video config\n\n```typescript\nexport const appConfig: AppConfig = {\n  app: {\n    name: \"MyProduct\",\n    tagline: \"Your tagline\",\n    icon: \"logo.png\",\n    platform: \"web\",\n    url: \"myproduct.com\",\n  },\n  brand: {\n    primary: \"#2563EB\",\n    primaryLight: \"#DBEAFE\",\n    background: \"#FFFFFF\",\n    surface: \"#F8FAFC\",\n    textPrimary: \"#0F172A\",\n    textSecondary: \"#64748B\",\n    success: \"#22C55E\",\n    danger: \"#EF4444\",\n  },\n  video: {\n    fps: 30,\n    width: 1920,\n    height: 1080,\n    browser: \"chrome-desktop\",\n  },\n};\n```\n\n## Store Requirements\n\n### Videos\n\n| Platform | Dimensions | Duration | Format |\n|----------|-----------|----------|--------|\n| iPhone 6.7\" | 886x1920 | 15-30s | H.264, MP4/MOV |\n| iPhone 6.1\" | 886x1920 | 15-30s | H.264, MP4/MOV |\n| iPad 13\" | 1200x1600 | 15-30s | H.264, MP4/MOV |\n| Google Play | 886x1920 | 15-30s | H.264, MP4 |\n\nDefault output is 886×1920. This canvas works for both App Store (iPhone 6.7″ native) and Google Play.\n\n### Web Demo Videos\n\n| Format | Dimensions | Duration | Codec |\n|--------|-----------|----------|-------|\n| Landing page hero | 1920x1080 | 20-45s | H.264, MP4 |\n| Full product demo | 1920x1080 | 30-60s | H.264, MP4 |\n\nNo store-specific constraints. Output is standard 16:9 landscape video suitable for YouTube, landing pages, social media embeds, and product documentation.\n\n### Screenshots — iOS App Store\n\n| Device | Dimensions (portrait) | Required |\n|--------|----------------------|----------|\n| iPhone 6.9\" | 1320x2868 | Yes (mandatory primary) |\n| iPhone 6.7\" | 1290x2796 | Optional |\n| iPhone 6.5\" | 1242x2688 | Optional (legacy) |\n| iPad 13\" | 2064x2752 | Required if app supports iPad |\n\n### Screenshots — Google Play\n\n| Device | Dimensions (portrait) | Notes |\n|--------|----------------------|-------|\n| Phone | 1080x1920 | Recommended standard |\n| 7\" Tablet | 1200x1920 | If app targets 7\" tablets |\n| 10\" Tablet | 1600x2560 | If app targets 10\" tablets |\n\n## Customization\n\n- **Custom components** — Build on top of the existing primitives in `src/components/`\n- **Screenshots** — Use `staticFile(\"screenshot.png\")` inside `PhoneFrame`\n- **Audio** — Place `.mp3` in `public/`, set `backgroundMusic` in config\n- **Category strategies** — The video skill includes strategies for habit tracking, fitness, finance, and more. Add your own in `skills/appshot-videos/strategies/`\n\n## License\n\nMIT\n",
  "bytes": 10519,
  "sha": "1aa087edbe616b741be86c721f4ff2bca8006b6dbc16ae10808e69ca779064ed",
  "repo_slug": "trunghaiy/appshot",
  "fonte": "repo",
  "truncated": false,
  "api": "https://api.agentalog.com/api/listings/skl_trunghaiy_appshot_appshot_images_b5c5dba4/readme"
}