Demo Video

Name: demo-video
Author: hub-ki

Turn an app or a public website into a finished, designed demo or guide video — product demos, feature walkthroughs, how-to guides, onboarding clips, site tours. Two sources: it can DRIVE AND RECORD a web page with Playwright (preferred — chrome-free, 2x, re-runnable), or take a screen recording (.mov/.mp4) you hand it. Covers the pipeline end to end: brand, capture or ingest, cut and crop, compose in a floating-window design system (spotlights, freeze-frames, caption cards), narrate with ElevenLabs, verify against the source pixels, render 1080p then 4K. Use this WHENEVER someone wants a poli...

★ 6 Synced 1 hour ago View SKILL.md

At a glance

Design Manual install

This skill is for Design and helps you create a product demo video, make a feature walkthrough video, and produce a how-to guide video.

Install

git clone --depth 1 https://github.com/hub-ki/video-generation
cp -r video-generation/skills/demo-video ~/.claude/skills/demo-video

Can use Not declared by the author

Good for Plan a product demo video Make a feature walkthrough video Produce a how-to guide video Generate an onboarding video Record a website tour video Build a screen recording with narration

Video Production playwright Screen Recording Narration Product Demo tutorial

Also in hub-ki/video-generation

View the repo

Video Plan Presentations

Write the concept for a demo, guide, walkthrough or site-tour video of an app or any public website — the two documents that get approved BE...

Other Design skills

Frontend Design anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typog...

Algorithmic Art anthropics/skills

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art...

Prototype mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right,...

Design An Interface mattpocock/skills

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explor...

Wireframe Sketch nexu-io/open-design

A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations...

Wireframe Annotated nexu-io/open-design

An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid wi...