tutorialinator

Generate interactive single-HTML tutorial sites from videos, topics, or URLs.

Updated Feb 12, 2026

Search Tags:#html generation #interactive learning #tutorial generation #ai content creation #video to tutorial #code sandbox

Ready to run

npx skills add https://github.com/masudl-hub/tutorialinator --skill tutorialinator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tutorialinator
Source: https://github.com/masudl-hub/tutorialinator/tree/main
Command: npx skills add https://github.com/masudl-hub/tutorialinator --skill tutorialinator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires mcp, fastmcp, openai-whisper, yt-dlp, ffmpeg-python, pydantic, httpx, rich, beautifulsoup4, whisper-timestamped, rapidocr-onnxruntime, opencv-python, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation of immersive, interactive tutorials from various sources like videos, topics, or web URLs, eliminating the need for manual web development and content structuring.

Core Features & Use Cases

Multi-Source Input: Accepts video files, URLs, or topic descriptions.
Automated Generation: Creates single, self-contained HTML tutorial files with rich UI elements and interactivity.
Use Case: Transform a technical video tutorial into a polished, interactive web page with code sandboxes, quizzes, and gamified learning elements, ready to be opened in any browser.

Quick Start

Run the auto-setup script first, then use the tutorialinator skill to teach about TypeScript generics.

Frequently Asked Questions about tutorialinator

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

FAQPage Schema

How do I convert a video into an interactive HTML tutorial?▼

To convert video to interactive HTML tutorials, this Skill ingests video files or URLs, extracts transcripts using openai-whisper, and generates self-contained HTML pages with interactive widgets, code sandboxes, and gamified learning elements.

What is AI content creation for interactive learning?▼

AI content creation for interactive learning uses AI to automate instructional design, transforming topics or web resources into single-HTML tutorial sites featuring cinematic heroes, glass morphism UI, interactive widgets, code sandboxes, and gamification elements.

Can I use yt-dlp and ffmpeg to build tutorials from web URLs?▼

Yes, this Skill uses yt-dlp and ffmpeg-python to download and process web videos, then applies openai-whisper and rapidocr-onnxruntime for transcription and OCR, ultimately generating interactive HTML tutorials from the extracted web content.

What's the best way to generate single-HTML tutorial sites from existing web resources?▼

The best way to generate single-HTML tutorial sites from web resources is using this Skill, which fetches web content via httpx and beautifulsoup4, then applies AI to structure the material into self-contained HTML files with interactive code sandboxes and gamified learning.

Does tutorial generation with this Skill require manual web development?▼

No, AI-powered tutorial generation with this Skill eliminates manual web development by automating content ingestion, instructional design, and HTML generation, producing self-contained pages with glass morphism UI, interactive widgets, and code sandboxes without coding.

Are there limitations when transforming long technical videos into gamified HTML pages?▼

Limitations when transforming long technical videos into gamified HTML pages include processing bottlenecks from openai-whisper transcription and ffmpeg-python video handling, as well as potential OCR accuracy issues with rapidocr-onnxruntime on low-resolution video frames.