Demo Video
Produce a polished, ScreenStudio-style 60fps product demo video of a web app with a tiny, dependency-light pipeline — Playwright frame capture + a multiprocess Pillow compositor streaming into ffmpeg (no Node/Remotion). Drives the app one step per frame so playback is true 60fps regardless of capture speed, then renders a gradient background, a rounded window with a soft shadow, a crisp vector cursor, click pulses, keyboard-shortcut keycaps, and a cinematic push-in that scales the whole window and eases out at the end; HD=1 re-renders the same capture at retina resolution. Also ingests hand-dr
Install
npx skills add surajshetty3416/demo-video-skill --skill demo-videogit clone --depth 1 https://github.com/surajshetty3416/demo-video-skill.git /tmp/demo-video-skill
mkdir -p ~/.claude/skills
cp -r /tmp/demo-video-skill/. ~/.claude/skills/demo-videoPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# Demo video (deterministic frames → Pillow compositor → ffmpeg)
A lightweight, reproducible way to make a **crisp 60fps ScreenStudio-style** demo of a
web app. Two stages, all code, only Python + Pillow + ffmpeg:
```
capture_template.py → frames/f*.jpg + meta.json (Playwright: 1 step per frame + camera/mouse timeline)
│
compositor.py → demo.mp4 (multiprocess Pillow render — bg + rounded window +
shadow, vector cursor, click pulses, shortcut
keycaps, whole-window zoom/pan — streamed straight
into ffmpeg; 60fps H.264, bt709)
```
The compositor renders with a worker pool and pipes frames directly into one ffmpeg
process (no intermediate PNGs, no second pass). Default output is the classic panel
size; `HD=1 python compositor.py …` re-renders the SAME capture at retina resolution
(uses all pixels of a DSF=2 capture) when a crisper deliverable is worth ~3x the
composite time.
## Step 0: ask the user for the inputs — don't go discover them
The capture needs facts only the user reliably knows. Hunting for them (grepping configs
for dev-server URLs, guessing test credentials, probing routes) burns time and tokens and
often lands on the wrong instance. Before writing any code, ask for whatever is missing
from this list, in ONE batch:Details
- Skill name
demo-video- Repository
- surajshetty3416/demo-video-skill
- License
- MIT
- Repo updated
- 21 August 2026
FAQ
What does the Demo Video skill do?
Produce a polished, ScreenStudio-style 60fps product demo video of a web app with a tiny, dependency-light pipeline — Playwright frame capture + a multiprocess Pillow compositor streaming into ffmpeg (no Node/Remotion). Drives the app one step per frame so playback is true 60fps regardless of capture speed, then renders a gradient background, a rounded window with a soft shadow, a crisp vector cursor, click pulses, keyboard-shortcut keycaps, and a cinematic push-in that scales the whole window and eases out at the end; HD=1 re-renders the same capture at retina resolution. Also ingests hand-dr
How do I install the Demo Video skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add surajshetty3416/demo-video-skill --skill demo-video. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Demo Video popular?
It lives in surajshetty3416/demo-video-skill, which has 5 GitHub stars and 0 forks.
Related skills
Drawing Review Cn
5Wonggeff/drawing-review-cn
中国建筑工程施工图图纸会审（图纸自审）专家技能。用于对一整套施工图（建筑/结构/给排水/电气/ 暖通/智能化/室内装修/景观园林/海绵/基坑支护/亮化等专业）开展系统性自审，产出可直接上会签认的 图纸会审问题清单与记录表。 适用场景： (1) 用户说“帮我做图纸会审”“图纸自审”“审图”“挑图纸问题”“出问题清单”“会审记录” (2) 一次性给出一个装满施工图的文件夹（PDF/DWG），要求找出各专业图纸问题 (3) 要求列出“哪个专业、哪张图纸、哪个部位、什么问题、怎么解决”并做跨专业比较 (4) 需要生成图纸会审记录表（Word/Excel，含设计回复/处理结果/闭环状态列） (5) 需要核查图纸集完整性：图纸目录、图号体系、版本冲突、签章有效性 (6) 仿古建筑 / 木结构 / 文旅 / 文物遗址类项目的专项会审
Construction Video Prompt Engineering
5XuJinghao221/construction-video-prompt-skill
Generate copy-ready English and Chinese positive/negative prompts for engineering video clips after identifying the clip type and requested output frame size. First/last frame files are optional and are normally supplied later to the video model; use this skill for construction actions, viewpoint transitions, static showcases, stage boundaries, object continuity, camera stability, action direction, and repair of observed failures. Do not use for generic cinematic prompts, frame creation, video generation, or full video editing.
Grok Video Editing
5AlizayAyesha/grok-video-editing-skill
Record a product demo on a Linux desktop, cut it into feature clips, and render an on-brand 1080p motion-graphics promo video entirely with code (ffmpeg + HTML Canvas + headless Chromium via Playwright + a procedural audio mix). Use when asked to make a product demo, launch video, or social promo themed to a website's colors and fonts.
Cherina Pod
5realchendahuang/cherina-pod
Turn any podcast episode into a listening-practice lesson for language learners — an offline player page (line-by-line playback, loop, blind listening, word-by-word highlight), a printable bilingual handout, and key-phrase notes. Default is English audio with Chinese translation; Chinese audio with English translation also works. Use when the user wants to practise listening with a podcast, e.g. "把这期播客做成精听课", "用播客练听力", "做一份听力讲义", "播客精听", "make a listening lesson from this podcast".
Hyper3d Documentary
5xiaohuailabs/hyper3d-documentary
用 Hyper3D（Rodin Gen-2.5）把一个科普题材做成可分享的单文件网页 3D 纪录片：需求问答 → 写脚本 → 生参考图 → 生成 3D 模型 → 模型库审核 → 动画成片，外加一个项目总览管理页。
Bulkcut Coach
5Juggernaut0825/bulkcut-coach
Fitness and diet tracking tool. Use when the user wants to analyze food photos for calories, log workouts, calculate metabolism (BMR/TDEE), get daily calorie summaries, or generate training/diet plans. Invoked with /bulkcut-coach.
Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.