skills.rest
masudl-hub
masudl-hubCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/masudl-hub/tutorialinator --skill tutorialinator
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Content & Communication Skills→
RuifengFuRuifengFu

bilibili-to-text

Extracts text from Bilibili videos and subtitles using yt-dlp, ffmpeg, and faster-whisper ASR.

Community
Intermediate
Cam10001110101Cam10001110101
7

generative-art

Generate seed-driven generative art as self-contained HTML with p5.js.

Community
Intermediate
kaiyekaiye
18

douyin-extract-text

Extract captions and speech from TikTok videos using OCR and ASR.

Community
Intermediate
zephyrwang6zephyrwang6
333

web-scraper

Fetch web page content and convert HTML to clean Markdown.

Community
Intermediate