/yuv-viral-video

name: yuv-viral-video
description: Edit any selfie or screen-share footage into a viral short-form video in YUV.AI's signature style — Apple-style liquid-glass cards (real CSS backdrop-filter), dark-mode polish, MrBeast-paced cuts, video-title karaoke captions, premium GSAP motion graphics, no fake content, never covering the speaker's face. Look and fonts come from yuv-design-system (Phoenix Ink): Hebrew in Karantina + Assistant, English in Anton uppercase. Always renders BOTH 9:16 and 16:9 and always saves with _V<N> suffix for backups. Trigger when the user drops a path to an .mp4/.mov/.mkv and says "edit this", "make it viral", "turn this into a short", or any Hebrew equivalent (ערוך סרטון, סרטון ויראלי, להפוך לוויראלי, ריל, שורט). The pipeline is the COMBINATION of two skills: video-use (transcription + word-snapped cuts + base extraction) and hyperframes (HTML/CSS/GSAP visual composition + render). Do NOT use for podcast-only audio edits.

Yuv-Viral-Video

The signature YUV.AI viral-short pipeline. **Two skills working together**:

• **`video-use`** — transcribes the source via ElevenLabs Scribe, picks word-snapped cuts, extracts and concats segments into a `base.mp4`. This is the cuts + base layout layer.
• **`hyperframes`** — takes the base as a background video and adds the visual composition layer in HTML/CSS/GSAP: liquid-glass cards with real `backdrop-filter`, GSAP motion graphics with `back.out` springy easing, word-by-word karaoke captions, scene transitions, and renders to MP4 via Chromium.

**You MUST use both.** Do not invent your own PIL-based cards, do not pre-bake blur into PNGs, do not write your own ffmpeg compositor. The hyperframes skill exists specifically to do the visual layer at Hollywood quality.

Companion skills (read these BEFORE you start)

Both companion skills are installed locally and auto-discovered by Claude Code at session start. **You MUST load and apply their guidelines** — this skill is the *editorial* layer on top of them, not a replacement.

| Skill | Path | Owns | |---|---|---| | `video-use` | `~/.claude/skills/video-use/SKILL.md` (symlink → `~/Developer/video-use`) | Transcription (ElevenLabs Scribe), word-snapped cuts, color grade, ffmpeg-correctness (per-segment extract → `-c copy` concat, 30 ms audio fades, `setpts=PTS-STARTPTS+T/TB` overlays, output-timeline SRT offsets, transcript caching). Read its **"Hard Rules (production correctness — non-negotiable)"** section before authoring `edl.json`. Helpers live at `~/Developer/video-use/helpers/` and are invoked as `python helpers/<name>.py`. | | `hyperframes` | `~/.claude/skills/hyperframes/SKILL.md` | HTML-as-source-of-truth video compositions, `data-*` timing attributes, CSS-driven appearance, frame-accurate library-clock animation (GSAP, Lottie, Motion One). Read its companion docs `house-style.md`, `data-in-motion.md`, `patterns.md`, `visual-styles.md` before writing the composition `index.html`. | | `hyperframes-cli` | `~/.claude/skills/hyperframes-cli/SKILL.md` | The `hyperframes init / lint / preview / render / transcribe / tts` commands. CLI is also installed globally (`hyperframes` on `$PATH`) so `npx` is optional. | | `gsap` | `~/.claude/skills/gsap/SKILL.md` | The full GSAP animation vocabulary. The `back.out(1.7)` springy easing rule in this document is one applied pattern; reach for gsap's full toolkit when the material calls for it. | | `website-to-hyperframes` | `~/.claude/skills/website-to-hyperframes/SKILL.md` | One-shot: scrape a URL → hyperframes composition. Useful when the source has on-screen UI worth re-staging. |

Precedence (when this document conflicts with a companion skill)

• **Production correctness (cuts, encoding, ffmpeg flags, ffmpeg filter ordering, transcript handling) → companion skill wins.** If `video-use` says "subtitles applied LAST in the filter chain after every overlay" and this document is silent or different, do what `video-use` says. Same for hyperframes API conventions, `data-*` attributes, frame-adapter patterns.
• **Editorial style (fonts, glass cards, "never cover the face", `_V<N>` versioning, archetype layout decisions, MrBeast pacing, no-fabricated-content rule) → this document wins.** Companion skills are deliberately style-agnostic; the YUV.AI house style lives here.
• **Strategy confirmation:** `video-use` Hard Rule 11 says "confirm the plan in plain English before executing." For viral shorts in YUV.AI style this is **deliberately suspended** — the style is fully captured in this document's Hard Rules, so the agent should execute the first pass and iterate from feedback rather than blocking on creative-direction questions. (For non-viral video-use sessions, follow the companion skill's rule.)
• **Cut-edge padding:** `video-use` allows 30–200 ms; this document picks 50 ms head / 80 ms tail as the YUV.AI default within that range. Both are correct; the narrower value is a style choice.

Shared configuration

Both skills read `ELEVENLABS_API_KEY` from `~/Developer/video-use/.env`. Set it once and both skills work. Do not duplicate the key in this skill's directory.

Save location

**Default:** `~/Documents/yuv-projects/videos/<slug>/` — always save viral video projects here so renders are findable. The `<slug>` is short, derived from the topic or source filename.

mkdir -p ~/Documents/yuv-projects/videos
cd ~/Documents/yuv-projects/videos
# Initialize the project here.
hyperframes init <slug> --video <source.mp4> --non-interactive
cd <slug>

Final renders land at `~/Documents/yuv-projects/videos/<slug>/renders/final_*_V<N>.mp4` (both 9:16 and 16:9). Tell the user where the videos live at the end of every render.

---

Style preferences (from `yuv-design-system`, Phoenix Ink v3)

This skill is the **video instantiation** of Yuval Avidani's brand system. **`yuv-design-system` is the only source of colours, fonts, logos and motion rules**; the tables below are a summary of it for this pipeline. If they