Communitygithub.com

conardli/web-video-presentation

Converts an article or script into a click-driven 16:9 web presentation that "looks like a video," with optional AI voice-over synthesis.

What is web-video-presentation?

This skill provides a complete design methodology and collaboration workflow for transforming any written article or spoken script into an interactive, cinematic web presentation. The output resembles a dynamic video but is entirely click-driven, with each click advancing one beat of the script — fully occupying the screen each time, and with a hidden progress bar that appears only on hover. The workflow proceeds from the original input → generating both the spoken script and an outline plan in one pass → a single round of user alignment on five items (script, outline, theme, assets, dev mode) → chapter-by-chapter web development (sequential or parallel) → optional audio synthesis. The audio system is provider-agnostic, including built-in support for MiniMax mmx-cli and OpenAI TTS, with easy substitution for ElevenLabs, edge-tts, Azure, or custom TTS. A key design principle is that the outline only plans pacing and information density — no animations are pre-planned; instead, animations are designed ad-hoc during chapter development following PRINCIPLES + ANTI-AI guidelines. The skill is ideal for creating video-like web presentations (dynamic, non-PPT slide shows), turning scripts/articles into interactive narrations, screen-recorded tutorials for Bilibili/YouTube/WeChat Channels, and cinematic product or talk demos. Importantly, the skill is style-agnostic — it doesn't prescribe any specific fonts, colors, or aesthetic, making it reusable across any theme or design language.

Works with~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/conardli/garden-skills/tree/main/skills/web-video-presentation
View original→Browse all skills

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

What does web-video-presentation do?

Convert an article or spoken script into a click-driven 16:9 web presentation that "looks like a video," with optional voice-over audio synthesis. Workflow: original article → one-shot generation of script + outline dev plan → user one-pass alignment of 5 items (script / outline / theme / assets / dev mode) → web development (chapter-by-chapter / sequential / parallel) → optional audio synthesis (provider-agnostic: built-in MiniMax mmx-cli + OpenAI TTS, swappable with ElevenLabs / edge-tts / Azure / custom TTS). The outline only plans pacing and information density — not animations — animations are designed ad-hoc during chapter development following PRINCIPLES + ANTI-AI guidelines. Each click advances one beat of the script; each step occupies the full screen; the progress bar is hidden by default and appears only on hover. Use cases: create a video-like web page (dynamic PPT but not like PPT), turn a script/article into an interactive narration, record screen tutorials for Bilibili / YouTube / WeChat Channels, build cinematic product or talk demos. This skill encapsulates a design methodology + collaboration workflow — it is not tied to any specific style / font / color — so it can be reused across any theme and aesthetic.

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

conardli/gpt-image-2

面向 GPT Image 2 的图像生成 / 编辑技能。可在 3 种环境下使用：(A) Garden 本地模式，通过 OpenAI 兼容接口直接出图并落盘；(B) Host-Native 模式，把本 Skill 当作提示词工程指引，把渲染好的 prompt 交给宿主 Agent 自带的图像工具出图；(C) Advisor 模式，宿主无任何图像工具时退化为高质量 prompt 顾问。涵盖 18 大类、80+ 个结构化模板，覆盖海报 / UI / 产品 / 信息图 / 学术图 / 技术架构图 / 漫画 / 头像 / 流程板 / 电影分镜 / IP 周边 / 编辑工作流等场景。

conardli/kb-retriever

面向本地知识库目录的检索和问答助手。核心流程：(1)分层索引导航 (2)遇到PDF/Excel时必须先读取references学习处理方法 (3)处理文件后再检索。按文件类型组合使用 grep、Read、pdfplumber、pandas 进行渐进式检索，避免整文件加载。用户问题涉及"从知识库目录回答问题/检索信息/查资料"时使用。

conardli/web-design-engineer

Build polished visual web artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use when the user wants a browser-rendered, interactive, or presentational front-end deliverable. Not for back-end, CLI, or non-visual coding tasks.

Related Skills

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community