record-demo

Record Browser Demo

Help me record a browser demo for a Remotion video project.

Project Integration

Before gathering configuration, check if we're in a project context:

1. Check for active project:

   • Look for project.json in current directory or parent projects/*/
   • If found, read it to understand:
     • Which scenes need demo recordings
     • Expected asset paths
     • Scene instructions

2. If project context found:

   I see you're working on: {project.name}
   
   Scenes needing recordings:
     ⬜ Scene 3: Dark mode demo → demos/dark-mode.mp4
        Instructions: Navigate to Settings → Toggle dark mode
     ⬜ Scene 5: Login flow → demos/login.mp4
        Instructions: Show login → enter credentials → redirect
   
   Which scene would you like to record? (or enter a new recording)
   

3. After recording completes:

   • Update project.json scene status to "asset-present"
   • Add session entry
   • Regenerate project CLAUDE.md

---

Your Tasks

1. Gather Recording Configuration Use the AskUserQuestion tool to collect the following information:

   Question 1 - Basic Setup:

   • URL to record (e.g., "https://myapp.com/dashboard")
   • Output filename (without extension, e.g., "dashboard-walkthrough")

   Question 2 - Output Location: Ask where to save the recording. Options:

   • ./output (default, local to playwright folder)
   • Detect from current project (look for nearest public/demos/ folder)
   • Custom path (let user specify)

   Question 3 - Viewport:

   • 1080p (1920x1080) - Default, matches Remotion
   • 720p (1280x720) - Smaller files
   • Mobile (390x844) - iPhone 14 size
   • Custom dimensions

   Question 4 - Recording Mode:

   • Interactive - Opens a visible browser window. User manually performs actions while it records. Good for exploring or one-off recordings.
   • Script Template - Generates a TypeScript file in playwright/scripts/flows/ with boilerplate. User edits the script to add specific actions, then runs it. Good for repeatable recordings.