web-video-presentation
把一篇文章或口播稿，做成"看起来像视频"的点击驱动 16:9 网页演示，可选合成口播音频。流程：原始文章 → **一次产出**口播稿 + outline 开发计划 → 用户**一次对齐** 5 件事（稿子 / outline / 主题 / 素材 / 开发模式）→ 网页开发（逐章 / 顺序 / 并行）→ 可选音频合成（provider-agnostic：内置 MiniMax mmx-cli + OpenAI TTS，可换 ElevenLabs / edge-tts / Azure / 自带 TTS）。**outline 只规划节奏与信息密度，不规划动画** —— 动画由章节开发时按 PRINCIPLES + ANTI-AI 法则即时设计。每次点击推进口播稿的一个节拍，每一步独占整屏，进度条平时隐藏只在悬浮时出现。适用场景：用网页做视频（动态 PPT 但不像 PPT）、把口播稿 / 文章变成可交互的解说、为 B 站 / YouTube / 视频号录屏教程、做有电影感的产品 / talk demo。本 Skill 沉淀的是设计方法论 + 协作流程 —— 不绑定任何特定样式 / 字体 / 颜色
Security Assessment
Detected risks:
About web-video-presentation
This skill transforms articles or narration scripts into interactive, video-like web presentations optimized for screen recording. It produces 16:9 web pages that advance through content step-by-step with each click, creating a cinematic experience that looks like a video but offers the precision and reusability of web technology. The workflow starts with raw content, automatically generates a narration script and development outline, and builds a complete Vite + React + TypeScript project with optional audio synthesis support.
The skill emphasizes design methodology and collaborative workflow over fixed templates. It provides three development modes (chapter-by-chapter, sequential, or parallel) and supports multiple TTS providers including MiniMax, OpenAI TTS, ElevenLabs, edge-tts, and Azure. The outline plans pacing and information density while animations are designed on-the-fly during chapter development following established principles. Each click advances one beat of the narration, with full-screen visual elements and a progress bar that appears only on hover.
Ideal for creators producing tutorial videos, product demos, keynote presentations, or educational content for platforms like YouTube, Bilibili, or TikTok. The skill excels at transforming written content into engaging, cinematic presentations that feel more dynamic than traditional slides while maintaining complete control over timing and visual design. It's particularly valuable for teams wanting to create professional video content with the flexibility and iterability of web development.
FAQ
What file formats does this skill accept as input?
The skill accepts articles or narration scripts in Markdown format (article.md). It automatically generates script.md (narration script) and outline.md (development plan) from your input content.
Which TTS providers are supported for audio synthesis?
The skill is provider-agnostic and includes built-in support for MiniMax (via mmx-cli) and OpenAI TTS by default. It also provides ready-to-use code snippets for ElevenLabs, edge-tts, macOS 'say' command, Azure, and Google Cloud TTS. You can integrate any TTS provider following the three-function contract.
What are the three development modes available?
The skill offers three modes for developing chapters: Mode A (chapter-by-chapter with user review after each), Mode B (sequential development of all chapters), and Mode C (parallel development using subagents). The choice is made during the Checkpoint Plan phase.
Can I customize the visual design and theme?
Yes, the skill provides multiple themes with their own aesthetic tokens, but emphasizes that every visual decision (colors, fonts, animation style) should be redesigned for your specific topic. The methodology and workflow are reusable, but templates should not be copied blindly.
How does the skill ensure consistency between narration and visuals?
The skill enforces a strict contract where narrations.ts serves as the single source of truth for both step count and audio synthesis. The maximum step number in the chapter code must equal the length of the narrations array, ensuring alignment across script, outline, chapter code, and audio files.
All Files
95 filesInstall web-video-presentation
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
conardli/garden-skills