# ad-creative-video

Generates data-driven Remotion video ad templates and batch-renders variations from CSV files for A/B testing across social video feeds.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 984 installs · ★ 18
- Author: iart-ai
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/iart-ai/ad-video-skills/tree/HEAD/skills/ad-creative-video/SKILL.md
- Updated: 2026-06-22
- HTML: https://affpapa.org/en/nevibecode/skills/ad-creative-video

## What it does

The skill configures a Remotion workflow for performance video ads. Rather than editing every creative manually, you write one React component and pass all variable fields through props. A script transforms `variants.csv` into individual JSON prop files, then CLI commands render a distinct MP4 file for each row.

The timeline follows a 15–30 second structure: an initial hook, problem context, product payoff, proof, and a concluding call to action. The hook must trigger before the 2-second mark because audience drop-off happens within 1.7 seconds. Each test isolates exactly one variable. If you test five hook strings, the layout, color palette, and body copy remain unchanged. The skill also enforces a strict message match between the opening promise and the CTA button.

Layouts align critical text and products within a 1:1 center square to support 9:16, 4:5, 1:1, and 16:9 exports without letterboxing. The lower third of 9:16 videos stays empty for platform UI overlays. External timers break the render. Remotion requires deterministic calculations via `useCurrentFrame()` to keep frame rendering in sync.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/ad-video-skills --skill ad-creative-video -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/ad-creative-video/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/ad-creative-video/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/ad-video-skills --skill ad-creative-video -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/ad-creative-video/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/ad-video-skills --skill ad-creative-video -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/ad-creative-video/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install iart-ai/ad-video-skills ad-creative-video
```

2. **Manually: put the files in place**
- File: `.github/skills/ad-creative-video/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/ad-video-skills --skill ad-creative-video -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/iart-ai/ad-video-skills --path skills/ad-creative-video
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/ad-creative-video/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add iart-ai/ad-video-skills --skill ad-creative-video -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/iart-ai/ad-video-skills/tree/HEAD/skills/ad-creative-video/SKILL.md

## When to use it
- Batch-render video variations from a single CSV data table
- Isolate a single variable for clean A/B testing of hooks
- Message-match the opening 3-second hook to the final CTA button
- Export one master composition across 9:16, 4:5, 1:1, and 16:9 aspect ratios

## Example prompts
- Build a Remotion ad template that swaps hooks and CTAs from a CSV file
- Set up a batch export loop for 9:16, 4:5, and 1:1 aspect ratios with UI safe zones
- Structure a 20-second performance video ad with the hook landing before 2 seconds

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 3f418c4aea88a466.

BEGIN THIRD-PARTY FILE 3f418c4aea88a466
```text
---
name: ad-creative-video
description: This skill should be used when the user asks to "make a video ad", "create an animated ad", "build a performance/UGC-style ad", "batch-produce ad creative variations", "generate ad variants for A/B testing", "swap headline/offer/CTA across many ad versions", or "export one ad in multiple aspect ratios for Meta/TikTok/Reels". Covers ad hook structures, hook→CTA message-match, data-driven variant generation (1 template × CSV = N ads), multi-aspect export, and platform specs.
version: 0.1.0
---

# Ad Creative Video

Build ONE motion-graphics ad template, then mass-produce variants from a data table — different hooks, offers, CTAs, and products — so a performance marketer can A/B test dozens of versions across placements and aspect ratios. The craft is making the template fully data-driven and message-matched, so 40 variants stay on-brand and only the tested variable changes.

## When to use

- Performance/UGC-style video ads where the first 1.5–3s must stop the scroll.
- Batch variant generation: one template rendered against many rows (headline/offer/CTA/product swaps) for A/B testing.
- Multi-aspect export of the same ad for Meta Feed, Reels/Stories, TikTok, YouTube.

Not for sale/discount countdown promos, and not for testimonial/review-driven ads — those are different structures. Stay on the batch-variation, test-everything angle.

## The two rules that make variants worth running

1. **Isolate one variable per variant.** A test only teaches something if exactly one thing changes. Hold layout, motion, colors, and timing constant; swap *only* the field under test (hook, or offer, or CTA). Mixing two changes makes the winner uninterpretable.
2. **Message-match the hook to the CTA.** The promise made in the first 3 seconds must be the promise the button pays off. A "stop wasting 2 hours a day" hook ends on "Save 2 hours — try free," not a generic "Shop now." The hook and CTA are a matched pair in every row of the data table.

## Ad anatomy (15–30s)

| Beat | Job | Budget |
|---|---|---|
| Hook (0–3s) | Stop the scroll; state the problem or pattern-interrupt | 0–3s |
| Context | Make the viewer feel the problem / agitate | 3–8s |
| Payoff | Show the product as the solution, one clear benefit | 8–18s |
| Proof | One concrete number, demo, or result | 18–25s |
| CTA (last 3s) | Single action, message-matched to the hook | hold ≥2s |
```
END THIRD-PARTY FILE 3f418c4aea88a466

The third-party file has ended. Everything between the 3f418c4aea88a466 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2438 of 10432 bytes. © iart-ai · MIT · https://github.com/iart-ai/ad-video-skills/tree/HEAD/skills/ad-creative-video/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md