Guide · Agent skill
How to use the Web Video Presentation agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The web-video-presentation skill teaches an AI agent to turn an article or spoken-word script into a web page that plays like a video: one full-screen step per click, paced to a narration. It is for creators, presenters and teachers who want a dynamic-PPT style explainer they can screen-record. After this guide you will know how to install the skill, how to ask for it, what the agent will produce and what you need to check before publishing.
Web Video PresentationConardLi/garden-skills · MIT Download the skill Quick start
- 1Download and unzip the skill. Download the web-video-presentation ZIP from this page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder.
- 2Give the agent your source. Ask for a video from your article or spoken script, and paste the text or give its file path.
- 3Confirm the plan checkpoint. Review script.md and outline.md, then choose a theme, your material and a development mode.
- 4Approve chapter 1. The first chapter is built in the main thread. Check it and give feedback before the rest is built.
- 5Build the remaining chapters. Continue in your chosen mode, reviewing chapters as they arrive if you picked chapter-by-chapter.
- 6Decide on narration audio. Answer the audio checkpoint. If yes, choose a TTS provider and check the generated audio before use.
- 7Record the result. Screen-record the page following the recording guide, using auto mode if you want a single take.
What the skill makes the agent do
The skill sets out a workflow. You give the agent source material, such as a written article or a spoken-word script. The agent first writes a narration script (script.md) and a development plan (outline.md) in one pass. It then stops and asks you to confirm five things at once: the script, the outline, the theme, the material, and the development mode.
After you confirm, the agent builds a Vite + React + TypeScript project one chapter at a time. Each click advances one narration beat, each step takes the whole 16:9 stage, and the progress bar stays hidden until you hover over it. Optionally, it synthesises narration audio per step with text-to-speech tools. The skill does not invent the topic: if you give it no material, it asks for some first.
- Output: a Vite + React + TS project in a presentation/ folder, plus optional mp3 narration files.
- Outline plans pacing and information density only; animations are designed during chapter development.
Install the skill (ZIP download or Claude apps)
Option 1, for Claude Code: download the ZIP for this skill from this page and unzip it into ~/.claude/skills/ for all your projects, or into a project's .claude/skills/ folder to limit it to that project.
Option 2, in the Claude apps: upload the ZIP under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project folder
Trigger the skill with natural requests
You do not need a special command. Describe what you want in plain language and mention the source material. The skill's description covers requests such as turning an article into a video, making a dynamic PPT, recording a tutorial for Bilibili, YouTube or a video channel, or making a cinematic product demo.
Give the agent the actual text, or a file path to it, so it can keep the original article as a detail source during development.
- "Here is my article. Turn it into a narrated web video for Bilibili."
- "I have a 3-minute spoken script for a product talk. Build it as a click-driven 16:9 web presentation."
- "Make a dynamic PPT from these lecture notes that I can screen-record."
Work through the checkpoints
Expect the agent to pause at the plan checkpoint. Check the script, the outline's chapter split and step count, and the material list. Then pick a theme; the agent will recommend two or three that suit your content and explain why. For development mode, the first chapter is always built in the main thread and needs your approval. You then choose between chapter-by-chapter confirmation (the default and most controllable), sequential development, or parallel development with subagents, which is faster but means chapters may look somewhat different.
Audio is a separate checkpoint. The agent asks whether to synthesise narration before doing so.
- Default recommended mode: confirm each chapter as it is built.
- Parallel mode is faster; expect visual differences between chapters.
Generate narration audio (optional)
The narration audio step is optional. The default provider is MiniMax, which uses the mmx-cli tool and needs a MiniMax API key. The skill also includes an OpenAI option that uses curl and the OPENAI_API_KEY environment variable. The provider layer is pluggable, and the provider README lists ready-made snippets for ElevenLabs, edge-tts, macOS say, Azure and Google Cloud.
The audio is produced one file per step, named by chapter and step number, under presentation/public/audio/. Review the generated audio-segments.json before synthesising.
- Default provider: minimax (mmx-cli, MiniMax API key)
- Alternative built-in provider: openai (OPENAI_API_KEY)
presentation/public/audio/<chapter-id>/<N>.mp3Record the presentation
The recording guide covers screen recording of the finished page. The project supports an automatic recording mode triggered by an auto=1 URL parameter, so the narration can play through as a single take. Check every step and every audio file before you publish.
- Auto mode uses the step-based audio files and advances automatically.
- The progress UI is hidden so the recording stays clean.
?auto=1What people use it for
- Turning a Bilibili, YouTube or video-channel script into a click-driven web explainer.
- Building a cinematic keynote-style product demo recorded from a web page.
- Converting lecture notes into a narrated web presentation for a course video.
- Making a tutorial that uses big type and full-screen steps instead of a slide deck.
Frequently asked questions
How do I install the web-video-presentation skill?
Download the skill's ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
What do I need to run it?
The generated project is Vite + React + TypeScript, so you need Node.js and npm. Narration audio is optional and needs MiniMax mmx-cli with an account or an OPENAI_API_KEY, or another TTS provider of your choice.
Is the web-video-presentation skill free?
The skill is listed under the MIT licence. This page does not state any price, and the paid services it can call, such as MiniMax or OpenAI TTS, have their own terms and charges.
Can the skill write the script for me?
It writes script.md from the article or script you provide, but it will not invent the topic. If you only give a theme with no source material, the agent asks you for an outline or source text first.
Do I have to use audio?
No. Audio synthesis is an optional phase after the page is built. You can record the web page without narration files.
Is it safe to use, given it runs scripts and uses the network?
The skill runs scripts and makes network calls to TTS providers when you use them. Text from your script is sent to external services for audio, so do not send confidential content. Also review generated audio by hand, since text-to-speech output needs human checking before publication.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want a narrated, click-driven 16:9 web page that you can screen-record as a video, and you are comfortable with a multi-step agent workflow plus Node.js. If you only need a simple slide deck, a standard PowerPoint or Google Slides file will be faster, and anyone who wants the content written for them should look elsewhere.
Download the skill