Communitygithub.com

vos-remix

vos.so 갤러리 프로그램을 리믹스하여 나만의 것으로 만듭니다. config를 가져와 로컬에서 편집하고, vos check로 검증한 후, 개인 복사본을 푸시하여 버전별로 이력을 관리합니다. params/Looks 교리와 GLB 3D 쇼케이스 레시피를 포함합니다. 갤러리 애니메이션 리믹스, 3D 모델 교체, 가져온 프로그램을 버전별로 반복할 때 사용하세요.

vos-remix란 무엇인가요?

vos-remix는 vos.so 갤러리의 모든 동영상이 '프로그램'이라는 점을 활용하여, 사용자가 해당 프로그램을 리믹스(수정 및 개인화)할 수 있도록 돕는 AI 에이전트 스킬입니다. 갤러리에서 프로그램 config를 가져와 로컬에서 JSON을 편집하고, vos check 명령어로 유효성을 검증한 후 사용자 계정에 개인 vos로 푸시합니다. 이 과정에서 원본 프로그램과의 이력(linage)이 보존되어 버전 관리가 가능합니다. Claude Code, Cursor, Codex 등 모든 AI 코딩 에이전트에서 사용할 수 있으며, @vosjs/cli 패키지를 통해 CLI 기반으로 작동합니다. 또한 API 키가 없는 경우에도 클레임 가능한 푸시(claimable push)를 지원하여 72시간 동안 유효한 링크를 통해 사용자가 vos를 클레임할 수 있습니다. 주요 기능으로는 params(조절 가능한 노브)와 Looks(사전 설정)를 선언하여 컨트롤 표면을 정의하고, 3D 모델(GLB) 교체를 위한 레시피를 제공합니다. 비공개 vos만 생성 가능하며, 서버 렌더링 제약 조건(예: DoubleSide 미사용)을 준수해야 합니다.

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

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

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

문서

vos 프로그램 리믹스

vos.so/gallery의 모든 동영상은 프로그램입니다: 입력값 + 결정론적 함수 → 동영상. 리믹스는 해당 프로그램의 JSON config를 편집하고 결과를 사용자 계정의 비공개 vos로 이력과 함께 푸시하는 것입니다. 로컬에서 편집하고 플랫폼에서 검증, 컴파일 및 미리보기를 렌더링합니다.

설정

npm i -D @vosjs/cli   # 가져오기/확인/푸시/가져오기 루프

이 루프에는 브라우저가 필요하지 않습니다(미리보기 렌더링은 플랫폼에서 발생). CLI를 사용할 수 없는 경우 일반 HTTP로도 모든 작업이 가능합니다: references/remix-contract.md에 모든 엔드포인트가 문서화되어 있습니다.

자격 증명(절대 출력 금지)

두 가지 형태, 모두 Authorization: Bearer로 사용:

  1. 리믹스 grant (vos_rg_…) — 사용자 프롬프트에 포함된 경우 사용합니다. 24시간 유효, 하나의 소스 vos에 바인딩, 최대 5회 푸시.
  2. 영구 키 (vos_sk_…) — 요청하기 전에 다음 순서로 확인: VOS_API_KEY 환경 변수, 그다음 ~/.config/vos/credentials의 첫 번째 줄. 사용자는 https://vos.so/app/api 에서 키를 생성합니다.
  3. 자격 증명이 없는 경우 — 클레임 가능한 푸시(프로그램만 해당):
    vos push my-remix.json --claimable --title "My remix"
    # → claim: https://vos.so/claim/…   만료: <지금부터 72시간>
    
    # CLI가 없거나 구버전인 경우? 일반 HTTP로 동일한 작업:
    curl -s -X POST https://vos.so/api/claim \
      -H 'content-type: application/json' \
      -d '{"title": "My remix", "config": <VosConfigJson>}'
    # → { "claimUrl": "https://vos.so/claim/…", "expiresAt": "…" }
    
    claimUrl을 사용자에게 전달하고 다른 곳에는 절대 공개하지 마십시오 — 유일한 참조이자 유일한 자격 증명입니다. 링크는 72시간 동안 유효하며, 클레임되지 않은 작업은 그 이후 삭제됩니다(의도적인 정리, 데이터 손실이 아님 — 만료되면 다시 푸시). 클레임은 vos를 사용자의 라이브러리로 이동시키고 호스팅된 미리보기를 시작합니다. 클레임 후 반복은 사용자의 키를 사용합니다(아래 루프). 제한: config ≤200KB, 네트워크당 하루 5회 푸시.

CLI는 grant와 키를 자동으로 확인합니다(export VOS_API_KEY=…). 어떤 형태도 게시할 수 없습니다: 푸시된 vos는 사용자가 vos.so에서 직접 게시할 때까지 비공개로 유지됩니다.

루프

  1. 가져오기 — 소스 프로그램 가져오기(공개 프로그램은 인증 불필요):

    vos fetch https://vos.so/vos/<id>        # 또는 순수 id
    # → <slug>/config.json (params 유지) + <slug>/vos.json (추적)
    
  2. 편집 — 로컬에서 config.json을 편집합니다. 함수 필드(setup, createContent, createTimeline, onFrame)는 JavaScript 문자열입니다 — TypeScript 문법, ${} 템플릿 보간 사용 금지. 한두 가지 축을 결정적으로 변경하십시오(팔레트, 모션 문법, 밀도) — 절대 10% 미세 조정 복사본이어서는 안 됩니다. 프로그램이 params를 선언하면, 함수 문자열을 수술하기보다 해당 노브를 재조정하거나 확장하는 것을 선호합니다.

  3. 노브와 Looks 선언 — 리믹스의 컨트롤 표면. 의도 이름의 params 24개와 프리셋 23개. 이것은 규칙이 있는 기술입니다: references/params-knobs.md.

  4. 로컬에서 확인 — 푸시 전:

    vos check <slug>/config.json     # 마이그레이션 → 스키마 → 구문 → 컴파일 → 린트
    vos still <slug>/config.json probe.webp --time 2   # 실행 — 확인은 컴파일되지만
                                     # 모듈을 실행하지는 않습니다. 런타임
                                     # 오류(함수 자체 선언에 대한 TDZ)는
                                     # 확인만으로는 보이지 않습니다.
                                     # 모든 코드 편집 후, 모든 푸시 전에 스틸을 렌더링하세요.
    

    모든 오류를 수정하십시오. 결정론 경고를 진지하게 받아들이십시오(실행마다 다르게 렌더링되는 config는 정의상 잘못된 것입니다).

  5. 푸시 — 이력이 있는 비공개 vos로 푸시(CLI는 config 옆의 vos.json을 읽어 remixOfId 크레딧을 확인):

    vos push <slug>/config.json --title "Aurora Ribbons — dusk"
    # → 비공개 vos <id> 생성됨
    #   watch:  https://vos.so/vos/<id>
    #   studio: https://vos.so/studio?vos=<id>
    
  6. 반복 — 추가 편집은 동일한 vos의 버전이 됩니다:

    vos push <slug>/config.json --vos <id> --note "cooler palette, slower drift"
    

    디렉토리는 vos.json을 통해 vos를 추적하므로 기본 버전이 자동으로 전달됩니다: 사용자가 마지막 푸시 이후 스튜디오에서 편집한 경우, 푸시는 사용자의 변경 로그와 함께 거부됩니다. --note는 핸드오프 라인입니다 — 사용자가 가장 먼저 읽는 내용입니다. --label은 버전 이름을 지정합니다.

  7. 매 편집 전에 가져오기 — 사용자가 미세 조정했을 수 있습니다:

    vos pull <slug>          # 기본 이후 변경된 사항, 그다음 동기화
    

    각 버전을 속성과 함께 출력합니다(v3 (studio · warmer): knob hue 0.2→0.35 및 사용자 노트), config.json을 최신 버전으로 동기화하고(이전 복사본은 config.backup.json으로 유지), 기본을 다시 지정합니다. 사용자가 편집한 노드는 보호됩니다: 해당 노드를 건드리는 푸시는 --override <id>를 전달하지 않으면 거부됩니다 — 사용자의 지시가 명시적으로 해당 노드를 대상으로 할 때만 사용하십시오. 사용자의 노브 조작은 선호도 데이터입니다: 변경 로그를 읽고 다음에 무엇을 할지 결정하십시오.

  8. 두 링크 모두 반환 — watch 페이지(미리보기, 노브, 코드)와 스튜디오(https://vos.so/studio?vos=<id>)에서 사용자가 노브를 실시간으로 조정할 수 있습니다. 게시는 사용자가 vos.so에서 수행하는 작업입니다.

푸시를 정직하게 유지하는 규칙

  • 비공개가 계약입니다. 절대 visibility: "public"을 시도하지 마십시오 — 비공개로 고정되며, 키로 게시하는 것은 설계상 거부됩니다.
  • 할당량 인식: 영구 키는 24시간에 최대 50개의 vos를 생성합니다. grant는 최대 5회 푸시. 여러 vos를 만들지 말고 하나의 vos에서 버전을 반복하십시오.
  • 서버 렌더링 제약(미리보기 팜은 소프트웨어-GL 사용): 전송 재질에 THREE.DoubleSide 사용 금지, dispersion 사용 금지, 모든 가져온 에셋은 팜이 접근할 수 있는 절대 https URL이어야 합니다.
  • 모든 노브는 작동해야 합니다. 코드가 읽지 않는 param은 param이 없는 것보다 더 나쁩니다 — references/params-knobs.md의 정직성 섹션을 참조하십시오.
  • 3D 모델 교체(쇼케이스 프로그램에 GLB): references/3d-recipe.md.
  • 전체 엔드포인트 참조, 할당량 및 오류 테이블: references/remix-contract.md.

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.

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.

관련 스킬