---
name: diffie-social-video
description: Turn a private Diffie test preview or rrweb run into a publication-safe, evidence-grounded social product video for LinkedIn/X. Use when asked to cut a Diffie replay, create a product-demo video, write “plain English in → browser test out” content, or document/verify a Diffie social asset.
---

# Diffie Social Video

Build a short, native social video from an actual Diffie run. The output must make one demonstrated product workflow legible in a feed, preserve real browser proof, avoid exposing source secrets, and make no broader claim than the run supports.

## Target deliverables

Produce all of the following unless the user narrows scope:

1. Final MP4: 1080×1920 (9:16), H.264 High, `yuv420p`, 30 fps, AAC stereo 48 kHz, `+faststart`.
2. Poster JPEG and 6–10 frame contact sheet.
3. LinkedIn post and X post; X must be ≤280 characters.
4. Source note listing observed workflow, run status, claim boundary, and private-data denylist.
5. Verification report with codec/dimensions/duration, full-decode result, loudness, visual checks, and privacy scan result.

## Non-negotiables

- Never publish a tokenized Diffie preview URL.
- Never expose preview tokens, credentials, source hosts/IPs, signer emails, signing URLs, raw generated code, connection details, test/run UUIDs, or traceable source identifiers.
- Treat replay JSON and extracted raw video as private working artifacts.
- Do not invent product actions, generated code, pass rates, time savings, coverage statistics, or reliability claims.
- Say “this run passed” only after checking the individual run status.
- A social condensation such as “four lines” must be labeled internally as editorial framing unless the source prompt was literally four lines.
- Keep real product UI as proof, but crop to the meaningful action and redact or replace sensitive detail.
- Do not stop at a render. Decode, inspect, and verify the artifact.

## Inputs to collect

Create a brief using `templates/project-brief.md`.

Required:
- private Diffie preview URL or replay artifact;
- desired platform(s);
- target problem/hook;
- workflow the user wants emphasized;
- brand assets or permission to retrieve official Diffie assets;
- any visual benchmark and what the user likes about it.

Discover rather than ask when possible:
- test/generation/run status;
- recording availability and duration;
- actual browser workflow and final outcome;
- installed FFmpeg/FFprobe, Python, Pillow, NumPy, OCR, browser capture, and TTS tools.

## Workflow

### 1. Research the creative rules

Load available social-writing, hook, video-editing, FFmpeg, and humanization skills. If the user supplied a benchmark, inspect its transcript, contact sheets, shot cadence, typography, crops, transitions, and audio. Extract principles; do not copy another brand’s visual identity.

Use these hook rules:
- lead with a painful or familiar product-team situation;
- one idea in the first two lines/three seconds;
- name the concrete workflow rather than “AI magic”;
- show proof quickly;
- end on the business outcome, not the last click.

Default Diffie hook pattern:

> After every deployment, someone still has to click through the product and hope nothing broke. Describe the workflow in plain English. Diffie runs the browser journey and checks the actual outcome.

### 2. Establish source truth

Open the preview securely. Check:
- test status;
- generation status;
- individual run status;
- recording presence;
- exact workflow steps;
- final verified condition.

Write a source note before editing. Separate:
- **observed fact** — directly visible or returned by the API;
- **editorial summary** — shortened language for a viewer;
- **unsupported claim** — must not appear.

### 3. Acquire the replay

Preferred path:
1. isolate the rrweb player from Diffie host-page UI;
2. render/play the recording in a controlled browser;
3. capture at 1920×1080, 30 fps;
4. save as `replay-raw.mp4` with no public delivery;
5. probe immediately with FFprobe.

If direct video exists, download it without transcoding first. Preserve the source artifact so edits remain reproducible.

### 4. Build a privacy denylist

At minimum include:
- preview token and full preview URL;
- test, generation, run, recording, tenant, and connection IDs;
- source domain/IP when private;
- usernames/passwords/API keys;
- personal emails and names not approved for publishing;
- signing links and signatures;
- raw generated test code or prompts containing private data.

Create a sanitized `clean-demo.mp4` by trimming, cropping, and blurring. Redaction must be applied to every affected frame, not only a poster image.

### 5. Write the narrative before rendering

Default 25–30 second structure:

- **0:00–0:03.3 — Problem:** post-deployment click-through pain.
- **0:03.3–0:03.8 — Branded wipe.**
- **0:03.8–0:07.3 — Input:** four-line editorial brief.
- **0:07.3–0:07.8 — Branded wipe.**
- **0:07.8–0:23.4 — Proof:** focused browser crops, meaningful steps, status callouts.
- **0:23.4–0:24.1 — Branded wipe.**
- **0:24.1–0:27.5 — Outcome:** one supported result and CTA.

Every scene gets one job. The browser recording is evidence, not the entire composition.

### 6. Use the Diffie editorial system

Default visual language:
- warm cream paper background;
- Diffie yellow emphasis and wipes;
- deep plum/ink text;
- official hummingbird and wordmark;
- subtle grid and print-like texture;
- rounded browser cards with tight action crops;
- small “LIVE”/“BROWSER PROOF”/status chips;
- yellow underline or highlight behind the phrase that must survive muted autoplay.

Avoid:
- generic black screen-recording templates;
- tiny full-browser frames on mobile;
- stock footage;
- decorative overlays that do not explain state;
- more than one headline/callout at a time.

### 7. Render deterministically

Recommended lightweight stack:
- Python + Pillow for composition;
- NumPy for image/audio math;
- FFmpeg for frame input/output, scale, encode, mux, loudness, and audit.

Render at 720×1280 for speed, pipe raw RGB24 frames into FFmpeg, and upscale with Lanczos to 1080×1920. A known-good encode shape:

```bash
ffmpeg -f rawvideo -pix_fmt rgb24 -s 720x1280 -r 30 -i - \
  -vf scale=1080:1920:flags=lanczos \
  -c:v libx264 -preset medium -crf 17 -pix_fmt yuv420p \
  -movflags +faststart silent.mp4
```

Use source-frame crops and short eased motions. Re-encode frame-accurate edits; do not rely on stream-copy cuts at arbitrary timestamps.

### 8. Add audio

Voiceover should explain the causal chain, not narrate every click. Keep on-screen text understandable without audio.

Recommended voice structure:
1. problem after deployment;
2. plain-English input;
3. real browser run;
4. supported outcome;
5. short Diffie line.

Use original/licensed music only. Keep interaction clicks and transition cues subtle. Mix to approximately `-16 LUFS` integrated, with safe true peak (target ≤`-1.5 dBTP`).

### 9. Write platform copy

LinkedIn:
- put the problem/result in the first two lines;
- use short paragraphs;
- mention the concrete workflow;
- explain why the outcome matters;
- use 0–3 relevant hashtags, not a hashtag wall.

X:
- ≤280 characters;
- one post by default;
- payload first;
- attach video natively;
- no unsupported metrics.

### 10. Verify mechanically and visually

Run the bundled verifier:

```bash
python3 scripts/audit_social_video.py final.mp4 \
  --expect-width 1080 --expect-height 1920 \
  --expect-fps 30 --max-duration 60
```

Also run:

```bash
ffmpeg -v error -i final.mp4 -f null -
ffmpeg -i final.mp4 -filter_complex ebur128=peak=true -f null - 2> loudness.log
```

Create and inspect:
- poster at 0.5–1.5 seconds;
- 6–10 frame contact sheet;
- frames immediately before/during/after every transition;
- final success/status frame;
- end card.

Privacy scan:
1. extract at least 40 evenly sampled full-resolution frames;
2. OCR each frame;
3. search OCR and raw pixel crops for denylisted strings/identifiers;
4. manually inspect opening/product/final-state frames;
5. report the number of frames sampled and what was checked.

## Verification gates

Do not deliver until all are true:
- [ ] final file fully decodes;
- [ ] dimensions, fps, codecs, pixel format, and duration match target;
- [ ] audio stream exists when requested and loudness is controlled;
- [ ] opening hook is readable on a phone-sized preview;
- [ ] product proof is legible at the action level;
- [ ] scene changes and wipes have been inspected;
- [ ] final claim matches the individual run status;
- [ ] denylisted data is absent from sampled frames and copy;
- [ ] LinkedIn/X copy is grounded and platform-appropriate;
- [ ] only the sanitized final asset is delivered.

## Failure modes and fixes

- **Tiny UI:** crop to the current action; do not enlarge the whole browser.
- **Technically correct but generic:** rebuild the visual system rather than adding more labels.
- **Too many claims:** keep one demonstrated workflow and one outcome.
- **Unreadable hook:** cut words before shrinking type.
- **Sensitive data appears briefly:** fix the clean source plate and re-render; do not patch only one frame.
- **Black flashes at joins:** inspect boundary frames and re-encode transitions.
- **FFmpeg `-vsync` unsupported:** remove it and use fps/select filters supported by the installed build.
- **`npx`/`gh` unavailable for skill research:** retrieve public `SKILL.md` files over direct HTTPS and record provenance.
- **TTS says “Diffy”:** review the actual audio; use pronunciation hints or a phonetic provider-specific spelling while keeping on-screen brand spelling as Diffie.

## Output report

Report:
- final absolute path and native attachment;
- duration, dimensions, codecs, fps, audio sample rate, and loudness;
- full-decode result;
- privacy scan sample count and result;
- exact supported claim used;
- local project path for future edits;
- which file/scene/timestamps to change for likely revisions.

See `references/diffie-video-case-study.md` for the concrete project this skill was distilled from.