What levels of video quality are available?

You can choose between Quick-demo (internal/PR reviews), Walkthrough (docs/READMEs), and Production (marketing/investor decks) tiers.

How does the skill ensure narration syncs with video?

It uses an audio-first approach where narration is generated first, and the Playwright recording duration for each segment is exactly matched to the audio length plus a small buffer.

What technology does it use for video editing?

It primarily uses Remotion for programmatic video assembly, adding browser frames, transitions, and overlays, with ffmpeg used for final compression.

Does it record the whole video in one long shot?

No, it records in per-segment clips. This allows for precise timing, easier re-takes of specific sections, and much cleaner transitions during assembly.

Can I use it for applications that require login?

Yes, the skill includes specialized authentication patterns to handle login states and protected routes during the recording process.

Interaction Recorder

Name: Interaction Recorder
Author: prakhar625

byprakhar625

0•

コンテンツ管理

Generates professional, narrated demo videos and UI walkthroughs of web applications directly from your codebase.

Interaction Recorder is a specialized Claude Code skill that automates the creation of high-quality product demos and UI walkthroughs. By analyzing your repository and UI flows, it orchestrates a multi-phase process—from storyboard planning and AI narration generation to Playwright-based screen recording and Remotion-powered video assembly. Whether you need a quick PR review capture or a polished marketing video with transitions and annotations, this skill ensures perfectly synced audio and visuals with minimal manual effort.

主な機能

010 GitHub stars

02Playwright-based per-segment recording for high-fidelity UI interaction capture

03Automated repository UI flow analysis and storyboard planning

04AI-generated narration (TTS) perfectly synced to screen recordings

05Professional video assembly with Remotion including transitions, zooms, and title cards

06Multi-tier quality options from quick captures to production-grade videos

ユースケース

01Creating professional 'How-to' videos for README documentation

02Recording quick UI walkthroughs for pull requests and internal team reviews

03Generating polished product demos for stakeholders or marketing launches

主な機能

010 GitHub stars

02Playwright-based per-segment recording for high-fidelity UI interaction capture

03Automated repository UI flow analysis and storyboard planning

04AI-generated narration (TTS) perfectly synced to screen recordings

05Professional video assembly with Remotion including transitions, zooms, and title cards

06Multi-tier quality options from quick captures to production-grade videos

ユースケース

01Creating professional 'How-to' videos for README documentation

02Recording quick UI walkthroughs for pull requests and internal team reviews

03Generating polished product demos for stakeholders or marketing launches