Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
hoodini avatar

Yuv Video Director

hoodini/ai-agents-skills

  • 25 installs
  • 262 repo stars
  • Updated July 11, 2026
  • hoodini/ai-agents-skills

Turn an idea or script into an on-brand MP4 by routing beats to HyperFrames, Lottie, ManimCE, and a caption flow, then rendering.

About

Acts as a router and reference for YUV.AI video, deciding which engine each beat needs, composing into one HyperFrames composition, and rendering to MP4. A developer uses it to make explainers, promos, or reels.

  • Live seekable adapters vs pre-rendered assets rule per engine
  • frame.md brand wrap with phoenix logo, Lottie, and link end-card

Yuv Video Director by the numbers

  • 25 all-time installs (skills.sh)
  • +6 installs in the week ending Aug 2, 2026 (Skillselion tracking)
  • Ranked #990 of 1,335 Generative Media skills by installs in the Skillselion catalog
  • Data as of Aug 2, 2026 (Skillselion catalog sync)
npx skills add https://github.com/hoodini/ai-agents-skills --skill yuv-video-director

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs25
repo stars★ 262
Last updatedJuly 11, 2026
Repositoryhoodini/ai-agents-skills ↗

What it does

Turn an idea or script into an on-brand MP4 by routing beats to HyperFrames, Lottie, ManimCE, and a caption flow, then rendering.

Files

SKILL.mdMarkdownGitHub ↗

yuv-video-director

The conductor for YUV.AI video. You (the agent) decide what each beat needs, route it to the right engine, compose everything into one HyperFrames composition, wrap it in the YUV.AI Neon Phoenix brand, self-verify, and render to MP4. This skill is the router + the working reference implementations; load a reference file only when that engine is in play.

Design source of truth: the yuv-design-system skill (Neon mode — pink #FF1464, cyan
#00E5FF, rich-black/white, Anton+Inter+JetBrains Mono, neural-net phoenix motif). The video
form of it is `frame.md` — see references/frame-md.md. Bundled
template: assets/FRAME.md. Drop it in the project root; HyperFrames reads it.

The one law (decides everything)

HyperFrames renders by seeking each frame in headless Chrome → FFmpeg (frameIndex = floor(t·fps), same input → same output). So every visual is one of two kinds:

PatternRuns…EnginesRule
Live seekable adapterinside the render, driven to time t per frameGSAP, Lottie (window.__hfLottie), Three.js, a canvas driven by a GSAP proxy onUpdatemust be clock-driven — no Date.now(), Math.random() (seed a mulberry32), setTimeout, or .play()
Pre-rendered assetoffline, outputs a file, imported as a clipManimCE (Python→MP4/alpha), TTS audio, background-removalrender first, then drop in as a <video>/asset clip

If it can be seeked, it's an adapter. If it can't, pre-render it. Manim is always a pre-rendered clip — it has its own renderer and runs in Python; it can never be a live adapter.

Route each beat to an engine

"explain X as a TEASER/promo (FOMO, cliffhanger, fast)"              → references/teaser-explainer.md (the formula)
"explain a concept / math / neural network / algorithm / training"  → ManimCE   (pre-rendered clip — cut into BURSTS for teasers)
"branded motion: logo sting · stat reveal · icon pop · pulse"        → Lottie    (live, lottie-web)
"kinetic captions · titles · reveals · transitions · data callouts"  → GSAP      (live)  ← default
"3D / spatial"                                                       → Three.js  (live)   (Babylon NOT used)
speech → captions                                                    → transcribe + approve webapp (see video-edit skill)
no voiceover provided                                                → TTS (Kokoro: npx hyperframes tts)
brand colors / fonts / motifs                                        → frame.md  (picked up front)

GSAP is the reliable default for text/motion. Reach for Lottie for designed branded graphics, Manim for explaining an idea.

Workflow

1. Plan the beats. Narrative arc + which engine each beat needs. Pick 16:9 and/or 9:16. 2. Set the brand. Ensure FRAME.md is in the project root (copy assets/FRAME.md). All colors/fonts/motifs come from it — never invent. Three brand must-haves on every video (see references/brand-kit.md + references/cinematic.md): the real phoenix logo (assets/logo-phoenix.png) at the reveal + end card, a real featured Lottie (generate one — assets/lottie-burst-generator.py), and the link end-card (logo + "LET'S FLY HIGH" + the full link set + CTA). For teaser/social pacing see references/editing.md; for psychological/cliffhanger/FOMO cuts see references/cinematic.md. 3. Pre-render the asset beats first (so they exist as clips):

  • Manim → references/manim.md + assets/manim-scene-template.py. Render py -m manim render -qh --fps 30 scene.py SceneName, copy the MP4 into assets/.
  • Captions/TTS → reuse the video-edit skill (transcribe → approve webapp → sync) and npx hyperframes tts.

4. Scaffold + compose. npx hyperframes init <slug> --non-interactive. Author index.html (the hyperframes skill is the contract). Use:

  • the seekable neural-net field background → assets/neural-net-field.js
  • Lottie the brand way → references/lottie.md + assets/neural-pulse.json
  • the Manim render as a <video class="clip" muted playsinline> body clip
  • GSAP entrances per scene, a neon flash transition on each boundary, fade-out only on the final scene
  • for teaser / social pacing (fast hard cuts, kinetic word-slams, a hook montage, glitch/chromatic stabs) → references/editing.md — cut it like a producer, not a slideshow

5. Self-verify (gates). references/gates.md: npx hyperframes lint (0 errors) → validate (0 console errors, WCAG AA) → render → spot-check 5 frames across the timeline. Fix → re-run. Lottie MUST be screenshot-verified (the Skottie-vs-lottie-web trap). 6. Render. npx hyperframes render --fps 30 --output renders/<name>_FINAL.mp4. For vertical, clone with a 1080×1920 layout (see video-edit).

Prerequisites (check first; degrade gracefully)

See references/prereqs.md. Need Node 22+, FFmpeg, Python 3.11+ with pip (Manim/captions). On this machine: real Python is `py` → `C:\Python313` (the bare python is Hermes' venv with NO pip — don't use it). ManimCE installs via py -m pip install manim (no LaTeX needed if you author with Text()/MarkupText, not Tex/MathTex). If Manim isn't available → skip math beats or offer to install; never hard-fail the whole video.

What this skill bundles (reference implementations that lint + render)

FileWhat it is
assets/FRAME.mdYUV.AI Neon Phoenix video frame spec (rebranded from HeyGen's Coral pack)
assets/neural-net-field.jsDeterministic, seekable neural-net phoenix canvas background
assets/neural-pulse.jsonHand-authored Bodymovin Lottie (renders in lottie-web, not just Skottie)
assets/gen_content_lotties.pyGenerator for 6 production-grade CONTENT lotties (WhatsApp-collapse, decode-beam, eye-read, ghost-line hero, orb-extract, brain-fire) — transparent, persistent+continuous, lottie-web verified
assets/{wa-collapse,decode-beam,eye-read,ghost-line,orb-extract,brain-fire}.jsonThe 6 generated content lotties, ready to drop in
assets/manim-scene-template.pyManimCE scene template, neon brand styling, Text-only (no LaTeX)
assets/what_is_nn.py"What is a neural network" ManimCE scene (neuron → network → training, 34.5s)
assets/Anton-Regular.woff2Local Anton (renderer doesn't auto-resolve it; declare @font-face)
references/composition-pattern.mdThe full multi-engine index.html pattern (field + Lottie + Manim clip + GSAP + flash)
references/teaser-explainer.mdThe cinematic teaser-explainer formula: cold-open slams → manim BURSTS → face-off → FOMO montage → cliffhanger; content-synced transparent lottie beats; the seek-modulo fix; teaser music synth

Companion skills

hyperframes (composition contract — always invoke when authoring), hyperframes-cli, lottie, video-edit (transcribe + approve webapp), yuv-design-system (brand). This skill orchestrates them.

Related skills

remotion-devRemotion Best PracticesGet Remotion-specific coding guidance that prevents common video rendering mistakes when creating animated React videos.451k4.2k101-skillsAi Video GenerationGenerate videos using 40+ AI models including Veo, Seedance, and others via inference.sh442k665101-skillsAi Image GenerationGenerate images using 50+ AI models including FLUX, Gemini, and Replicate via inference.sh441k665101-skillsAi Avatar VideoGenerate videos featuring AI avatars for product demos, tutorials, marketing, or explainers441k665101-skillsRemotion RenderRender videos programmatically using React components and Remotion framework441k665halt-catch-fireRemotion RenderGenerate high-quality MP4 videos from React code using Remotion inside an AI coding agent.363k665
Generative Mediacontent
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.