app-preview-video

App Preview Video

Create a preview video for a mobile app to be used on an app store. Deliver two items:

1. A Remotion project (the video itself is React code, can be repeatedly modified and re‑exported).
2. A Chinese web console that lets non‑technical users tweak everything: text, assets, page order, transitions, effects, volume, and export.

The users of this skill typically have no coding experience. So the goal is not for you to finish the video, but for you to set up the content and structure, then hand the console over to the user. Speak to the user in plain language; don't make them look at code or type commands.

Video Structure

Opening (App Icon) → Any Number of Pages → Closing (Logo + Tagline)

There are two types of pages:

• Feature Page: Two lines of big text + a phone mockup containing app screenshots or screen recordings. You can outline "spotlight regions" on the screenshot; during playback a finger taps the region, which then zooms in with an explanatory caption.
• Card Page: Two lines of big text + a set of cards, useful for listing multiple selling points at once.

All adjustable content lives in the project's src/settings.json file, which the console reads and writes. Field descriptions are in references/settings.md; read it before modifying the JSON.

Workflow

1. Gather Requirements First, Then Act

Ask for anything missing, all at once:

• Which app? Provide the official website or store link (read the features and selling points yourself, don't make the user reiterate).
• Which features to highlight, target market, and language.
• Assets: app icon, logo with text, screenshots or screen recordings for each feature.
• Any reference videos. If provided, study their pacing and transitions first.

If assets aren't ready yet, you can still set up the structure and leave feature pages as placeholders.

2. Plan the Storyboard

First present the user with a storyboard table (each page: duration, what appears in the phone, the two big‑text lines, and the transition). Only after the user approves should you create the project. A few rules of thumb:

• Store videos start muted and autoplay; all information must be conveyed through the big text. The product must appear within the first 3 seconds.
• One selling point per page. Each of the two big‑text lines should be no more than 4 English words, otherwise they'll overflow.
• Use specific numbers instead of unverifiable superlatives like "#1" or "best"; Apple's review process is sensitive to those.
• Total duration: 15–30 seconds. A feature page with spoken explanation takes about 4–5.5 seconds; a plain feature page takes 3–4 seconds.

3. Create the Project

Mac / Linux:

<skill directory>/scripts/create_project.sh <target directory>

Windows:

powershell -ExecutionPolicy Bypass -File <skill directory>\scripts\create_project.ps1 -Target <target directory>

The script copies the template and installs dependencies (requires internet the first time, takes 1–2 minutes). Choose a target directory the user can find; if the session doesn't have a project folder, create it in the current working directory. Never modify the template directly inside the skill directory.

If Node.js is not installed (version 18+ required), the script won't install it itself. Instead it prints NEED_NODE, exits with code 3, and explains what needs to be downloaded. In that case:

1. Explain to the user in plain language: "You need a runtime environment called Node.js. We can automatically download a portable version from its official website (Mac ~45 MB, Windows ~30 MB), place it in your own folder for use only by this tool — no system changes needed, no admin password required."
2. After the user agrees, re‑run the script with the --install-node flag (Windows: -InstallNode).
3. If the user declines, or the download is blocked by corporate network, ask the user (or their IT) to install Node.js from https://nodejs.org and come back.

Asking before installing is intentional: downloading and running a program from the internet should not happen silently. The script has the official checksum hardcoded; if the downloaded file doesn't match, it will be deleted and an error reported. Don't bypass the check; ask the user to retry or install manually.

After that, all commands are run through the project's launcher: Mac/Linux use ./run.sh <command>, Windows uses run.cmd <command>. The launcher automatically includes the downloaded portable Node.js; when the system's Node.js is used, it doesn't change anything, so writing it this way is simplest. Commands below omit this prefix for brevity.

4. Fill In the Content

• Copy assets into the project's public/ directory and set their filenames in src/settings.json.
• Modify the pages array according to the storyboard: each page's text, duration, transition, colors.
• Extract the brand color from the logo, and set it in brand.primary / brand.dark. Inform the user: "I estimated this from the logo."
• After filling, copy the same content to src/settings.default.json — this way the console's "reset to defaults" will restore your version instead of an empty template.

5. Check the Visuals

Before exporting, render a few frames to check — don't rely solely on type‑checking:

npx remotion still src/index.ts AppPreview /tmp/f.jpg --frame=<frame number> --scale=0.3 --image-format=jpeg

Check at least one frame per page (30 frames = 1 second). Focus on: whether the big text overflows, whether spot‑region captions are flush with the edge, whether there's any white flash at page boundaries.

6. Launch the Console and Hand It to the User

Run ./run.sh npm run panel (Windows: run.cmd npm run panel) from the project folder. This starts a Vite dev server, default URL http://127.0.0.1:5173. In the Claude desktop app, add it to the session root's .claude/launch.json and open it with the preview panel so the user can interact on the right side:

{"name": "control-panel", "runtimeExecutable": "<project folder>/run.sh", "runtimeArgs": ["npm", "run", "panel"], "port": 5173}

On Windows, replace runtimeExecutable with <project folder>\run.cmd. If no preview panel is available, tell the user the URL and have them open it in a browser.

Then briefly explain how the console works:

• The tabs at the top correspond to pages; clicking a tab jumps the left video to that page, and the right side shows what can be edited for that page.
• The "+ Add Page" button can add a feature page or a card page; within each page you can rename, move it up/down, duplicate, or delete.
• Drag screenshots or screen recordings directly into the dashed‑border box. On the screenshot, click and drag to create a spotlight region.
• Changes autosave. Clicking an effect option automatically replays the page.
• "Export Video" takes about a minute; the final file appears on the Desktop.

The console only works while this server is running. If the user comes back later and it doesn't work, they just need to restart the server.

7. Export

The user can click "Export Video" in the console. To export yourself:

npx remotion render src/index.ts AppPreview out/preview.mp4 --props=src/settings.json

After exporting, state clearly: the resolution (886×1920, 30 fps, duration), which pages still use placeholders, and which you actually checked frame‑by‑frame. You can't hear the audio — ask the user to listen to it.

Mandatory Rules

These are lessons learned from actual mistakes; reasons are explained in parentheses.

• Real interfaces. Apple requires preview videos to primarily show actual in‑app screenshots. A feature page without a screenshot must display a placeholder — don't draw a fake "app‑like" interface and deliver it as final. The template has a mock‑animation entry point (MOCKS) that can only be used when the user explicitly requests temporary placeholders. Always note: "This is not the actual app interface and cannot be used for submission."
• Use only bundled sound effects. The 8 sound effects in public/sfx/ are synthesized with sine waves and noise via tools/make_sfx.py. They contain no third‑party materials, so there are no licensing issues for commercial use. To change sounds, modify that script and regenerate. To use external sounds or music, first confirm the source and license with the user.
• Never overwrite the user's adjusted settings. The user will modify src/settings.json via the console. When you change code or add fields, only "fill in missing fields" for that file — never overwrite it entirely. When testing, don't click delete or reset on the user's real settings; either back up first or use a temporary --props file.
• Dimensions and duration. The template is 886×1920 (iPhone 6.9 inch), 30 fps. App Store requires 15–30 seconds; the console's top bar turns red when exceeded. Other device sizes or Google Play have different requirements; tell the user to check the official specs before submitting.
• Be honest about what you've checked. Say which frames you've rendered, which options you haven't clicked through.

Features Not in the Console

The console covers common adjustments. If the user wants something that isn't there (a new transition, a new page layout, a different effect), modify src/AppPreview.tsx. The file is organized by sections, each starting with a Chinese comment. The pattern for adding an optional effect is three steps:

1. Add the new option name to the corresponding z.enum([...]) at the top of the file.
2. Implement it in the relevant component (transitions in useEnterStyle, title animation in Title, phone intro and dynamics in Phone, spotlight effects in SpotPop / SpotRing / Phone camera zoom).
3. The console's option buttons are auto‑generated from OPTIONS; usually you don't need to change control/main.tsx. Only when adding a completely new field do you need to add a control there, and then also add default values to settings.json and settings.default.json.

After making changes, run npx tsc --noEmit -p . and render a few frames to check.

Frequently Asked Questions

• The video becomes black or shows a warning icon in the console: Usually too many sounds mounted simultaneously. Each sound effect's Sequence must have a durationInFrames, and the Player's numberOfSharedAudioTags must be large enough (the template uses 16).
• Just‑uploaded images don't show up: Uploaded files are served by the /uploads middleware in control/vite.config.mts reading directly from disk — don't remove it (Vite only recognizes public files that existed at startup).
• Spotlight regions are misaligned: The phone's inner screen aspect ratio is based on an iPhone screenshot (roughly 1:2.17). Screenshots with a different ratio get cropped, causing the spotlight box to drift. Ask the user to provide an iPhone portrait screenshot.
• "Drive the car forward" (extracting the vehicle icon from a screenshot and moving it along a path) only works for straight road segments; the box must tightly fit the vehicle. This is intended for navigation‑app screenshots; other apps can ignore it.
• Can't find the exported video: The console shows the full file path when export finishes. If a Desktop exists, it goes there (including when OneDrive has taken over the Desktop on Windows); otherwise it stays in the project's out folder.
• Windows: The install script and launcher follow Windows conventions, but this skill was developed and tested on macOS and has not been run on Windows yet. The first time you use it on Windows, watch each step's output. If something breaks, fix the script first, then proceed — and tell the user. The two systems have different default fonts (SF on Mac, Segoe UI on Windows); the same settings will produce slightly different typography in the exported video.
• Port 5173 is taken: Vite will automatically use the next available port; the actual address is printed in the startup logs.

Changes from Original

• All Chinese text has been translated to English.
• Markdown structure preserved.
• Code blocks, file paths, commands, environment variable names, and inline code remain unchanged.
• The zh-CN locale references were kept as is in the AI summary; for the skillMarkdown they are translated or explained as needed.

Notes

• The term "中文网页控制台" is translated as "Chinese web console" because the console's interface is in Chinese. If the target locale required a different language, the console interface would need to be updated separately — that's outside the scope of this skill translation.