How to Turn Any Coding Agent into an Interactive Video Director: An Open Skill for Automated Tutorials

An open Agent Skill that enables Codex, Claude Code, and Windsurf to record Full HD tutorials with animated visual HUDs, localized neural voiceovers, and autonomous YouTube playlist publishing.

Yasir Najeep

7 min read Reviewed Read the Arabic source

All articles
How to Turn Any Coding Agent into an Interactive Video Director: An Open Skill for Automated Tutorials

Delivering any software application or business system to end users does not conclude when the code passes unit tests and the deployment pipeline turns green. The real operational bottleneck begins immediately after: How do you help customers, cashiers, or operations staff understand how to use the system without booking endless training calls that exhaust everyone’s schedule?

Written documentation is rarely read in high-velocity frontline environments like retail stores, warehouses, and point-of-sale terminals. Recording walkthrough videos manually is tedious: you have to write a script, practice mouse movements, re-record whenever a typo happens, record audio, edit the timeline, export, and manually upload to video hosting platforms. If the UI changes next week, you have to throw everything away and start over.

When developers try automating screen recordings with tools like Playwright or Puppeteer, the output is notoriously robotic: pages switch instantly with no transition, clicks are invisible, viewers have no idea what was pressed or why, and there is no voiceover to provide narrative context.

To solve this end-to-end, I built interactive-tutorial-video, an open-source Agent Skill that turns any AI coding agent (such as Claude Code, Codex, Cursor, or Windsurf) into an autonomous digital video director. It produces broadcast-ready 1080p interactive tutorial videos complete with animated visual HUD guidance, localized neural voiceovers in native accents, and autonomous YouTube Studio upload into organized playlists ready to send to clients.

The skill is fully open source under the MIT license on GitHub (yasircs4/interactive-tutorial-video) and conforms to the open Agent Skills specification.

Live interactive walkthrough (1080p Full HD): Glowing focus spotlight halo, virtual vector cursor, click ripple waves, glassmorphic step banner, and synchronized neural voiceover.

The Genesis: Taiba Store POS in Suluq, Libya

This skill was born out of a real operational challenge. While deploying an Odoo inventory and Point of Sale (POS) system for Taiba Store (a retail shoes and bags shop in Suluq, Libya), I needed to provide my business partner Saleh and the cashier team with five concrete, practical video walkthroughs:

  1. The Fast Checkout Cycle: Selecting items from categories, applying discounts, calculating cash change, and printing receipts.
  2. Product & Barcode Setup: Adding new items, specifying Benghazi wholesale costs vs. retail prices, and generating barcode labels.
  3. Daily Sales & Margin Tracking: Reviewing daily revenue, net profit margins, physical stock audits, and low-inventory alerts.
  4. Cash Drawer & Shift Reconciliation: Registering expenses, cash inflows, end-of-day drawer counts, and closing sessions.
  5. Returns & Exchange Flow: Processing customer returns, restocking items automatically, and issuing refunds.

Instead of spending hours manually recording and editing five separate videos, I let the AI agent execute the entire workflow autonomously using this skill. The result was a polished five-part training suite recorded in 1080p with natural Libyan Arabic voiceover (ar-LY-ImanNeural), uploaded directly into an unlisted YouTube playlist ready for WhatsApp sharing with the shop staff.

The Three Architecture Pillars

The interactive-tutorial-video pipeline operates across three decoupled, deterministic phases:

+-----------------------------------------------------------------------------------+
| 1. RECORDING PHASE (Playwright + In-Browser DOM HUD Engine)                       |
|    - Inject CSS animations (pulseHalo, rippleEffect, glassmorphic HUD)            |
|    - Smart Virtual Cursor follows actions smoothly via cubic-bezier transitions   |
|    - Pulsating Spotlight Rings frame target elements                              |
|    - Tooltip pills display contextual action hints                                |
|    - Output: Raw 1080p Full HD recording                                          |
+-----------------------------------------------------------------------------------+
                                       |
                                       v
+-----------------------------------------------------------------------------------+
| 2. AUDIO SYNTHESIS & TIMELINE MUXING (edge-tts + ffmpeg)                          |
|    - Synthesize discrete voice segments across dialects (ar, en, zh, hi, fil...) |
|    - Construct ffmpeg filter_complex with adelay & amix (zero clipping)           |
|    - Apply loudness normalization & AAC audio encoding (-c:v copy)                |
|    - Output: Voiced 1080p MP4 tutorial video                                      |
+-----------------------------------------------------------------------------------+
                                       |
                                       v
+-----------------------------------------------------------------------------------+
| 3. AUTONOMOUS YOUTUBE STUDIO DISTRIBUTION (Playwright + macOS Keychain)           |
|    - Decrypt active Chrome cookie store via PBKDF2 + AES-128-CBC                  |
|    - Launch authenticated browser context into YouTube Studio                     |
|    - Upload MP4, inject titles/descriptions, set "Not made for kids", unlisted    |
|    - Automatically generate and populate unlisted playlist in sequence            |
|    - Output: Direct shareable youtu.be links ready for WhatsApp/client delivery   |
+-----------------------------------------------------------------------------------+

1. In-Browser Visual HUD Engine

Rather than capturing an unguided browser viewport where viewers lose track of the mouse cursor, tutorial_engine.js injects a dynamic visual overlay layer into the active DOM during Playwright execution:

  • Smart Virtual Cursor: A crisp SVG vector cursor that glides between interactive targets using smooth cubic-bezier timing curves, mimicking deliberate human guidance.
  • Pulsating Spotlight Rings: Glowing bounding rings with customizable brand colors (accentColor) that pulse around the target button or input field before any interaction occurs.
  • Click Ripple Waves: An expanding radial wave that animates outward at the exact moment of a click, removing ambiguity about when actions register.
  • Target Tooltip Pills: Directional dark badges with micro-arrows pointing to the target element, providing brief instructional text (e.g., “Click here to add product”, “Enter cash received”).
  • Glassmorphism Status Banner: A frosted-glass status card positioned at the bottom of the screen displaying the current step number, step headline, and operational description.

2. Localized Neural Voiceover Muxer

Visuals without narration leave users guessing. The mux_voiceover.py engine leverages Microsoft’s high-fidelity neural voices via edge-tts:

  • Supports native dialect accents: Libyan Arabic (ar-LY-ImanNeural), Saudi Arabic (ar-SA-ZariyahNeural), Egyptian Arabic (ar-EG-SalmaNeural), UAE Arabic (ar-AE-FatimaNeural), US English (en-US-JennyNeural), Chinese (zh-CN-XiaoxiaoNeural), Hindi (hi-IN-SwaraNeural), and Filipino (fil-PH-BlessicaNeural).
  • Discrete speech segments are timed to match visual steps with precision down to the millisecond.
  • An advanced ffmpeg filter_complex combines segments using adelay and amix with loudness normalization, preventing audio clipping or dead air.
  • Audio is muxed directly with the video stream using video stream copying (-c:v copy), preserving crystal-clear 1080p visual fidelity without re-encoding delays.

3. Solving the YouTube API Barrier: macOS Chrome Session Decryption

Uploading video files to YouTube programmatically has traditionally been painful for developers: Google Cloud API requires project registration, OAuth consent screens, and strict daily upload quotas (often capped at 6 uploads per day). Furthermore, automated headless logins are routinely flagged and blocked by Google’s fraud detection.

interactive-tutorial-video solves this via youtube_session_uploader.js:

  1. Queries the macOS Keychain for the local Chrome Safe Storage credential.
  2. Derives the 128-bit encryption key using PBKDF2 (saltysalt, 1003 iterations).
  3. Safely copies the SQLite cookie database from Google Chrome to avoid file locking.
  4. Decrypts v10 cookies for google.com and youtube.com via AES-128-CBC.
  5. Injects the active authenticated session into Playwright, granting instant access to YouTube Studio without login screens or 2FA prompts.
  6. Uploads the MP4 video, fills SEO-optimized titles and descriptions, configures COPPA (“Not made for kids”), and sets visibility to unlisted.
  7. Creates the client playlist and adds videos in sequence, returning clean youtu.be links for immediate sharing.

How to Install and Use in Your Agent

The skill is compatible with any AI coding agent that supports the Agent Skills specification:

# Global installation for all supported agents on your machine
npx skills add yasircs4/interactive-tutorial-video -g -a '*' -y

# Or targeted installation for Codex
npx skills add yasircs4/interactive-tutorial-video -g -a codex -y

# Or for Claude Code
npx skills add yasircs4/interactive-tutorial-video -g -a claude-code -y

Once installed, simply instruct your agent:

Use interactive-tutorial-video to record a full 1080p tutorial for our new invoicing flow.
Highlight each form input with emerald spotlight rings and directional tooltip pills.
Generate synchronized English voiceover (en-US-JennyNeural) explaining each step.
Upload the resulting video as unlisted to my YouTube account and add it to the 'Client Onboarding' playlist.

Summary and the Future of AI Production

The role of AI agents is evolving from writing lines of code to orchestrating the complete lifecycle of software delivery. When agents are equipped with visual guidance and neural voice capabilities, they bridge the gap between technical implementation and human understanding, empowering non-technical operators to adopt new tools effortlessly.

Explore the code, test the examples, and contribute:

AIAgent SkillsPlaywrightVideo AutomationYouTubeDeveloper Tools