explainer

Generates 60-80 second avatar-narrated walkthrough videos of any URL with browser recording and lipsync compositing.

1|Updated Jun 20, 2026
One-click install
npx skills add https://github.com/BeanyZoldyck/moggie --skill explainer-beanyzoldyck
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: explainer
Source: https://github.com/BeanyZoldyck/moggie/tree/main/.agents/skills/explainer
Command: npx skills add https://github.com/BeanyZoldyck/moggie --skill explainer-beanyzoldyck

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating product demos, repo walkthroughs, or website explainers normally requires screen recording, scripting, voiceover, and video editing. This Skill automates the entire pipeline: it drives a real browser through any URL along a timed beat sheet, generates TTS narration and an avatar lipsync, and composites everything into a 1280x800 macOS Sonoma frame with a bottom-left avatar circle. ## Core Features & Use Cases - URL walkthrough videos: Works on GitHub repos, product pages, docs sites, and blog posts, with a repo-aware mode that scans READMEs and detects live demos. - Automated narration pipeline: Authors an 8-10 beat script (165-200 words), generates MiniMax TTS audio, and rescales beat timings to match the actual audio duration. - Avatar lipsync compositing: Generates a presenter lipsync via Pika or Kling and composites it with element-targeted zooms on every beat. - Use Case: Paste a GitHub repo URL and receive a ~70-second explainer video that navigates the repo, highlights key source files and README sections, visits the live demo, and closes with a narrated outro. ## Quick Start Ask the AI to make an explainer video for a URL, for example: create a walkthrough video for https://github.com/owner/repo.

Frequently Asked Questions about explainer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make an explainer video for a GitHub repository?

Provide the repo root URL and the skill activates GitHub mode: it scans the README, detects a live demo URL, authors an 8-10 beat script, records the browser walkthrough, and composites an avatar lipsync into a 1280x800 video.

How do I create a walkthrough video for a website or product page?

Pass any https URL and the generic-URL mode runs a pre-flight check for bot blocks and cookie banners, then records a beat-sheet walkthrough of the page with element-targeted zooms and narrated TTS audio.

Can I use my own avatar and voice in the explainer video?

Yes, pass --avatar with a hosted image URL and --voice with a MiniMax voice ID to override the identity-store defaults. Without flags, the skill silently resolves your registered avatar and voice, generating a default presenter if none exists.

What is the difference between the pika and kling lipsync providers?

Pika is the default, rendering in about 2-5 minutes with more dramatic head motion. Kling produces tighter face-centered presenter shots but takes 5-30 minutes and stalls past roughly 90 seconds of audio, so it suits high-stakes renders.

Why does the explainer abort on some websites?

The generic-URL pre-flight aborts when it detects captcha or bot-block pages such as Cloudflare challenges or access-denied responses, since headless Chrome would record the block page instead of real content.

How long can the explainer video be and what are the limits?

The beat sheet targets 65-80 seconds and 165-200 spoken words. Audio over 90 seconds is rejected because the Kling lipsync stage stalls beyond that ceiling, and narration under 30 seconds triggers a TTS retry or abort.