walkthrough-video

# Walkthrough Video Generator Create professional walkthrough videos from app screenshots or live sites using Remotion. Produces smooth, polished MP4 videos with transitions, zoom effects, and text overlays. ## Overview This skill takes a set of screenshots (or captures them from a running app) and orchestrates them into a Remotion video composition with: - **Smooth transitions** between screens (fade, slide, wipe) - **Zoom effects** to highlight specific UI areas - **Text overlays** with titles, descriptions, and callouts - **Progress indicators** showing position in the walkthrough - **Optional voiceover** narration track ## Prerequisites - **Node.js** 18+ installed - **Screenshots** of the app (or a running app to screenshot) - No Remotion experience needed — the skill generates all code ## Workflow ### Step 1: Gather Screenshots Choose one approach: #### Option A: From Existing Screenshots If the user already has screenshots (e.g. from `design-loop` or `product-showcase`): ``` Read screenshots from: - .design/screenshots/ - .jez/screenshots/ - User-specified directory ``` Sort them in walkthrough order (alphabetically by filename, or as user specifies). #### Option B: Capture from Running App If the app is running locally: 1. Start Playwright CLI session 2. Navigate through each screen in sequence 3. Screenshot at consistent dimensions (1280x720 recommended for video) 4. Save to `video/public/screens/` ```bash playwright-cli -s=walkthrough open http://loc...