Web Video Presentationby ConardLi

Web Video Presentation Skill.

A browser presentation paced like a video, one spoken beat at a time.

Presentations
Motion
Narration

Source Review · Web Video PresentationSKILL.md

Task Presentations Produces • A click-driven 16:9 React presentation divided into chapters • A spoken script, chapter outline, and supporting details drawn from the source • Optional per-step audio files for an automatically advancing recording mode Before You Start Uses Vite, React, TypeScript, and Node tooling. Optional TTS depends on the selected provider, credentials, and adapter; final recording needs browser capture or recording software.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Web Video Presentation

A narration-beat presentation workflow with a fixed stage, reviewed first chapter, chapter-local narration records, and optional audio-assisted recording.

Source-based workflowNot an execution benchmark

The Working Approach

Web Video Presentation transforms supplied material into a recordable web presentation. The artifact is a Vite, React, and TypeScript project on a fixed 16:9 stage, not a responsive marketing site or an automatically delivered video file. Each click advances one narration beat and replaces the scene with a focused full-screen composition.

The workflow keeps two content references: the spoken script determines sequence and pace, while the original article supplies details that enrich the visuals. A chapter's narrations.ts is the count and text reference for steps and optional audio. The first chapter is completed and reviewed before the remaining chapters expand the visual language. Speech synthesis is a separate decision after the web experience is ready.

Expected Deliverables

A click-driven 16:9 React presentation divided into chapters
A spoken script, chapter outline, and supporting details drawn from the source
Optional per-step audio files for an automatically advancing recording mode

See the Example Brief

From Brief to Review

01
Prepare Script And Outline
Keep the supplied article, adapt a spoken script in its original language, and plan chapter boundaries and screen content. The outline sets information rhythm without prescribing every animation.
02
Align The Plan
Confirm the script, outline, theme, assets, and development mode together so the first chapter has a settled content and visual brief.
03
Review A Complete Chapter
The main agent builds a finished first chapter with real content and intended motion, completes the prescribed review and repairs, then pauses for mandatory user acceptance before any later chapters. Use this sample to resolve pacing and design-token inconsistencies.
04
Choose Audio And Recording
If requested, generate speech from the chapter narration records and inspect segment lengths. Otherwise use manual advancement and add voiceover during recording or editing.

02 When to Use It

When to Use It

Uses Vite, React, TypeScript, and Node tooling. Optional TTS depends on the selected provider, credentials, and adapter; final recording needs browser capture or recording software.

A Good Fit

Technical ExplanationsUseful when a concept should reveal one relationship at a time while still carrying source details beyond the words spoken aloud.
Recorded Product TalksFits tutorials and product presentations that will be recorded from the browser and need precise control over what is visible at each beat.

Limits to Check

Not A Responsive WebsiteThe fixed stage scales to the available viewport. That is a presentation strategy, not a layout designed for ordinary mobile reading.
Audio Is Optional And ExternalSpeech requires a configured provider or other TTS route. A finished web project is not evidence that voice synthesis or final video recording has happened.

Bring These Inputs

Article Or ScriptProvide source content or an outline with substance. The skill is not presented as a replacement for deciding what the talk should say.
Theme And AssetsChoose the visual mood and identify available product captures, diagrams, or approved placeholders for the planned chapters.
Collaboration And AudioDecide whether later chapters need individual reviews or can be completed together, and separately authorize any speech-generation backend.

03 Decisions That Matter

Decisions That Matter

One Narration Record
Aligning the chapter's rendered step count with its narration array reduces disagreement between screen order, spoken text, and generated audio segments.
Content-Driven Motion
The outline leaves animation decisions to implementation, where the actual relationship being explained can determine the reveal instead of assigning arbitrary effects too early.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Keep the complete repository skill package, including its scaffold, chapter references, themes, and optional audio scripts.

Upstream Source File

https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-video-presentation/SKILL.md

Uses Vite, React, TypeScript, and Node tooling. Optional TTS depends on the selected provider, credentials, and adapter; final recording needs browser capture or recording software.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use Web Video Presentation to turn the attached article about browser rendering into a five-minute English explainer. Keep the source article, create the spoken script and outline, and propose a restrained technical theme. Make the first chapter demonstrate layout versus paint rather than using text-only slides. Stop for its review before building later chapters. Do not synthesize speech until I choose an audio provider.

Inspect the Result

Check the actual output against these observable criteria.

Each chapter's visible step count matches its narration entries.
The first chapter communicates its concept with a visual demonstration, not only paragraphs.
Audio files and automatic playback are only reported when those optional stages were actually completed.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: ConardLi
Repository: ConardLi/garden-skills
Skill File: skills/web-video-presentation/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · aaf9a82f5efd

Editorial Source Summary

A narration-beat presentation workflow with a fixed stage, reviewed first chapter, chapter-local narration records, and optional audio-assisted recording.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Is the result an MP4?

The core result is a browser project. Recording and post-production turn that experience into a video; optional speech files can help automate playback during recording.

Can I use my own speech provider?

The source describes a provider-agnostic runner with built-in routes and adapters. A working account or local tool still needs to be configured.

Why keep the article after writing the script?

The script controls spoken rhythm, but the article remains a pool of examples, numbers, and detail that can support the screen without overcrowding the narration.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills