AgentSaaS Video Editor Skill

A comprehensive video editing and rendering skill that enables AI agents to create code-driven animations with text-to-speech narration and smooth transitions.

Purpose

This skill allows agents to:

• Create and preview interactive video projects with animations
• Generate TTS audio narration using Microsoft Edge TTS
• Render complete videos with synchronized audio and visual effects
• Support both portrait and landscape video formats
• Apply smooth transition effects between media elements

Core Capabilities

1. Interactive Video Preview

• Real-time preview of video projects in the browser
• Playback controls for testing and debugging
• Support for transitions, media clips, and timing adjustments
• Frame-by-frame seeking for precise editing
• Live transition preview with easing effects

2. Transition System

• transitionIn: Each media defines its own entrance animation
• Supported transitions: fade, zoom, slide2Left, slideUp, none
• Easing: Built-in easeOutCubic for smooth slide and zoom animations
• stayInClip: Media can persist throughout entire clip duration
• Cross-clip transitions: Automatic handling of clip boundaries

3. TTS Audio Generation

• Automated text-to-speech using Microsoft Edge TTS (msedge-tts)
• Support for multiple voices (English and Chinese)
• Word-level timing metadata for lip-sync and animations
• Audio file caching for faster previews

4. Video Rendering

• Automated frame-by-frame rendering using Puppeteer
• FFmpeg integration for video encoding and audio mixing
• 30 FPS output at 1920x1080 (landscape) or 1080x1920 (portrait)
• Deterministic rendering for consistent results
• Transition effects preserved in final output

Project Configuration Format

Media Item Properties

• src: HTML filename in the footage directory
• words: Trigger phrase from speech that activates this media
• transitionIn: Entrance animation type (optional)
• transitionDuration: Duration in seconds (optional, default: 0.6s)
• stayInClip: If true, media remains visible until clip ends (optional)

Transition Types

• fade: Opacity transition (0 → 1)
• zoom: Scale transition (2x → 1x) with opacity
• slide2Left: Horizontal slide from right (100% → 0%)
• slideUp: Vertical slide from bottom (100% → 0%)
• none: No transition effect

Transition Behavior

• transitionIn: Defines how this media enters the scene
• transitionDuration: Duration in seconds (default: 0.6s)
• stayInClip: If true, media remains visible until clip ends
• Easing: slide2Left and slideUp use easeOutCubic for smooth deceleration

Reference Implementation

See public/projects/agentSaasPromoVideo.json for a complete working example demonstrating all transition types and stayInClip behavior.

Technical Requirements