Video & Animation

Router for all Remotion skills

Hand the current conversation off to a fresh background agent that picks up the work immediately.

Pursue a long-running goal in a single session by co-ordinating subagents.

This skill should be used when the user asks to "make a Reels/TikTok/YouTube Shorts video", "build a short-form video template", "write a hook for a short", "edit for retention", "add pattern interrupts", "make a video loop", "fix the first 3 seconds", "pace cuts for a vertical video", or "set up 9:16 safe areas". Covers the hook→retention→loop grammar of vertical short-form (distinct from a launch hype film).

Ask which skill or flow fits your situation. A router over the skills in this repo.

Turn the user's own video clips into an edited video with captions and music. Analyzes the footage (shots, speech, loudness), plans the edit, renders a draft, checks it, and revises. Use when the user wants to edit, cut, trim or assemble clips into a video, short, reel, recap, montage or highlight reel.

This skill should be used when the user asks to "add animated captions", "make TikTok captions", "karaoke captions", "word-by-word subtitles", "auto subtitles", "highlight the active word", "burn in captions to a video", "sync captions to a voiceover/narration", or "turn an SRT/transcript into animated text". Covers word-level timing from Whisper, per-word pop/scale-in, active-word highlight, 9:16 safe-area placement, readable type, and burn-in vs sidecar SRT/VTT.

This skill should be used when the user asks to "make an animated lower third", "add lower thirds", "create a name tag/name lower third", "build broadcast titles", "animate a title/name/role caption", "do a speaker name overlay", or "template lower thirds across a list of names". Covers enter/exit animation (slide/wipe/mask reveal), in/out timing & dwell, safe-area & broadcast conventions, name-vs-role type hierarchy, brand styling, and rendering one design across many names.

This skill should be used when the user asks to "make a countdown timer video", "create a countdown animation", "build a stream starting soon countdown", "do an event/launch/sale countdown", "animate a mm:ss or dd:hh:mm:ss timer", "add digit roll/flip transitions to a counter", or "loop a countdown background". Covers frame-accurate (drift-free) timers, digit flip/roll motion, time formatting, and a configurable duration prop.

Make hand-painted watercolour-and-ink cartoon videos (MP4) with code — p5.js + p5.brush rendered frame by frame in headless Chrome, encoded with ffmpeg — starring Clawd or any character. Use when the user asks to make an animation, animated short, cartoon, music video, lyric video, animated GIF/loop or "a video of Clawd…", or mentions the PDoomVideo / ClaudeAnimationBase approach. Covers storyboarding, the engine API, music and LRC lyric sync, cloud-friendly preview review, and choosing local or cloud rendering for the final video.

Cria um vídeo educativo vertical (Shorts/TikTok/Reels) no estilo 3D clean do canal Scientia, completo e pronto para postar — pesquisa o assunto, escreve o roteiro, gera a narração, monta as cenas 3D com Remotion + Three.js, gera 2 thumbnails, renderiza e revisa. Use quando o usuário pedir um vídeo explicando um assunto ("explica a 6x1", "faz um vídeo sobre…") ou disser "/novo-explicativo".

Router for all Remotion skills

Edita um vídeo de ranking como um editor humano — assiste cada clipe, entende o que acontece, escreve labels certos, corta no ritmo, escolhe e sincroniza efeitos sonoros da biblioteca do usuário, renderiza e revisa. Use quando o usuário mandar clipes, pedir um ranking novo ou disser "monta o vídeo".

Transcribing, displaying and animating captions

Aplica o feedback do usuário sobre um vídeo de ranking já renderizado (sons, labels, cortes, ritmo), renderiza de novo e grava a lição em notas-do-editor.md para os próximos vídeos. Use quando o usuário comentar o resultado de um vídeo ou disser "/feedback".

Create HTML-based video compositions, animated title cards, social overlays, captioned talking-head videos, audio-reactive visuals, and shader transitions using HyperFrames. HTML is the source of truth for video. Use when the user wants a rendered MP4/WebM from an HTML composition, wants to animate text/logos/charts over media, needs captions synced to audio, wants TTS narration, or wants to convert a website into a video.

Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or music. It resumes project state, captures intent when applicable, selects and installs the owning workflow, and routes domain capabilities. HyperFrames is the default output framework unless the user explicitly chooses another framework for the deliverable or asks only to record a browser session.

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions. Use whenever the user asks to build a video, motion graphic, animated explainer, intro, outro, title card, or convert a website / podcast / talk into a video. HyperFrames is HTML-based — fast iteration, real rendering.

Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or music. It resumes project state, captures intent when applicable, selects and installs the owning workflow, and routes domain capabilities. HyperFrames is the default output framework unless the user explicitly chooses another framework for the deliverable or asks only to record a browser session.

Use for optional HyperFrames video composition workflows, website-to-video planning, product videos, launch videos, animated case studies, social shorts, and deterministic timeline QA.

Create HTML-based video compositions, animated title cards, social overlays, captioned talking-head videos, audio-reactive visuals, and shader transitions using HyperFrames. HTML is the source of truth for video. Use when the user wants a rendered MP4/WebM from an HTML composition, wants to animate text/logos/charts over media, needs captions synced to audio, wants TTS narration, or wants to convert a website into a video.

Default creative video stack for Logan: HyperFrames (HeyGen) HTML compositions to MP4. Use for any video, deck motion, captions, product launch, website-to-video, faceless explainer, PR-to-video, motion graphics. Routes to hyperframes skills. Trigger: video, promo, captions, render, hyperframes, html-to-canvas, gsap composition.

Turn any input (a website URL, a text brief, existing footage, a music track) into a finished, pixel-perfect MP4 — fully local, byte-stable across renders. The agent researches the input and dumps a typed SPEC; the Lazy Frames CLI turns that spec into video. Use for website promos, cinematic clips, motion graphics, explainer videos, social ads, and any programmatic video generation that must be deterministic and work offline. Install: npm install lazy-frames | Raw skill URL: https://lazy-frames.cosmicstack.ai/skill.md

Create seamless infinite loops from video clips using forward-reverse-crossfade technique. Perfect for hero backgrounds, ambient loops, and any video that needs to play continuously without visible jumps.