🎬 Video Promo Skill for Claude Code

Generate cinematic promotional videos from your codebase UI using Remotion.

No abstract effects. Real UI. Beautiful animations.

Like Stripe, Linear, Vercel, and Raycast promo videos - but automated.

Installation

# Clone into your project's .agents/skills directory
git clone https://github.com/buildwithrekt/claude-skill-video-promo .agents/skills/video-promo

Or manually copy the files into .agents/skills/video-promo/.

Usage

In Claude Code, run:

/video-promo

Options

| Option | Values | Default | Description | |--------|--------|---------|-------------| | --style | smooth, snappy, cinematic | smooth | Animation style | | --duration | 30, 45, 60 | 45 | Video duration in seconds | | --screens | comma-separated list | all | Specific screens to feature |

Examples

# Generate a 45-second promo with smooth animations
/video-promo

# Quick 30-second video focusing on dashboard
/video-promo --duration 30 --screens dashboard

# Cinematic style for landing page
/video-promo --style cinematic --screens landing,features

What It Does

1. Analyzes Your Codebase

• Scans app/ or pages/ for routes and screens
• Extracts colors and typography from Tailwind/CSS
• Identifies UI components and patterns
• Detects features and user flows

2. Generates a Storyboard

Creates a scene-by-scene plan based on your actual UI:

Scene 1: Landing (5s) - Hero animation, CTA pulse
Scene 2: Dashboard (8s) - Stats cards fly in, charts animate
Scene 3: Feature Demo (8s) - Form interaction, success state
Scene 4: Outro (4s) - Logo + tagline + CTA

3. Creates Remotion Components

Generates React components that recreate your real UI with animations:

// NOT abstract effects like:
<MatrixRain />
<ParticleExplosion />

// BUT real UI like:
<DashboardScreen stats={actualStats} animateIn={true} />
<FeatureCard title="Real Feature" />

4. Ready to Render

# Preview in browser
npx remotion studio

# Render to MP4
npx remotion render YourProjectPromo out/promo.mp4

Philosophy

This skill follows the UI-first approach:

• ✅ Show the real product UI
• ✅ Animate actual user flows
• ✅ Use your actual design system
• ✅ Display realistic data
• ❌ No generic particle effects
• ❌ No abstract visualizations
• ❌ No placeholder content

Output Structure

remotion/
├── [Project]Promo.tsx           # Main composition
├── components/
│   ├── screens/
│   │   ├── LandingScreen.tsx    # Your landing page
│   │   ├── DashboardScreen.tsx  # Your dashboard
│   │   └── FeatureScreen.tsx    # Your features
│   ├── ui/
│   │   ├── Card.tsx             # Your card style
│   │   ├── Button.tsx           # Your button style
│   │   └── Chart.tsx            # Your chart style
│   └── animations/
│       ├── FadeIn.tsx
│       ├── SlideIn.tsx
│       ├── Counter.tsx
│       └── Typewriter.tsx
├── styles/
│   └── theme.ts                 # Your color palette
└── [PROJECT]_VIDEO_PROMPT.md    # Generated storyboard

Requirements

• Claude Code CLI
• Remotion installed in your project:

npm install remotion @remotion/cli @remotion/player

Examples

Input: Dashboard App

The skill detects:

• Landing page with hero section
• Dashboard with stats cards and charts
• Settings page with toggles

Output: 45-second video

1. 0-5s: Landing hero text animates in, CTA pulses
2. 5-15s: Smooth transition to dashboard, cards fly in, numbers count up
3. 15-25s: Feature demo with typing animation
4. 25-35s: Quick cuts of settings toggles
5. 35-45s: Zoom out, logo, tagline, URL

Animation Principles

Built on Silicon Valley production standards:

| Principle | Implementation | |-----------|----------------| | Timing | 300-500ms entrances, 200-300ms exits | | Easing | ease-out for entrances, springs for interactions | | Stagger | 5-frame delays between sequential elements | | Focus | One clear focal point per scene |

Contributing

PRs welcome! Areas to improve:

• [ ] More scene templates
• [ ] Additional animation presets
• [ ] Support for more frameworks (Vue, Svelte)
• [ ] Audio sync capabilities

License

MIT

Built with ❤️ by buildwithrekt

Powered by Claude Code and Remotion