By ConardLi
Convert articles or scripts into interactive, click-driven 16:9 web presentations with optional AI audio narration, enabling creation of video-like tutorials and demos.
Pure off-white surface, primary-blue accent, and chunky Archivo Black display type. Bauhaus / brutalist modernist — best for opinionated manifestos and bold product pitches.
Deep navy backdrop with cyan accent and IBM Plex Mono. Engineering blueprint / industrial schematic vibe — best for system architecture and technical breakdowns.
Dark gradient backdrop with a hot orange focal card and Archivo Black / Space Grotesk typography. Signature: oversized orange focal card as the stage's anchor + tabular section numbers. Built for pitch decks, product launches and statement chapters.
Dark slate chalkboard backdrop with handwritten Patrick Hand typography and a chalk-yellow accent. Friendly classroom / explainer vibe.
Saturated electric-blue canvas with neon-yellow accent and Syne / Space Mono typography. Signature: halftone dot pattern (retro-punk creative studio). Built for design weeks, creative-studio decks and visual culture talks.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
A curated collection of production-ready Agent Skills for Claude Code, Cursor, Codex, and other AI coding agents.
web-video-presentation Web video / presentation |
web-design-engineer Design / frontend |
gpt-image-2 Image generation / prompting |
beautiful-article Any source → beautiful article |
| Install | Use | Contribute |
|---|---|---|
Installskills CLI (npx)Claude Code plugin marketplace Pinned .zip from ReleasesManual copy Git submodule | Compatibility What is a Skill? | Contributing Acknowledgments License |
web-video-presentation
Category: Web Video / Presentation Engineering
Best for: turning scripts, articles, lessons, product demos, and talks into click-driven 16:9 web presentations that can be screen-recorded as cinematic videos.
web-video-presentation builds record-ready Vite + React + TypeScript presentations that behave like video production surfaces. The workflow turns raw articles into narration scripts, maps script beats to full-screen scenes, pauses at required checkpoints, and can optionally synthesize narration audio after the visual outline is approved.
Highlights:
(chapter, step) cursor, with one narration beat per visual stepmmx-cli + OpenAI TTS via curl) plus a contract + ready-to-paste snippets for ElevenLabs / edge-tts / Azure / Google Cloud / macOS saySkills for turning URL / PDF / DOCX / Markdown / text / screenshots into beautifully designed, offline-friendly single-file HTML articles via the reacticle component protocol.
Skills for image generation and editing with GPT Image 2 (and OpenAI-compatible image endpoints), with three runtime modes and 70+ structured prompt templates.
Skills for local knowledge-base retrieval and document QA.
Skills for high-quality visual / front-end design work.
npx claudepluginhub conardli/garden-skills --plugin presentation-skillsSkills for high-quality visual / front-end design work.
Create cinematic HTML presentations with AI video backgrounds, deployed to GitHub Pages. Use for: slides, presentation, deck, cinematic slides, video presentation, animated slides, live presentation.
20 AI agent skills for creating stunning presentations with Slidev framework and templates.
Create polished, professional reveal.js presentations with themes, multi-column layouts, callout boxes, code highlighting, animations, speaker notes, and custom styling. Generates HTML + CSS with no build step required.
HyperFrames by HeyGen. Write HTML, render video. Compositions, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for HyperFrames.
End-to-end video production pipeline with design thinking. A 6-phase orchestrator (Discovery → Storytelling → Capture → Design → Production → Audio & Render) that turns your app into a polished promo, showcase, or tutorial video, rendered with HyperFrames (HTML + GSAP). Runs on Claude Code and GitHub Copilot CLI.