Agent skill

Web Demo Video

화면 녹화 도구 없이 웹사이트/웹앱의 짧은 제품 데모·소개 영상(SNS용 1:1, 9:16, 16:9)을 만들 때 사용.

Install Web Demo Video

skills CLI

$ npx skills add bam-bam-2/solo-skills --skill web-demo-video -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install bam-bam-2/solo-skills web-demo-video --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/bam-bam-2/solo-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/web-demo-video .claude/skills/web-demo-video && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "web-demo-video" agent skill from https://github.com/bam-bam-2/solo-skills/tree/main/skills/web-demo-video into .claude/skills/web-demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-demo-video", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/bam-bam-2/solo-skills/tree/main/skills/web-demo-video

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add bam-bam-2/solo-skills --skill web-demo-video -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install bam-bam-2/solo-skills web-demo-video --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/bam-bam-2/solo-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/web-demo-video .agents/skills/web-demo-video && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "web-demo-video" agent skill from https://github.com/bam-bam-2/solo-skills/tree/main/skills/web-demo-video into .agents/skills/web-demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-demo-video", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add bam-bam-2/solo-skills --skill web-demo-video -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install bam-bam-2/solo-skills web-demo-video --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/bam-bam-2/solo-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/web-demo-video .cursor/skills/web-demo-video && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "web-demo-video" agent skill from https://github.com/bam-bam-2/solo-skills/tree/main/skills/web-demo-video into .cursor/skills/web-demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-demo-video", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/bam-bam-2/solo-skills.git --path skills/web-demo-video

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add bam-bam-2/solo-skills --skill web-demo-video -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install bam-bam-2/solo-skills web-demo-video --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/bam-bam-2/solo-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/web-demo-video .gemini/skills/web-demo-video && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "web-demo-video" agent skill from https://github.com/bam-bam-2/solo-skills/tree/main/skills/web-demo-video into .gemini/skills/web-demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-demo-video", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install bam-bam-2/solo-skills web-demo-video

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add bam-bam-2/solo-skills --skill web-demo-video -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/bam-bam-2/solo-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/web-demo-video .github/skills/web-demo-video && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "web-demo-video" agent skill from https://github.com/bam-bam-2/solo-skills/tree/main/skills/web-demo-video into .github/skills/web-demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-demo-video", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add bam-bam-2/solo-skills --skill web-demo-video -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install bam-bam-2/solo-skills web-demo-video --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/bam-bam-2/solo-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/web-demo-video .opencode/skills/web-demo-video && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "web-demo-video" agent skill from https://github.com/bam-bam-2/solo-skills/tree/main/skills/web-demo-video into .opencode/skills/web-demo-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-demo-video", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: web-demo-video
GitHub stars: 367
Token cost: ~1.3k tokens
SKILL.md length: 728 words
Files: 3 (incl. assets)
Skills in repo: 38
Repo updated: Sep 14, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

화면 녹화 도구 없이 웹사이트/웹앱의 짧은 제품 데모·소개 영상(SNS용 1:1, 9:16, 16:9)을 만들 때 사용.

Works in 6 steps: 로컬 서버로 대상 사이트를 띄운다 → 무대 페이지를 만든다 → 타임라인을 결정론적으로 짠다 → …
Tasks that involve Video production
SKILL.md covers 먼저 물어볼 것, 절차, 주의 and 부록 · 블로그 본문용 GIF (브라우저 목업 없이)
Calls python3 and ffmpeg

What it does

Web Demo Video is an agent skill from bam-bam-2/solo-skills. 화면 녹화 도구 없이 웹사이트/웹앱의 짧은 제품 데모·소개 영상(SNS용 1:1, 9:16, 16:9)을 만들 때 사용. 실제 사이트를 iframe에 띄워 진짜 마우스 이벤트로 조작하면서 프레임을 캡처하고 ffmpeg로 합성한다.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including assets.

It sits in Media & Creative, covering Video production. It works with FFmpeg. The repository describes itself as: 1인 사업가 생산성 키트 — 직원 없이 58개를 자동화했고, 그중 바로 쓸 수 있는 AI 에이전트 스킬 38개(+실행 스크립트 19개)를 공개합니다. The licence is MIT.

When your agent uses it

Tasks that involve Video production

Example prompts

“/web-demo-video”

Requirements

Python 3

Workflow steps

6 steps, taken from the step headings in SKILL.md.

로컬 서버로 대상 사이트를 띄운다
무대 페이지를 만든다
타임라인을 결정론적으로 짠다
프레임을 캡처한다
ffmpeg로 합성한다
뒷정리

What it can do on your machine

Read from SKILL.md and the folder at commit 0712439. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- python3
- ffmpeg
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Web Demo Video loads about 1.3k tokens when it runs. Until then it costs about 36 tokens; SKILL.md has 728 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~36
When it runs · the whole SKILL.md, loaded when a task matches: ~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from bam-bam-2/solo-skills at commit 0712439, republished under its MIT licence (© bam-bam-2). 728 words, ~1,271 tokens.

Download SKILL.mdSave it as .claude/skills/web-demo-video/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.

name: web-demo-video
description: 화면 녹화 도구 없이 웹사이트/웹앱의 짧은 제품 데모·소개 영상(SNS용 1:1, 9:16, 16:9)을 만들 때 사용. 실제 사이트를 iframe에 띄워 진짜 마우스 이벤트로 조작하면서 프레임을 캡처하고 ffmpeg로 합성한다.

웹 데모 영상 만들기

밤밤의 웹 프로젝트(모자이크, 겟백앱, 카공메이트 등) 소개 영상을 만들 때 쓰는 절차. 목업 이미지를 이어붙이는 게 아니라 실제 사이트를 실제로 조작한 화면을 찍는 게 핵심이다.

먼저 물어볼 것

영상은 어디 쓰느냐로 비율·길이가 갈린다. 만들기 전에 반드시 확인한다.

용도	비율	길이
스레드·릴스·쇼츠	9:16 (1080x1920)	15~25초
블로그·유튜브 임베드·랜딩	16:9 (1920x1080)	30~40초
인스타 피드·카톡 공유	1:1 (1080x1080)	~20초

밤밤은 시각 산출물의 형식에 구체적인 기대가 있다. 레퍼런스가 있으면 먼저 달라고 한다.

절차

1. 로컬 서버로 대상 사이트를 띄운다

bash

cd <프로젝트> && python3 -m http.server 8899

무대(stage) 페이지와 대상 사이트는 반드시 같은 오리진이어야 한다. 포트가 다르면 iframe.contentDocument 접근이 막혀서 조작이 불가능하다. → 무대 파일을 프로젝트 폴더 안에 임시로 두고, 작업이 끝나면 반드시 빼낸다(안 그러면 다음 배포에 딸려 올라간다).

2. 무대 페이지를 만든다

assets/stage-template.html를 복사해서 고친다. 구조:

#stage — 출력 비율 그대로의 고정 크기 div (1:1이면 540x540, dpr 2로 캡처하면 1080x1080)
#cap / #foot — 큰 자막(상단) / 보조 문구(하단)
#win — 맥 브라우저 창 목업(신호등 3개 + URL) 안에 <iframe>을 transform: scale()로 축소해 넣음
#cursor — 가짜 마우스 커서 SVG. 이게 있어야 조작 영상처럼 보인다
#ring — 클릭·브러시 크기를 보여주는 하이라이트 원
#end — 엔딩 카드(제품명 / 한줄 설명 / 셀링포인트 3개 / URL)
window.__tick(frameIndex) — 프레임 번호 하나를 받아 그 시점의 화면 상태를 만드는 결정론적 함수

3. 타임라인을 결정론적으로 짠다

__tick(frame) 안에서 t = frame / FPS로 시간을 계산하고, 모든 상태를 t로부터 다시 계산한다. 실시간 setTimeout을 쓰면 캡처 속도와 어긋나서 망가진다.

1회성 동작(이미지 로드, 모드 전환)은 once(key, fn) 으로 중복 실행을 막는다
드래그는 drag(t, 시작초, 끝초, ptFn) — 시작 프레임에 mousedown, 매 프레임 mousemove, 끝나면 mouseup
이벤트는 iframe의 W.MouseEvent로 만들어 clientX/clientY(iframe 기준 좌표)로 dispatch한다. mousedown은 대상 요소에, mousemove/mouseup은 보통 window에 붙어 있으니 확인하고 각각 맞는 타깃에 쏜다
좌표는 하드코딩하지 말고 요소의 getBoundingClientRect() 또는 그려넣은 목업의 rect 비율로 계산한다. 창 크기를 바꿔도 안 깨진다
iframe 안에서 영상에 불필요한 요소(헤더, SEO 본문, 푸터, 광고 배너, 상태줄)는 iframe load 시점에 <style> 주입으로 숨긴다

4. 프레임을 캡처한다

for (let i = from; i <= to; i++) {
  await page.evaluate(f => __tick(f), i);
  const buf = await page.screenshot({ clip: { x:0, y:0, width:540, height:540 } });
  await fs.writeFile(`${DIR}/f${String(i).padStart(4,'0')}.png`, buf);
}

clip은 CSS 픽셀 단위다. devicePixelRatio를 곱하면 안 된다. dpr 2면 540 클립이 1080px 이미지로 나온다
프레임 한 장에 약 0.09초. 400장이면 40초 → REPL 120초 제한 때문에 100~150장씩 나눠 호출한다
캡처 시작 전에 페이지를 새로 로드해 상태를 초기화하고, __tick(0) 후 이미지 로드가 끝날 시간을 준다

5. ffmpeg로 합성한다

ffmpeg는 PATH에 없다. export PATH="$PATH:/opt/homebrew/bin" 를 붙인다.

bash

ffmpeg -y -framerate 20 -i frames/f%04d.png \
  -vf "scale=1080:1080:flags=lanczos,fps=30" \
  -c:v libx264 -profile:v high -pix_fmt yuv420p -crf 20 -movflags +faststart out.mp4

-pix_fmt yuv420p는 SNS 호환 필수
채팅에 붙여 보여줄 미리보기 GIF는 palettegen/paletteuse 2패스로: fps=10,scale=420:-1:flags=lanczos,palettegen=stats_mode=diff → paletteuse=dither=bayer:bayer_scale=3
콘티 확인용 컨택트시트: select='eq(n\,20)+...',scale=340:340,tile=3x3

6. 뒷정리

무대 파일을 프로젝트 폴더 밖으로 옮긴다 (배포에 섞이면 안 됨)
로컬 서버 종료: lsof -ti:8899 | xargs kill -9
캡처 탭 닫기

주의

영상에 쓰는 예시 데이터(대화 내용, 이름, 계좌번호, 전화번호, 주소)는 전부 지어낸 가짜로 만들고, 보고할 때 가짜라고 명시한다. 밤밤의 실제 개인정보(전세금 등)나 제3자 정보는 절대 넣지 않는다
무음이 기본. 음악이 필요하면 밤밤에게 확인받는다
완성본은 세션 artifacts에 두되, 다시 뽑을 수 있도록 무대 파일을 영구 경로에 보관한다

Show full SKILL.md (323 more words)Show less

부록 · 블로그 본문용 GIF (브라우저 목업 없이)

SNS 영상과 목적이 다르다. 블로그 독자는 **"이 도구가 뭘 하는지"**를 3초 안에 봐야 하므로, 맥 브라우저 창 목업·엔딩 카드 없이 작업 대상만 크게 보여주는 편이 낫다. 무대(stage) 페이지도 로컬 서버도 필요 없다. 배포된 사이트를 직접 조작하고 캔버스를 그대로 뜬다.

절차

배포 사이트를 열고 예시 이미지를 붙여넣기 이벤트로 주입한다(파일 선택 UI를 거치지 않아도 된다).

await page.evaluate(async (b64) => {
  const blob = await (await fetch('data:image/png;base64,'+b64)).blob();
  const dt = new DataTransfer(); dt.items.add(new File([blob],'s.png',{type:'image/png'}));
  document.dispatchEvent(new ClipboardEvent('paste',{clipboardData:dt,bubbles:true}));
}, b64);

영상에 불필요한 요소는 캡처 전에 숨긴다 (adInCanvas 같은 광고 영역).
좌표는 반드시 픽셀로 탐지한다. 눈대중 금지. 이번에 눈대중으로 잡았다가 펜·채우기가 엉뚱한 데 찍혀서 세 번 다시 찍었다. 캔버스 픽셀을 직접 훑어 대상 글자의 bbox를 구한다.
js
```
const bbox = (x0,x1,y0,y1) => { /* 어두운 픽셀(r,g,b<110)의 min/max */ };
```
노란 말풍선 같은 색 블록은 해당 색 범위로 같은 방식으로 찾는다.
프레임은 캔버스를 새 캔버스에 다시 그려서 만든다. page.screenshot({clip})은 스크롤/DPR 때문에 좌표가 어긋나기 쉽다. 자막·커서·선택 박스·브러시 원도 이 합성 단계에서 그려 넣는다.
- 상단에 라벨 띠(무슨 모드를 쓰는지)를 넣으면 GIF 하나로 기능 여러 개를 설명할 수 있다
- 드래그 중에는 파란 점선 선택 박스를, 펜 모드에서는 브러시 크기 원을 그린다
실제 마우스 이벤트로 조작하면서 매 스텝 프레임을 저장한다. 동작 전후로 정지 프레임 6~8장을 넣어야 눈이 따라간다.
ffmpeg 2패스로 GIF 합성 (본문용은 폭 620~640px, 12fps, 70KB 안팎이면 충분).

효과 선택 주의

단색 영역에 블러를 걸면 화면상 아무 변화가 없다. 평면 아바타를 블러 처리하는 컷을 넣었다가 차이가 안 보여서 뺐다. 블러는 디테일이 있는 대상에만 쓴다.
펜은 모자이크보다 블러가 깔끔하다. 펜+모자이크는 블록이 흩뿌려진 것처럼 지저분하게 나온다.
가리기 결과를 보여줄 땐 가린 영역 위로 원본이 삐져나오지 않았는지 마지막 프레임에서 확인한다. 살짝 비치면 여백을 더 줘서 한 번 더 덮고 뒤쪽 정지 프레임만 다시 찍으면 된다.

어디에 쓰나

네이버 블로그: 사진 업로드와 동일하게 사진 버튼 → 파일 선택으로 올린다 (GIF도 그대로 애니메이션된다)
티스토리: 첨부 → 사진. 업로드하면 [##_Image|...|_##] 문법이 본문에 들어가므로, 그걸 읽어서 전체 HTML을 조립한 뒤 setContent() 하면 이미지 위치를 원하는 곳에 둘 수 있다
사이트 자체: <figure> + loading="lazy" + 캡션에 "예시 데이터는 전부 가짜"를 명시

Files

SKILL.md and 2 other files (assets) in skills/web-demo-video of bam-bam-2/solo-skills.

SKILL.md
assets/stage-16x9-quick-mosaic.html
assets/stage-template.html

Open the folder on GitHubat commit 0712439

Compare with similar skills

Web Demo Video next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Web Demo Video compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Web Demo Video this skillbam-bam-2/solo-skills	367	—	~1.3k	Automated safety check: Pass	MIT	27 days ago
Video Understandcalesthio/OpenMontage	66k	—	~841	Automated safety check: Pass	AGPL-3.0	8 days ago
HyperFrames Video Entry Pointheygen-com/hyperframes	60k	3 repos	~5.2k	Automated safety check: Pass	Apache-2.0	today
Video Shotseternityspring/reelbench-skills	878	1 repos	~1.8k	Automated safety check: Notes	Apache-2.0	2 days ago
Mobile Demo Film Editorsuperset-sh/superset	15k	—	~1.8k	Automated safety check: Pass	Custom licence	today
Video Editcalesthio/OpenMontage	66k	—	~855	Automated safety check: Notes	AGPL-3.0	8 days ago

Similar skills

Video Understand
calesthio/OpenMontage
Understand video content locally using ffmpeg frame extraction and Whisper transcription.
66k GitHub stars~841 tokensUpdated 8 days ago
Media & CreativeAuto-check passed
HyperFrames Video Entry Point
heygen-com/hyperframes
Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.
60k GitHub starsUsed in 3 repos~5.2k tokens
Media & CreativeAuto-check passed
Video Shots
eternityspring/reelbench-skills
拉片：把一条成片拆成逐镜头的分析表——每个镜头的时长、景别、类别、运镜、画面. An agent skill from eternityspring/reelbench-skills.
878 GitHub starsUsed in 1 repo~1.8k tokens
Media & CreativeAuto-check: notes
Mobile Demo Film Editor
superset-sh/superset
Edits real mobile screen recordings into a configurable demo video with phone framing, title cards, cutaways and an end card, using a bundled renderer.
15k GitHub stars~1.8k tokensUpdated today
Media & CreativeAuto-check passed
Video Edit
calesthio/OpenMontage
Edit videos locally using ffmpeg. An agent skill from calesthio/OpenMontage.
66k GitHub stars~855 tokensUpdated 8 days ago
Media & CreativeAuto-check: notes
Lemo-Opuscar Short Film Director
lemomo-ai/lemo-opuscar
Directs a short film made entirely in code in one of the Lemo-Opuscar library's named visual styles, from fetching the library through production and delivery.
1.8k GitHub stars~596 tokensUpdated yesterday
Media & CreativeAuto-check passed

Questions about Web Demo Video

What does Web Demo Video do?

화면 녹화 도구 없이 웹사이트/웹앱의 짧은 제품 데모·소개 영상(SNS용 1:1, 9:16, 16:9)을 만들 때 사용. Web Demo Video is an agent skill from bam-bam-2/solo-skills. 화면 녹화 도구 없이 웹사이트/웹앱의 짧은 제품 데모·소개 영상(SNS용 1:1, 9:16, 16:9)을 만들 때 사용.

When should I use Web Demo Video?

Web Demo Video fits situations like: tasks that involve Video production.

How do I install Web Demo Video in Claude Code?

Run `npx skills add bam-bam-2/solo-skills --skill web-demo-video -a claude-code`. Or copy the skill folder (skills/web-demo-video in bam-bam-2/solo-skills) into .claude/skills/web-demo-video in your project. Claude Code loads it when a task matches its description.

How do I install Web Demo Video in Codex?

Run `npx skills add bam-bam-2/solo-skills --skill web-demo-video -a codex`. Or copy the skill folder (skills/web-demo-video in bam-bam-2/solo-skills) into .agents/skills/web-demo-video in your project. Codex loads it when a task matches its description.

Can I use Web Demo Video in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add bam-bam-2/solo-skills --skill web-demo-video -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/web-demo-video, .gemini/skills/web-demo-video, .github/skills/web-demo-video and .opencode/skills/web-demo-video in your project.

What does Web Demo Video need to run?

Going by SKILL.md and its folder, Web Demo Video needs the command-line tools its instructions call (python3 and ffmpeg). Our summary lists: Python 3.

Does Web Demo Video access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Web Demo Video safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Web Demo Video use?

Web Demo Video is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Web Demo Video use?

About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Web Demo Video?

Skills that share tags, products or a category with Web Demo Video: Video Understand (calesthio/OpenMontage, 66k stars), HyperFrames Video Entry Point (heygen-com/hyperframes, 60k stars), Video Shots (eternityspring/reelbench-skills, 878 stars) and Mobile Demo Film Editor (superset-sh/superset, 15k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Web Demo Video?

bam-bam-2 (a GitHub user) maintains it in bam-bam-2/solo-skills, which has 367 GitHub stars. The repository holds 38 skills in this directory. The repository was last updated on September 14, 2026.

Source: bam-bam-2/solo-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Web Demo Video

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

웹 데모 영상 만들기

먼저 물어볼 것

절차

1. 로컬 서버로 대상 사이트를 띄운다

2. 무대 페이지를 만든다

3. 타임라인을 결정론적으로 짠다

4. 프레임을 캡처한다

5. ffmpeg로 합성한다

6. 뒷정리

주의

부록 · 블로그 본문용 GIF (브라우저 목업 없이)

절차

효과 선택 주의

어디에 쓰나

Files

Compare with similar skills

Similar skills

More from bam-bam-2/solo-skills

Related

Questions about Web Demo Video