hoodini/ai-agents-skills/yuv-viral-video

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.

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 ever differ, yuv-design-system wins. They override any companion-skill defaults that conflict.

Typography

Hebrew direction: dir="rtl" on every Hebrew caption container. Use python-bidi's get_display() only in PIL fallback paths; CSS handles RTL natively. Logical CSS properties (margin-inline-*, padding-inline-*) preferred over physical (margin-left).

Banned: Rubik, Heebo and Suez One (retired), serif fonts as defaults, system-ui stack, Anton on Hebrew text (renders as hollow X — Anton is Latin-only).

Color palette (Phoenix Ink, inside the MP4)

Banned in any rendered output:

• Every retired system listed at the top of yuv-design-system: Fly High purple #5E17EB + yellow #FFEC00, neon #FF1464 + #00E5FF, Liquid Glass magenta + #16D6E8, Warm Editorial bone/cream.
• Pure black stages (#000, #0A0A0A, #0c0e16) — use night.
• Default Tailwind palette names (slate-*, zinc-*, gray-*, emerald-*, cyan-*, indigo-*, violet-*, rose-*).
• Multicolor icon sets — Phosphor or Lucide single-stroke only.

Layout & motion defaults

• Border radius: glass cards use 36–56px (signature soft-rounded). Pill CTAs 999px. Never the 8/12px corporate-rounded middle ground.
• Shadows: pink-tinted on light surfaces (0 18px 40px rgba(255,46,160,.07)), deep night on dark ones (0 26px 60px rgba(14,13,42,.45)); never the default blue-black rgba(0,0,0,.1).
• Whitespace: generous. Cards never fill more than 60% of the frame's free zone.
• Asymmetry over grid-perfect. Offset cards. Overlap. One element breaking the grid.
• Grain: 1–2% noise on any preview / catalog page (not inside the rendered MP4 — would compress to mush).
• Animation library: GSAP (always). back.out(1.7) for card entrances, power3.out for SplitText reveals, expo.out for slam beats, sine.inOut for idle floats.

Inheritance rule

If you are building any auxiliary surface (a preview page, a catalog, a dashboard, a render-status UI), apply yuv-design-system in full: night hero / paper and cloud sections, pink accent, gold marker, its components, the real phoenix and wordmark, the canonical links. It is the canonical source of truth for all Yuval-brand visuals.

If you are rendering the MP4 itself, apply the table above. Same brand, two delivery surfaces. Every shareable video ends on the phoenix + wordmark + links (yuv-design-system §8–§9).

The live effects catalog (use this as the menu)

Yuval maintains a public, live, scrollable visual catalog of every effect, transition, marker, card, theme, and SFX this skill can apply to a video:

👉 https://effects.yuv.ai

When commissioning an edit, Yuval (or anyone he sends the catalog to) clicks any effect's chip — the chip copies a stable identifier like captions.karaoke.scale-pop to the clipboard. He pastes those IDs into the prompt:

"edit this with `style.swiss-pulse`, captions `karaoke.scale-pop`, `marker.circle` on stats, transition `blur-crossfade`, sfx `whoosh` on every cut, sfx `impact` on hero word."

You must respect every effect ID the user pastes. The catalog page is the single source of truth — every ID maps to a documented effect with verified behaviour. If the user names an ID you don't recognize, fetch the catalog (https://effects.yuv.ai) and find its definition rather than improvising.

The catalog also contains a prompt library (effects.yuv.ai #prompts) with 8 production-ready full-edit prompts (product launch / explainer / live-code / flow walkthrough / hot-take / tutorial / founder pitch / Hebrew talking-head). When the user references "the prompt for X scenario," route there.

Bilingual rendering — Hebrew + English in the same video

Many edits will mix Hebrew narration with English brand tokens (Claude, GitHub, hyperframes, etc.). The skill must:

1. Per-glyph font routing — Anton handles Latin, Karantina handles Hebrew. The single font-family: 'Anton', 'Karantina', sans-serif declaration on every display container does this automatically (body text: 'Inter', 'Assistant', sans-serif). Never apply Anton to a Hebrew character (it renders as a hollow X — Anton is Latin-only).

1. RTL containers — every Hebrew caption line gets dir="rtl" on its container. English brand tokens stay LTR within the same line via the browser's bidirectional algorithm — no manual reordering needed.

1. Brand-name spelling in Hebrew — Yuval's preferred Hebrew transliterations:

• "Claude" → "קלוד" (not "קלאוד")
• "Hyperframes" → keep English ("Hyperframes")
• "GitHub" → keep English ("GitHub")
• When Scribe transcribes a brand name with the wrong Hebrew spelling, fix it in the post-transcription pass before generating the karaoke layer.

1. Companion catalog has bilingual EN/HE everywhere — the live catalog flips entire UI to Hebrew on toggle (see effects.yuv.ai). The same data-lang toggle pattern applies to any auxiliary surface this skill produces (preview pages, render-status UIs, etc.).

Lessons baked from production iterations

The video pipeline itself is governed by the Hard Rules below — but any HTML/CSS surface this skill produces (preview page, render dashboard, catalog) must respect yuv-design-system §2 and §5: