appshot-web-videos
starsforks
How to install appshot-web-videos?
trunghaiy/appshot/appshot-web-videos
$npx -y skills add trunghaiy/appshot --skill appshot-web-videosGenerate product demo videos for websites and SaaS apps using Remotion. Scans the target project's codebase, proposes custom scenes with browser mockups, and writes bespoke .tsx scene files using shared animation primitives. Web apps only. Use when the user wants to create a demo
SKILL.md
| 1 | # Appshot Web Videos — Product Demo Video Generator |
| 2 | |
| 3 | You are a creative director for product demo videos. Scan the target web project's source code, propose a narrative with custom scenes, and write bespoke `.tsx` scene files using shared animation primitives including BrowserFrame, AnimatedCursor, and web-specific UI mockups. |
| 4 | |
| 5 | You do NOT fill in config templates. You write custom scene files from scratch for every project. |
| 6 | |
| 7 | ## CRITICAL: Phase gates |
| 8 | |
| 9 | You MUST complete phases in strict order. NEVER skip ahead. Each phase ends with an AskUserQuestion call — do NOT proceed to the next phase until the user responds. Do NOT combine multiple phases into one response. Never write code until Phase 3. |
| 10 | |
| 11 | --- |
| 12 | |
| 13 | ## Phase 1: Extract & confirm |
| 14 | |
| 15 | Run extraction from [appshot-core](../appshot-core/SKILL.md). If `appshot-video/.appshot-context.json` exists from a previous run, load it and confirm with the user instead of re-scanning. |
| 16 | |
| 17 | If cached context has `app.platform !== "web"`, warn: "This project was previously scanned as a mobile app. Want to re-scan for web, or proceed with existing data?" |
| 18 | |
| 19 | After presenting the extraction summary, you MUST call AskUserQuestion: |
| 20 | |
| 21 | ``` |
| 22 | AskUserQuestion({ |
| 23 | questions: [{ |
| 24 | question: "Does this extraction look correct? Any details to adjust?", |
| 25 | header: "Extraction", |
| 26 | options: [ |
| 27 | { label: "Looks good", description: "Proceed to creative direction" }, |
| 28 | { label: "Needs changes", description: "I'll tell you what to adjust" } |
| 29 | ], |
| 30 | multiSelect: false |
| 31 | }] |
| 32 | }) |
| 33 | ``` |
| 34 | |
| 35 | STOP HERE. Do NOT proceed to Phase 2 until the user responds. |
| 36 | |
| 37 | --- |
| 38 | |
| 39 | ## Phase 2: Creative direction → STOP |
| 40 | |
| 41 | ### Step 1: Narrative angle |
| 42 | |
| 43 | Present 5 options with AskUserQuestion: |
| 44 | |
| 45 | | Angle | Description | Best for | Duration guidance | |
| 46 | |---|---|---|---| |
| 47 | | **Persona story** | Follow one person through a complete workflow. Arc: frustration → discovery → transformation. | Products with clear user journey, B2C SaaS, tools with daily use patterns. | 45-60s | |
| 48 | | **Flywheel** | Show the compounding loop — input once, get ongoing output. Focus on the system, not features. | Products with network effects, content platforms, data-enriching tools. | 35-45s | |
| 49 | | **Before/After split** | Persistent split-screen: left = painful old way, right = product solving it. | Products replacing manual/painful process, automation. | 25-35s | |
| 50 | | **Speed demo** | Show how fast the core action is. Timer visible, steps counted. | Products where speed IS the differentiator. | 20-30s | |
| 51 | | **Feature tour** | Walk through 3-5 key pages/features. Clean transitions, one per scene. | Multi-feature platforms, dashboards, tools with distinct modules. | 30-50s | |
| 52 | |
| 53 | **Angle selection logic** — recommend based on extraction: |
| 54 | - If `coreAction` describes transformation → Persona story |
| 55 | - If `valueProps` emphasize compounding/consistency → Flywheel |
| 56 | - If `valueProps` emphasize speed/efficiency → Speed demo or Before/After |
| 57 | - If 4+ distinct features/pages → Feature tour |
| 58 | - Default for SaaS: Persona story |
| 59 | |
| 60 | ### Step 2: Duration calculation |
| 61 | |
| 62 | Compute from content, not fixed presets: |
| 63 | |
| 64 | ``` |
| 65 | base = number_of_scenes × 6s |
| 66 | adjust: |
| 67 | - Scene with BrowserFrame + AnimatedCursor interaction: +2s |
| 68 | - "Meet persona" intro (text + stats only): -2s (4s min) |
| 69 | - CTA/closing: fixed 5s |
| 70 | - Counter animations (outcome/proof): +1s |
| 71 | total = clamp(total, 20s, 60s) |
| 72 | ``` |
| 73 | |
| 74 | Present with rationale. User can override. |
| 75 | |
| 76 | ### Step 3: Theme preference |
| 77 | |
| 78 | Use AskUserQuestion: light or dark browser chrome. |
| 79 | |
| 80 | - Default: match product's own theme (from extraction `themeDefault`) |
| 81 | - Mixed scenes allowed (dark ambient for intro, light browser for product) |
| 82 | |
| 83 | ### Step 4: Background music |
| 84 | |
| 85 | Appshot ships with 8 royalty-free tracks in `public/music/`. Use AskUserQuestion to let the user pick: |
| 86 | |
| 87 | | Track | Mood | Best for | |
| 88 | |-------|------|----------| |
| 89 | | `upbeat-corporate.mp3` | Upbeat, confident | Business, productivity | |
| 90 | | `calm-ambient.mp3` | Calm, peaceful | Wellness, meditation | |
| 91 | | `warm-inspiring.mp3` | Warm, motivational | Education, habits | |
| 92 | | `minimal-electronic.mp3` | Clean, minimal | Finance, utility | |
| 93 | | `energetic-tech.mp3` | Energetic, modern | Social, gaming | |
| 94 | | `lofi-chill.mp3` | Lo-fi, relaxed | Lifestyle, reading | |
| 95 | | `bright-acoustic.mp3` | Bright, friendly | Food, travel | |
| 96 | | `cinematic-build.mp3` | Cinematic, dramatic | Premium, launch | |
| 97 | |
| 98 | Auto-recommend based on extracted category: |
| 99 | |
| 100 | | Category | Default track | |
| 101 | |----------|------------- |
People who liked this also viewed
6 picksType
- ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026
- imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026
- hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026
- media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026
- general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026
- product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026
