skills.rest
tecnomanu
tecnomanuCOMMUNITY
Explore all skills by this author →
Website𝕏@tecnomanu_okGitHub

video-docs-builder

Analyze web apps, record Playwright interactions, and generate narrated video guides.

23|2|Updated Apr 25, 2026
Search Tags:#documentation#video#playwright#ffmpeg#tts#docs-site
One-click install
npx skills add https://github.com/tecnomanu/video-docs-builder --skill video-docs-builder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: video-docs-builder
Source: https://github.com/tecnomanu/video-docs-builder/tree/main
Command: npx skills add https://github.com/tecnomanu/video-docs-builder --skill video-docs-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, openai, @elevenlabs/elevenlabs-js, dotenv, and includes scripts (resource) components.

What problem does it solve?

Documenting and teaching users how to use a web app with narrated video guides.

Core Features & Use Cases

  • Automated app analysis to identify navigation sections and interactive elements.
  • End-to-end recording pipeline: analyze app → generate narrated video flows → optional React docs site with embedded videos.
  • Use cases include onboarding new users, creating step-by-step tutorials, and producing repeatable UI walkthroughs for teams.

Quick Start

Document and record guided app walkthroughs by analyzing, recording, and exporting narrated videos.

Frequently Asked Questions about video-docs-builder

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

FAQPage Schema
How do I create narrated video walkthroughs for a web app?▼

You can create narrated video walkthroughs by analyzing a web app to discover flow sections, recording user interactions with Playwright, and generating synchronized audio using TTS providers to produce guided video outputs.

Can I use Playwright to record app tutorials and export them as video?▼

Yes, Playwright is used to record app tutorials and user interactions. The skill captures these browser actions and processes them with FFmpeg to export synchronized narrated video outputs.

What is the best way to automate documentation with narrated video guides?▼

Automating documentation with narrated video guides involves analyzing an app for interactive elements, recording interactions with Playwright, generating TTS audio, and optionally building a React docs site to embed the videos.

Do I need FFmpeg and ElevenLabs to generate audio and video outputs for docs?▼

You need FFmpeg to process and synchronize video outputs, while the skill uses ElevenLabs and OpenAI as TTS providers to generate the narrated audio required for the guided app walkthroughs.

How does automated app analysis work for generating UI walkthrough videos?▼

Automated app analysis for UI walkthrough videos works by evaluating a web app to identify navigation sections and interactive elements, then loading flow definitions from SKILL.md to drive the Playwright recording pipeline.

Can I build a React docs site with embedded video tutorials automatically?▼

Yes, you can build a React docs site with embedded video tutorials automatically. The skill generates an optional React documentation site containing the recorded narrated video flows for onboarding users.

Related Skills

Explore More Software Engineering Skills→
browserbasebrowserbase
3.7k

Browser Automation

Automate browser interactions with persistent Playwright sessions via CLI commands.

Official
Advanced
flashfoxerflashfoxer

ppt-to-video

Convert PowerPoint presentations into narrated videos with AI voiceover and synchronized animations.

Community
Intermediate
yankeeinlondonyankeeinlondon
3

tts

Integrate neural TTS models across Rust, Python, and TypeScript.

Community
Advanced
xingBaGanxingBaGan

playwright-recording

Record browser interactions as videos using Playwright.

Community
Intermediate