Skip to content
Get packs

Web Video Presentation

Turns an article or script into a click-driven 16:9 web page that plays like a video, with optional narration audio.

Source Download skill
Repository
ConardLi/garden-skills
Stars
13,484
Licence
MIT
Files
15 files

What it does

Once installed, the agent can take an article or spoken-word script and build it into a web page that looks like a video: one big, full-screen step per click, paced to match a narration. It writes a script and a development plan first, asks you to confirm the plan, then builds a Vite + React + TypeScript project one chapter at a time. Optionally it generates narration audio per chapter using text-to-speech tools, ready for screen recording.

Great for

  • Creators who want a dynamic-PPT style explainer video for Bilibili, YouTube or similar platforms
  • Product or talk presenters who want a cinematic keynote-style demo recorded from a web page
  • Teachers turning lecture notes into a recordable, narrated web presentation

Skip it if

  • Quick slide decks where a normal PowerPoint or Google Slides file is enough; the workflow is multi-step and heavy
  • Anyone wanting content invented for them: the skill asks for source material rather than writing the topic
  • Projects where generated audio must be used without checking it; text-to-speech output needs human review, and API-based providers send text to external services

Try asking

  • “Turn this article into a 16:9 click-driven web video with a tech-review style”
  • “Make my spoken script into an interactive narrated presentation for screen recording”
  • “Build a cinematic product demo page from this outline, one chapter per click step”
Step-by-step guide: how to use Web Video PresentationInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the MIT licence and an attribution note.

    web-video-presentation.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip web-video-presentation.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip web-video-presentation.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Keep your original article.md in the folder; the build stage uses it for on-screen details.
  • Review outline.md and the chapter plan at the checkpoint before development starts, since it sets the pacing.
  • Check generated narration audio before recording, and avoid putting secret keys in shared project files.

What's inside

  • manifest.json
  • README.md
  • README.zh-CN.md
  • references/AUDIO.md
  • references/CHAPTER-CRAFT.md
  • references/EXAMPLES/case-tech-review/outline-snippet.md
  • references/EXAMPLES/case-tech-review/README.md
  • references/EXAMPLES/hook-chapter/chapter.css
  • references/EXAMPLES/hook-chapter/README.md
  • references/EXAMPLES/list-reveal/chapter.css
  • references/EXAMPLES/list-reveal/README.md
  • references/EXAMPLES/README.md
  • references/OUTLINE-FORMAT.md
  • references/RECORDING.md
  • SKILL.md

Redistributed unmodified from ConardLi/garden-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.