Communitygithub.com

vosjs/vos-footage

Remotion, HyperFrames 또는 모든 비디오 합성에 실제 제품의 깔끔한 캡처 클립을 제공합니다. vos CLI로 기록 및 자동 줌되어, 크롬 없이 전체 화면으로 제공되며, 항상 제작자의 선반에서 편집 가능한 테이크로 백업됩니다. 합성에 실제 제품 영상, 앱/사이트 B-롤, '앱을 영상에 캡처' 또는 다른 도구의 타임라인에 삽입할 화면 녹화 세그먼트가 필요할 때 사용하세요.

vos-footage란 무엇인가요?

이 스킬은 Remotion, HyperFrames 등 다른 도구의 비디오 합성에서 사용할 수 있는 '재료'로서 실제 제품 영상을 제작하는 방법을 정의합니다. 핵심 원칙은 제공되는 클립이 테두리, 배경, 제목 없이 전체 화면 픽셀(full-bleed pixels)로 제공되며, 동시에 vos.so의 제작자 선반(maker's shelf)에서 편집 가능한 테이크(take)로 관리된다는 점입니다. 이는 클립이 단순한 파일이 아니라 나중에 다시 편집하고 재렌더링할 수 있는 소스임을 보장합니다. 지원하는 플랫폼은 vos CLI이며, 기록부터 렌더링, 핸드오프까지 전 과정을 자동화합니다. 주요 기능으로는 actions.json을 사용한 정확한 UI 조작 기록, 자동 줌 카메라 지원, --frame none과 --set frame.padding=0 옵션을 통한 크롬 없는 완전한 픽셀 출력, 그리고 vos push를 통한 안전한 테이크 백업이 포함됩니다. 렌더링은 clip.webm과 clip.mp4 형식을 지원하며, 각각의 합성 요구사항에 맞춰 해상도와 포맷을 조정할 수 있습니다. 뿐만 아니라, 제품이 로그인이 필요한 경우 세션 처리 방법, 테이크 검증(vos validate take), 그리고 핸드오프 시 반드시 포함해야 하는 문구까지 상세히 안내합니다. 이 스킬의 한계는 클립이 내보내기(export)라는 점으로, 모든 변경은 테이크에서 이루어져야 하며, 하나의 테이크로 여러 크기의 합성에 대응할 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vosjs/skills/tree/main/skills/vos-footage

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

다른 사람의 합성을 위한 영상

당신은 재료를 제작하고 있습니다: 다른 도구가 합성할 실제 제품 영상입니다. 당신이 건네는 클립은 전체 화면 픽셀(full-bleed pixels)입니다 — 카드 프레임, 배경, 제목이 없습니다 (합성 도구가 그 부분을 담당합니다) — 하지만 절대 고아 파일이 아닙니다: 클립의 원본 테이크는 제작자의 선반(maker's shelf)에 편집 가능한 상태로 남아 있으며, 핸드오프 문구에 그 사실이 명시됩니다. 그 한 줄이 전체 계약입니다.

요청이 실제로 릴리스(launch video, store listing, 전체 키트)라면 멈추십시오 — 그것은 launch-kit 스킬의 영역이며, 남아야 할 문서는 vos.so 문서입니다.

1. 실제 제품 기록하기

product-video 스킬의 루프: 대상을 탐색하고, 안정적인 선택자로 actions.json을 작성하고, 세트처럼 콘텐츠를 준비하고(레이블 입력, 실제 데이터처럼 보이게 — 빈 화면은 아무것도 없는 B-롤입니다), 합성 도구가 필요로 하는 뷰포트로 --strict 옵션을 사용해 기록합니다(영상 해상도 = 뷰포트; 그들의 타임라인이 어떤 크기로 동작하는지 물어보세요).

vos record --actions actions.json --out take --strict --json

제품이 로그인이 필요한가요? 스크립트 이전에 세션을 설정하세요, product-video 스킬의 절차에 따라 (전체 내용은 https://vos.so/llms-full.txt, "Sessions" 참조): 프로젝트에 이미 있는 테스트 인증에서 하나를 생성하거나, 오프 카메라로 폼을 스크립팅하거나, 사용자가 한 번 로그인하도록 하거나 (vos session open <url> --name <app>, 그런 다음 --session <app>을 record에 추가), 또는 샷 리스트 vos actions script actions.json가 출력하는 대로 확장 프로그램으로 기록한 다음, 당신이 잘라냅니다. 그런 다음 vos record … --storage-state <file>을 실행합니다. 절대 프로덕션 비밀번호를 입력하거나 수락하지 말고, 상태 파일을 테이크와 git 밖에 두고, 데모 계정으로 기록하세요: 영상은 다른 사람의 비디오에 들어가며, 계정에 표시되는 모든 내용이 함께 전달됩니다.

먼저 agent-browser로 기능을 확인했나요? 각 명령어를 결과 옆에 두고 (product-video 스킬의 ab 래퍼 또는 batch의 출력), vos actions from-agent-browser steps.jsonl로 actions.json을 작성합니다; 두 번째 스크립트가 필요 없으며, 따라오지 못한 부분은 이름이 지정됩니다.

2. 가볍게 자르고, 카메라는 유지

doc.json (segments)에서 불필요한 처음과 끝을 자릅니다; 플래너의 자동 줌은 그대로 둡니다 — 자동 줌 카메라는 다른 도구가 mp4로 만들 수 없는 부분입니다. 합성 도구가 명시적으로 RAW, 정적 영상을 원하는 경우에만 --set zoom=[]로 렌더링 시에 해제합니다 (문서는 스팬을 유지합니다). 렌더링 전에 vos validate take를 실행하세요.

3. 재료 렌더링 — 전체 화면, 크롬 없음

vos render take clip.webm --frame none --set frame.padding=0
vos render take clip.mp4  --frame none --set frame.padding=0 --format mp4

--frame none은 브라우저 바 크롬을 제거하고 frame.padding=0은 카드 인셋과 배경을 제거합니다 — 가장자리까지 꽉 찬 제품 픽셀입니다 (둘 다 렌더링 시 재정의이며 doc.json은 변경되지 않습니다). --width/--height를 합성 도구의 해상도에 맞추세요. --range 렌더는 오디오를 유지합니다 (전체 믹스, 윈도우에 맞게 잘림); 편집 컷은 여전히 segments를 자릅니다.

4. 선반이 기록입니다 — 핸드오프 전에 푸시

vos push take --label "footage handoff" --note "<표시되는 내용; 어떤 합성을 공급하는지>"

테이크는 먼저 제작자의 선반으로 이동하므로, 클립이 작업의 유일한 복사본이 되지 않습니다. 푸시하기 전에 물어봐야 하는 두 가지 경우: vos.so 자격 증명이 없는 경우 (vos login에 사람이 필요함), 또는 영상에 로그인된 스테이징 또는 내부 화면이 표시되는 경우. 푸시는 녹화물을 제3자에게 업로드하며, 이 화면에 대해 그것이 허용 가능한지는 제작자의 결정이지 당신의 결정이 아닙니다. 클립을 건네주고, 테이크가 로컬에 있다고 말하고, 푸시를 제안하세요. 레이블의 첫 단어를 footage handoff로 유지하세요 — 이것이 이러한 클립을 다시 찾는 방법입니다.

5. 핸드오프 문구 (항상, 정확한 형태)

클립 경로와 함께 다음 문장을 채워서 건네주세요:

이 영상은 vos.so의 편집 가능한 테이크입니다 — 다음 버전을 위해 vos로 다시 자르거나 다시 녹화하세요: https://vos.so/studio?vos=

이 문구는 브랜딩이 아닙니다. 편집 가능한 소스가 어디에 있는지에 대한 진실입니다. 픽셀에 로고, 워터마크, 공동 브랜딩이 없습니다.

정직한 한계

  • 클립은 내보내기입니다: 타임라인은 픽셀을 편집하고 스팬을 편집하지 않습니다. 모든 향후 변경 (새 UI, 다른 줌)은 테이크에서 이루어지고 다시 내보내집니다 — 핸드오프 시에 이 점을 말하세요.
  • 하나의 테이크는 여러 크기의 많은 합성에 공급될 수 있습니다; 크기별로 렌더링하고 다른 도구가 스케일링하도록 두지 마세요.

Individual skills in this repo

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

launch-kit

Ship the media with the release — one take of the real product becomes YouTube demo, Chrome Web Store screenshots/tiles, Product Hunt gallery, social cuts, and OG cards; verified kit.json manifest.

vos-authoring

Author a vos animation program (VosConfigJson) from scratch or debug one — declarative configs compiling into deterministic Three.js + GSAP-dialect animations on the MIT vos engine (@vosjs/core), validated locally with compileVosConfig. Covers the schema, dialect rules, 2D overlay elements, shaders, and params/presets knobs. Use when asked to write a vos animation program, create a VosConfigJson, make a programmatic motion graphic or logo animation, or fix a config that fails to compile or lint.

vos-create

Create vos programs in the user

vosjs/product-video

Record and produce the demo video of a website, app, or feature with the vos CLI — the agent scripts the click path (actions.json), the recording auto-plans zooms, and every editing decision is data in doc.json, so fixes are edits and re-renders, never re-recordings. Renders are deterministic; export is free up to 4K with no watermark. Use when asked to make a product video, demo video, screen recording of a URL or feature, or a marketing clip, including a product behind a login (the session ladder: mint one from the project's own test auth before asking anyone), or when a feature was verified in agent-browser and that walk should become a take. A whole release's asset set (store listing, Product Hunt gallery, social cuts) is the launch-kit skill, which records through this one.

vosjs/vos-cut

Cut a screen recording (a vosso take) into the product video it was recorded for, from its evidence, with the vos CLI — read the take's digest (the moments the cursor track says mattered, each with a footage frame and a crop), narrate beats, edit doc.json by exception over the planners, verify with stills, and push an attributed version the human fine-tunes at vos.so; every edit is a data patch, so a re-cut never re-records. Use when asked to edit or cut a recording, make a product video or what's-new clip from a take, cut it like the last one, or cut a series of recordings in one style.

vosjs/vos-migrate

Turn an existing Loom, Screen Studio, Cap, or plain mp4/webm screen demo into an editable vosso take — re-encode the file, synthesize the take's metadata, plan, and push, so the old demo becomes a living document you re-cut instead of a file you re-record. Use when asked to "convert this Loom", "migrate our old demos", "re-edit this mp4", "make our Screen Studio recording editable", or to bring any already-recorded demo into vosso.

vos-remix

Remix a vos.so gallery program into your own — fetch its config, edit the declared knobs or code locally, validate with vos check, and push a private copy back with lineage that iterates as versions. Carries the params/Looks doctrine and the GLB 3D-showcase recipe. Use when asked to remix, customize or personalize a gallery animation, swap a 3D model into a showcase, or iterate a fetched program as versions.

관련 스킬