home / skills / phrazzld / claude-config / brand-video

brand-video skill

safe

This skill helps you generate branded video content with Remotion by combining brand tokens, voiceover, and scene composition for polished product videos.

npx playbooks add skill phrazzld/claude-config --skill brand-video

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

2.3 KB

---
name: brand-video
description: |
  Generate branded video content with Remotion. Combines brand tokens,
  voiceover, and screen captures into polished product videos.
argument-hint: "[type: demo|feature|launch] [--script \"...\"]"
effort: high
---

# /brand-video

Create branded video content using Remotion compositions.

## What This Does

Chains brand tokens, voiceover generation, and Remotion rendering into
branded video content. Consumes `tokens.ts` for consistent visual identity.

## Prerequisites

- `brand.yaml` in project root (run `/brand-init`)
- Compiled tokens (run `/brand-compile`)
- Remotion installed in project or available globally

## Process

### Phase 1: Script + Voiceover

1. Generate or accept video script
2. Run `/voiceover` to generate audio with ElevenLabs
3. Extract word-level timestamps from ElevenLabs response

### Phase 2: Scene Composition

Import brand tokens into Remotion compositions:

```typescript
import { brand } from "./brand-output/tokens.js";

// Available branded scenes:
// - TitleScene: Brand name + tagline with accent gradient
// - FeatureScene: Feature title + description + screenshot
// - EndCard: CTA with brand colors
// - CaptionOverlay: Synced captions using voiceover timestamps
```

### Phase 3: Assembly

Compose scenes with voiceover sync:
1. TitleScene (2-3s)
2. FeatureScene[] (per feature, synced to voiceover)
3. Screen capture segments (if demo)
4. EndCard (3s)

### Phase 4: Render

```bash
npx remotion render src/video/BrandVideo.tsx brand-video.mp4 \
  --props '{"brandTokens": "./brand-output/tokens.ts", "voiceover": "./voiceover.mp3"}'
```

## Video Types

| Type | Scenes | Duration |
|------|--------|----------|
| `demo` | Title → Screen capture → Features → End | 60-90s |
| `feature` | Title → Feature deep-dive → End | 30-45s |
| `launch` | Title → Problem → Solution → Features → CTA | 45-60s |

## Scene Templates

Templates live in the project's Remotion source and import `tokens.ts`:
- Branded title cards with primary color gradient
- Feature callouts with accent highlights
- Caption overlays with brand typography
- End cards with CTA and brand logo

## Related Skills

- `/brand-compile` — Compile tokens (prerequisite)
- `/voiceover` — Generate voiceover audio
- `/demo-video` — Legacy demo video (enhanced by brand-video)

Overview

This skill generates polished branded video content by chaining brand tokens, voiceover generation, and Remotion rendering. It uses compiled design tokens to ensure a consistent visual identity and syncs captions to word-level voiceover timestamps. The output is production-ready product videos tailored to demo, feature, or launch formats.

How this skill works

You provide a script or let the skill generate one, then produce a voiceover (ElevenLabs) and extract word-level timestamps. Remotion compositions import the compiled brand tokens to render TitleScene, FeatureScene, CaptionOverlay, and EndCard templates. The scenes are assembled and rendered with the voiceover file and token path passed as props to Remotion.

When to use it

Creating short product demo videos that match brand guidelines
Producing feature deep-dives with synced captions and screenshots
Preparing launch videos that need consistent brand treatments
Turning screen capture walkthroughs into polished marketing assets
Automating recurring video updates with the same brand system

Best practices

Ensure brand.yaml exists and tokens are compiled before rendering
Keep scripts concise; voiceover timestamps work best with clear phrasing
Capture high-resolution screenshots for FeatureScenes and demos
Test scene timing locally with short renders before full production
Pass the compiled tokens.js and voiceover.mp3 paths as props to Remotion

Example use cases

60–90s demo video: Title → screen capture walkthrough → features → EndCard
30–45s feature highlight: Title → FeatureScene deep-dive → CTA
45–60s launch video: Problem → Solution → Features → CTA with branded visuals
Product update clip: swap screenshots and re-render with same tokens
Customer-facing tutorial: synced captions plus step-by-step screen captures

FAQ

What files are required before rendering?

You need brand.yaml, compiled tokens (tokens.ts/js), and the generated voiceover audio file.

How do captions stay in sync with audio?

Word-level timestamps are extracted from the voiceover provider and used by CaptionOverlay to align captions with spoken words.