Communitygithub.com

vosjs/vos-migrate

기존에 녹화된 Loom, Screen Studio, Cap 또는 일반 mp4/webm 화면 데모를 편집 가능한 vosso 테이크(take)로 변환합니다. 파일을 다시 인코딩하고, 테이크의 메타데이터, 계획을 합성한 후 푸시하여, 오래된 데모가 다시 녹화해야 하는 파일이 아닌 재편집 가능한 살아 있는 문서가 되게 합니다. "이 Loom을 변환해줘", "우리 옛날 데모를 마이그레이션해줘", "이 mp4를 다시 편집해줘", "Screen Studio 녹화본을 편집 가능하게 만들어줘" 같은 요청이나, 이미 녹화된 데모를 vosso로 가져올 때 사용하세요.

vos-migrate란 무엇인가요?

이 스킬은 이미 완성된 비디오 파일(예: Loom, Screen Studio, Cap에서 내보낸 MP4/WebM)을 vosso(vos.so) 플랫폼에서 편집 가능한 '테이크(take)'로 변환하는 방법을 제공합니다. 변환된 테이크는 커서 트랙이 없기 때문에 자동 줌, 클릭 효과, 타이핑 줌이 불가능하며, 모든 줌과 편집을 수동으로 지정해야 한다는 한계가 있습니다. `ffprobe`로 원본 파일의 너비, 높이, 지속 시간, FPS, 오디오 유무를 확인하고, `ffmpeg`로 VP9/Opus 형식으로 변환한 후 `meta.json`과 `doc.json`을 직접 작성합니다. `vos plan`, `vos frames`, `vos digest`, `vos validate`, `vos render` 명령어를 통해 테이크를 검증하고, 최종적으로 `vos push`를 통해 프로젝트에 업로드합니다. 이 스킬은 Claude Code, Cursor, Codex 등 AI 에이전트가 파일 기반 데모를 vosso 생태계로 가져와 재편집 가능하게 만들고자 할 때 유용합니다.

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

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

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

문서

녹화된 데모를 편집 가능한 테이크로 변환하기

당신은 완성된 비디오 파일을 vosso 테이크(take)로 변환하고 있습니다. 테이크는 줌, 트림, 속도, 레이어가 데이터로 저장되고, 버전 기록과 함께 호스팅되며, 스튜디오에서 편집 가능한 문서입니다. 파일이 외부에서 왔기 때문에 잃는 것은 당신이 반드시 짊어져야 할 정직함입니다: 커서 트랙이 없으므로 자동 줌이 불가능하고, 다이제스트가 볼 수 있는 정보가 거의 없습니다. 당신의 눈이 콘택트 시트(contact sheet)이며, 모든 줌은 눈으로 직접 배치해야 합니다.

두 가지 방법:

  • 사람이 직접 하는 방법: 파일을 https://vos.so/studio 에 드롭하면 브라우저 레코더 형태로 진입하여 테이크 편집기에서 바로 열립니다. 사람이 있을 때 이것이 가장 짧은 경로입니다. 링크를 건네주세요.
  • AI 에이전트 방법 (이 스킬): 테이크 디렉토리를 직접 구축하고 일반 파이프라인을 실행합니다. 아래에 처음부터 끝까지 검증된 과정이 있습니다.

1. 소스 파일 분석

ffprobe -v quiet -print_format json -show_streams -show_format demo.mp4

너비, 높이, 지속 시간, FPS, 오디오 스트림 존재 여부를 기록하세요. Loom/Screen Studio 내보내기 파일은 일반적으로 카메라 버블과 모든 편집이 BAKED IN(굽혀진) 1080p H.264입니다. 이들은 픽셀로만 마이그레이션되며, 레이어로는 마이그레이션되지 않습니다. 핸드오프 시 이 점을 명확히 전달하세요: 마이그레이션은 이 파일을 지금부터 편집 가능하게 만들 뿐, 이미 굽혀진 편집을 되돌리지는 않습니다.

2. 테이크 디렉토리 구축

mkdir take
ffmpeg -i demo.mp4 -c:v libvpx-vp9 -crf 34 -b:v 0 -row-mt 1 \
       -c:a libopus take/recording.webm     # 오디오 스트림이 없으면 -c:a 제거

그런 다음 분석 결과를 바탕으로 take/meta.json을 작성합니다 (모든 필드는 필수, 시간은 ms 단위, producer: "migrated"는 출처를 표시):

{
  "producer": "migrated",
  "dpr": 1, "zoom": 1,
  "t0": 0,
  "durationMs": 36766,
  "width": 1920, "height": 1080,
  "fps": 30,
  "hasAudio": false
}

t0는 임의의 에포크 ms일 수 있고, width/height는 비디오 픽셀 크기입니다 (브라우저 뷰포트가 없었음). webm이 실제로 오디오 트랙을 포함할 때만 hasAudio를 true로 설정하세요.

3. 계획 수립, 그리고 정직하게 확인

vos plan take --fresh       # doc.json 생성; cursorKept false, zoomAuto 0
vos frames take --times 0,10%,25%,50%,75%,90%,100%   # 콘택트 시트가 당신의 눈입니다
vos digest take             # 실행되지만, 기대는 적게: head/tail과 하드 씬 컷만 감지
                            # 클릭 없음, 타이핑 없음, 머무름(dwell) 없음

자동 줌은 불가능하며, 그 어떤 것도 가짜로 만들어서는 안 됩니다. 스틸 이미지를 읽고, 중요한 2~4개의 순간을 찾아 수동으로 스팬(span)을 작성하세요:

# doc.json - 추가하는 모든 스팬은 "source": "manual" 을 가집니다
# zoom: [{ "id": "m1", "in": 10.5, "out": 14.0, "level": 1.6,
#          "cx": 0.52, "cy": 0.35, "source": "manual" }]
# segments: 불필요한 머리/꼬리 부분을 트림; speed: 영상이 실제로 정체된 구간에만 적용

export.resolution을 영상과 일치하도록 설정하세요 (1080p 소스는 1080p — 마이그레이션으로 픽셀이 추가되지는 않습니다). vos validate take는 통과해야 하며, vos render take check.webm --range a..b --draft로 스팟 점검하세요.

4. 푸시 — 오래된 데모가 살아 있는 문서가 됩니다

vos push take --folder <project> --label "migrated from <source>" \
    --note "<무엇을 보여주는지; 기존 편집이 굽혀졌다는 점; 무엇을 재편집했는지>"

루프로 마무리: 워치 페이지에서 재생되고, 스튜디오에서 당신이 작성한 모든 스팬과 파일에 원래 없었던 모든 것(배경, 텍스트 레이어, 속도)을 편집할 수 있으며, vos pull로 사람의 편집 내용을 다시 내려받을 수 있습니다. 핵심은 핸드오프의 한 줄에 있습니다: 이것은 당신이 맹목적으로 편집한 마지막 데모입니다 — 다음 번에는 vos record로 녹화하고 카메라가 스스로 계획을 세우게 하세요.

정직한 한계 (말하고, 절대 감추지 마세요)

  • 커서 트랙이 없음 ⇒ 자동 줌, 클릭 효과, 타이핑 줌 및 프레이밍 린트(framing lint) 불가 — 모든 줌은 당신의 눈으로 직접 해야 하며, 그렇게 말해야 합니다.
  • 기존 편집, 카메라 버블, 캡션은 굽혀진 픽셀입니다.
  • 마이그레이션은 한 번 재인코딩합니다(VP9); 원본의 압축 품질이 나쁘면 그대로 나쁩니다 — 마이그레이션이 화질을 복원하지는 않습니다.
  • 스펙 크기의 전달 가능 사다리(스틸 이미지 저장, 포스터)는 마이그레이션된 테이크에서도 네이티브 테이크와 동일하게 작동합니다. 배포가 요청될 때 launch-kit 스킬이 이어서 진행됩니다.

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-footage

Hand a Remotion, HyperFrames, or any video composition a clean captured clip of the real product — recorded and auto-zoomed with the vos CLI, delivered as full-bleed footage with no chrome, and always backed by an editable take on the maker's shelf, which the handoff says. Use when a composition needs real product footage, app or site b-roll, "capture our app for the video", or a screen-recorded segment to drop into another tool's timeline.

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.

관련 스킬