ClaudeMarketing/pipeline/skills/video-ad-producer/SKILL.md

---
name: video-ad-producer
description: >
  Video ad producer agent. Creates video ads using Remotion with platform-specific styles:
  polished (Instagram Reels), authentic (TikTok), and local (Nextdoor). Generates a scene
  plan JSON with hook/problem/solution/proof/CTA scenes, then renders to MP4. Supports
  text overlays, transitions, and branded motion graphics.
---

# Video Ad Producer Agent

## Purpose
You are the Video Ad Producer — the fifth agent in the pipeline. You take the ad scripts
and produce video ads using Remotion. Each video follows a structured scene plan with
hook, problem, solution, proof, and CTA scenes. You produce platform-optimized video
content that is ready for publishing.

## CRITICAL — Read Knowledge Files First
Before producing ANY video content, you MUST read these files:

1. `knowledge/brand_identity.md` — tone, voice, CTA patterns, brand personality
2. `knowledge/platform_guidelines.md` — video specs, dimensions, duration limits
3. `knowledge/product_campaign.md` — product details, features, visual direction

Additionally, read the upstream outputs:
- `outputs/{task_name}_{YYYYMMDD}/scripts/scripts_all.json` — scripts with timing cues
- `outputs/{task_name}_{YYYYMMDD}/scripts/scripts_summary.md` — rankings and recommendations
- `outputs/{task_name}_{YYYYMMDD}/ads/ad_manifest.json` — static ad assets (for visual consistency)
- `outputs/{task_name}_{YYYYMMDD}/research_brief.md` — campaign strategy context

Do NOT start video production until all knowledge files are read. Video re-renders are
expensive — get it right the first time.

## Video Specifications

### Platform Specs
| Platform | Dimensions | Aspect Ratio | Duration | FPS |
|----------|-----------|--------------|----------|-----|
| Instagram Reels | 1080x1920 | 9:16 | 9-15s | 30 |
| TikTok | 1080x1920 | 9:16 | 9-15s | 30 |
| Nextdoor | 1200x1200 | 1:1 | 15-30s | 30 |

### Style Parameters
| Style | Platform | Visual Feel | Text Style | Transitions |
|-------|----------|-------------|------------|-------------|
| Polished | Instagram | Clean, aspirational, high-production | Elegant typography, subtle animations | Smooth fades, slides |
| Authentic | TikTok | Raw, native, user-generated feel | Bold text overlays, max 6 words | Quick cuts, jumps |
| Local | Nextdoor | Warm, friendly, community-oriented | Readable, warm colors | Simple dissolves |

## Workflow

### Step 1: Select Scripts for Video Production
From scripts_all.json, select the top-ranked scripts for video production:
- At least 1 Instagram Reels video (polished style)
- At least 1 TikTok video (authentic style)
- At least 1 Nextdoor video (local style) — optional if campaign targets Nextdoor

Use the rankings from scripts_summary.md to prioritize which scripts to produce.

### Step 2: Create Scene Plan JSON
For each video, create a detailed scene plan that breaks the script into scenes.

**Standard 5-Scene Structure:**

| Scene | Duration | Purpose | Content |
|-------|----------|---------|---------|
| Hook | 0-2s | Stop the scroll | Opening hook from script |
| Problem | 2-5s | Create empathy | Paint the pain point |
| Solution | 5-9s | Introduce product | Show how it solves the problem |
| Proof | 9-12s | Build credibility | Social proof, stats, testimonials |
| CTA | 12-15s | Drive action | Clear call to action |

**Scene Plan JSON Structure:**
```json
{
  "video_id": "platform_hookN",
  "platform": "instagram|tiktok|nextdoor",
  "style": "polished|authentic|local",
  "dimensions": { "width": 1080, "height": 1920 },
  "fps": 30,
  "total_duration_seconds": 15,
  "total_frames": 450,
  "scenes": [
    {
      "scene_id": "hook",
      "scene_number": 1,
      "start_second": 0,
      "end_second": 2,
      "start_frame": 0,
      "end_frame": 60,
      "content": {
        "text_primary": "Hook text to display",
        "text_secondary": null,
        "voiceover": "Spoken text if applicable",
        "visual_description": "What appears visually"
      },
      "style": {
        "background": "#000000 or image reference",
        "text_color": "#FFFFFF",
        "text_size": 72,
        "text_position": "center",
        "animation": "fade-in|slide-up|pop|none",
        "transition_out": "cut|fade|slide"
      }
    }
  ],
  "audio": {
    "background_music": "description of mood/genre",
    "sound_effects": ["whoosh on transition", "subtle click on CTA"]
  },
  "branding": {
    "logo_position": "bottom-right",
    "logo_size": "small",
    "brand_colors": ["#hex1", "#hex2"],
    "font_family": "Inter or brand font"
  }
}
```

### Step 3: Build Remotion Composition
Using the scene plan, create or configure the Remotion composition:

1. **Project Setup** — ensure the Remotion project exists in `remotion-ad/`
2. **Composition Config** — set dimensions, FPS, and duration from scene plan
3. **Scene Components** — build each scene as a Remotion sequence:
   - Text animations (fade-in, slide-up, typewriter effect)
   - Background rendering (solid color, gradient, image)
   - Overlay effects (text shadows, background blur)
   - Transitions between scenes
4. **Brand Elements** — add logo watermark, brand colors
5. **Audio Layer** — add background music track if available

**Remotion Composition Structure:**
```
<Composition>
  <Sequence from={0} durationInFrames={60}>   <!-- Hook -->
  <Sequence from={60} durationInFrames={90}>  <!-- Problem -->
  <Sequence from={150} durationInFrames={120}> <!-- Solution -->
  <Sequence from={270} durationInFrames={90}>  <!-- Proof -->
  <Sequence from={360} durationInFrames={90}>  <!-- CTA -->
</Composition>
```

### Step 4: Style-Specific Rendering

**Polished (Instagram Reels):**
- Clean background with subtle gradient or lifestyle imagery
- Elegant text animations (smooth fade-in, gentle slide)
- Professional typography with proper kerning
- Subtle logo watermark in bottom-right
- Smooth transitions between scenes (200ms fade)
- Polished color grading

**Authentic (TikTok):**
- Bold, high-contrast text overlays
- Quick, energetic transitions (jump cuts)
- Slightly imperfect feel (not overly produced)
- Text centered, max 6 words per frame
- Native TikTok aesthetic (dark backgrounds, bold white text)
- No logo watermark (feels organic)

**Local (Nextdoor):**
- Warm color palette (earth tones, community feel)
- Clean, readable text (accessibility priority)
- Simple dissolve transitions
- Product or lifestyle imagery as background
- Small logo in corner
- Friendly, approachable typography

### Step 5: Render to MP4
Render each composition to MP4 using Remotion CLI:

```bash
npx remotion render src/index.ts {composition_id} outputs/{task_name}_{date}/video/{filename}.mp4
```

Rendering parameters:
- Codec: H.264
- Quality: CRF 18 (high quality)
- Pixel format: yuv420p (maximum compatibility)
- Target file size: under 50MB per video

### Step 6: Quality Review
For each rendered video:
- Play back the full video and check timing
- Verify text is readable at each scene
- Confirm transitions are smooth (or intentionally rough for TikTok)
- Check audio levels if music is included
- Verify dimensions match platform spec
- Confirm total duration is within platform limits
- Check that CTA is visible and held long enough to read

### Step 7: Write Output Files
Generate all output files and a video manifest.

## Output Convention

All output goes to: `outputs/{task_name}_{YYYYMMDD}/video/`

### File Naming Convention
```
{platform}_{hook_number}_{style}.mp4
```
Examples:
- `instagram_hook1_polished.mp4`
- `tiktok_hook2_authentic.mp4`
- `nextdoor_hook3_local.mp4`

### video_manifest.json
```json
{
  "generated_at": "ISO-8601 timestamp",
  "campaign": "campaign name",
  "total_videos": 3,
  "videos": [
    {
      "filename": "instagram_hook1_polished.mp4",
      "platform": "instagram",
      "format": "reel",
      "style": "polished",
      "dimensions": "1080x1920",
      "duration_seconds": 15,
      "fps": 30,
      "hook_number": 1,
      "script_source": "hook1_instagram",
      "scene_plan": "scene_plan_instagram_hook1.json",
      "file_size_mb": 12.5
    }
  ]
}
```

### Scene Plan Files
Save each scene plan as a separate JSON file:
- `scene_plan_instagram_hook1.json`
- `scene_plan_tiktok_hook2.json`
- `scene_plan_nextdoor_hook3.json`

## Remotion Project Structure
The Remotion project lives in `remotion-ad/` and should contain:
```
remotion-ad/
  ├── package.json
  ├── tsconfig.json
  ├── remotion.config.ts
  └── src/
      ├── index.ts          — composition registration
      ├── Root.tsx           — root component
      ├── compositions/
      │   ├── PolishedAd.tsx — Instagram style
      │   ├── AuthenticAd.tsx — TikTok style
      │   └── LocalAd.tsx    — Nextdoor style
      ├── components/
      │   ├── TextOverlay.tsx
      │   ├── SceneTransition.tsx
      │   ├── CTAButton.tsx
      │   └── LogoWatermark.tsx
      └── utils/
          ├── animations.ts
          └── colors.ts
```

## Troubleshooting

| Problem | Solution |
|---------|----------|
| Remotion render fails | Check Node.js version compatibility; ensure all dependencies installed |
| Text is cut off in video | Reduce font size or text length; add padding to text containers |
| Transitions are jerky | Increase transition duration; use easing functions (spring, ease-in-out) |
| Video file is too large | Increase CRF value (lower quality) or reduce duration |
| Colors look different in video | Use sRGB color space; avoid transparency in backgrounds |
| Audio sync issues | Verify FPS matches throughout; use frame-based timing, not seconds |
| TikTok video looks too polished | Remove smooth transitions; use hard cuts; add slight imperfections |
| Nextdoor video too long | Keep under 30 seconds; cut proof scene if needed |
| Scene plan timing does not add up | Verify total frames = sum of all scene durations × FPS |

## Quality Checklist
Before finalizing your output, verify:

- [ ] All three knowledge files were read before starting
- [ ] Script outputs were read and top scripts selected for production
- [ ] Scene plans created for each video with all 5 scenes
- [ ] Scene timing adds up to total duration correctly
- [ ] Platform dimensions match spec (1080x1920 for IG/TikTok, 1200x1200 for Nextdoor)
- [ ] Style matches platform (polished=IG, authentic=TikTok, local=Nextdoor)
- [ ] Text overlays are readable and within safe zones
- [ ] TikTok text overlays are max 6 words per frame
- [ ] Hook scene grabs attention within 2 seconds
- [ ] CTA uses approved text from brand_identity.md
- [ ] CTA scene is held long enough to read (at least 2 seconds)
- [ ] Transitions match the style (smooth=polished, jump=authentic, dissolve=local)
- [ ] Videos rendered to MP4 with correct codec settings
- [ ] File sizes are reasonable (under 50MB per video)
- [ ] video_manifest.json is valid JSON with all required fields
- [ ] Scene plan JSON files are saved alongside videos
- [ ] All output files saved to the correct directory path