Communitygithub.com

vos-create

vos.so 폴더를 기반으로 사용자 스타일의 vos 프로그램을 생성합니다.

vos-create란 무엇인가요?

이 스킬은 vos.so 플랫폼에서 사용자 폴더의 스타일과 레시피를 기반으로 새로운 vos 프로그램을 제작하는 전체 워크플로우를 제공합니다. 사용자의 폴더 구조, 레시피 파일(.md), 예시 vos 파일을 분석하여 일관된 스타일을 유지하면서 새로운 프로그램을 생성합니다. 크래프트 플로어(범용 품질 기준)와 폴더별 문서(레시피, 예시)를 모두 준수하며, CLI 도구인 @vosjs/cli를 통해 폴더 조회, 체크, 렌더링, 푸시 등의 작업을 수행합니다. 주요 단계로는 타겟 폴더 식별, 모든 레시피와 예시 읽기, 시드 결정 및 제작, 체크-렌더링-판단 루프, 폴더로 푸시 및 버전 관리가 포함됩니다.

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

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

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

문서

사용자 스타일로, 사용자 폴더에서 생성하기

vos.so에서 폴더에 속하는 vos 프로그램을 만듭니다: 사용자의 vos.so 폴더는 컬렉션, .md 파일(레시피)은 스타일, voses는 예시입니다. 이 스킬은 메커니즘과 범용 크래프트 플로어만을 제공합니다. 취향은 사용자 데이터이며 사용자의 폴더에 있고, 절대 여기에 있지 않습니다. 제작 규칙(스키마, 방언, 노브)은 vos-authoring 스킬에 있습니다; 노브 및 Looks 제작은 vos-remix 스킬의 params-knobs 참조에 있습니다. 이 스킬은 폴더 계약, 루프 및 이들을 둘러싼 프로세스를 추가합니다.

받은 편지함이나 하우스 스타일 파일은 없습니다. 중복 제거는 폴더 자체의 내용입니다; 선반(shelf)은 기록입니다.

설정

npm i -D @vosjs/cli   # folder, fetch, check, still, render, push

자격 증명은 다음 순서로 적용되며 절대 출력되지 않습니다: VOS_API_KEY, 그 다음 ~/.config/vos/credentials의 첫 번째 줄, 그 다음 vos login(이 머신용 키를 발급하는 브라우저 로그인). 모든 HTTP 호출은 https://vos.so/api에 대해 Authorization: Bearer <key> 헤더를 사용합니다. 키는 비공개 작업만 생성하며 절대 게시할 수 없습니다.

다섯 단계

1. 타겟 폴더 확인

사용자가 이름을 지정하거나, 물어봐서 결정합니다. vos folder list (또는 GET /api/folders)로 모든 수준에서 이름이나 slug로 폴더를 찾은 후 가져옵니다:

GET https://vos.so/api/folders/{id}

한 번의 pull로 전체 컨텍스트 패키지를 가져옵니다: 폴더 자체의 recipes(본문 포함), inheritedRecipes(상위 레시피, 루트부터 시작, 각각 소스 폴더가 표시됨; 이 폴더를 바인딩합니다), 예시 voses (contentUrls 포함), assets. 하위 폴더는 나열되지만 내용은 포함되지 않습니다: pull은 폴더 자체의 내용입니다.

아직 폴더가 없습니까? 생성하세요. 항상 설명을 포함해야 합니다:

vos folder create <name> --desc "<이 컬렉션이 무엇인지 한 줄>"

설명 없이 생성된 폴더는 명명 실패입니다; 설명은 폴더 페이지와 모든 미래의 pull이 읽는 정보입니다.

2. 모든 .md 파일과 예시 읽기

모든 레시피 본문(폴더 자체 및 상속된 것)과 contentUrls를 통해 1~3개의 예시 구성 또는 문서를 읽습니다. 레시피는 역할별로 명명된 측면이며, CLAUDE.md와 같은 방식으로 대문자로 명명됩니다: TASTE.md는 판단 기준, DESIGN.md는 기술 사양, 그리고 사용자의 의도에 따라 생성된 다른 모든 것 (MOTION.md, COPY.md, BRAND.md, ...). 레시피는 컬렉션이 무언가를 만들기 전에 읽는 파일이며, 이름이 그 의미를 나타냅니다; 당신이 제출하는 레시피는 줄기(stem)가 대문자로 저장되므로 그렇게 작성하면 선반이 당신이 쓴 내용을 보여줍니다. 플랫폼은 그 이상의 분류법을 강제하지 않습니다; 모두 읽으면 됩니다. 바인딩 규칙:

  • 레시피와 예시는 이 스킬이나 제작 스킬의 모든 기본값을 재정의합니다. 지속 시간은 그들의 지속 시간; 팔레트 규율은 그들의 규율입니다.
  • 파일 간 충돌 시, 더 구체적인 것이 우선: 폴더 자체의 파일이 상속된 파일보다 우선, 가까운 상위가 먼 상위보다 우선, 특정 지시가 일반 지시보다 우선합니다. 진정한 모순은 사용자에게 질문으로 돌아가야 하며, 조용히 선택하지 않습니다.
  • 레시피와 폴더의 최근 예시가 일치하지 않을 때는 예시를 선호하고 레시피가 오래된 것 같다고 사용자에게 알립니다.

빈 폴더 (레시피 없음, 예시 없음): 아래의 크래프트 플로어만 적용됩니다. 스타일은 사용자의 참조 또는 질문에서 오며, 내장된 기본값에서 오지 않습니다.

3. 시드 찾기, 그 다음 제작

폴더는 때때로만 일치하는 두 가지를 보유합니다: 참조(좋은 것이 어떻게 보이는지, 판단 기준)와 시드(복사하고 편집하여 다음 멤버를 만드는 것). 한 줄을 쓰기 전에 무엇을 가지고 있는지 결정하세요:

  • 프로그램 패밀리(승인된 멤버 + 메커니즘과 그 축을 명명하는 DESIGN.md): 시드 = 그 멤버. 해당 구성을 가져와 레시피가 명명한 축을 따라 변경합니다. 절대 빈 파일에서 제작하지 말고, 색조만 변경하지도 마세요.
  • 테이크 사양(컬렉션의 모든 녹화물이 어떻게 편집되는지 알려주는 레시피): 시드 = 사용자가 제공하는 새 녹화물(folder의 id로 식별되는 테이크, vos record --strict URL, 로컬 파일). 폴더 자체의 테이크가 참조 컷이지 시드가 아닙니다.
  • 템플릿(메커니즘과 그 변형 방법을 가리키거나 인라인하는 레시피): 시드 = 템플릿. vos로 호스팅: 멤버처럼 가져오기; 인라인 코드: 빌드할 프래그먼트.
  • 브리프만 (BRAND.md: 메커니즘 없음): 복사할 것 없음. 제약 조건과 크래프트 플로어 아래에서 새로 제작합니다.
  • 시드를 선언하는 것이 없음: 물어보세요. 사용자의 프롬프트가 핸드오프 대화에서 선택했을 때 시드를 명명합니다; 레시피가 잘 작성되었다면 시드를 명명합니다; 추측은 패밀리가 모양을 잃는 방법입니다.

레시피는 선택적 머리말(frontmatter) 힌트를 가질 수 있습니다: applies: programs | takes | any, seed: <vos id> | input | none. 위의 내용에 대한 소유자 선언으로 읽으십시오; 본문은 여전히 따라야 할 내용입니다.

레시피는 사용자의 문서이며, 지금 사용자가 요청한 것이 그 안의 어떤 줄보다 우선합니다. 레시피가 요청과 모순되는 경우(기다리라는 메모, 요청이 깨는 규칙), 한 줄로 말하고 요청을 따르십시오: 비공개 작업은 저렴하고 소유자는 복원할 수 있습니다. 파일의 줄 때문에 멈추지 마십시오.

그런 다음 vos-authoring 스킬의 제작 규칙을 따라 폴더 스타일 아래에 로컬로 구성 파일(bare VosConfigJson, 버전 2)을 작성합니다.

멤버 또는 템플릿 가져오기는 vos-remix 페치입니다: vos fetch https://vos.so/vos/<id>는 params가 보존된 <slug>/config.json과 기본 버전을 추적하는 vos.json을 작성합니다.

"X 재현" 브리프의 경우: 먼저 소스 또는 녹화물을 얻거나, 브리프가 모양만 원하는지 확인하십시오. 스틸(still)은 모션을 불충분하게 결정합니다; 잘못된 메커니즘을 발명한 스크린샷 매칭은 프레임이 일치하더라도 실패입니다. 소스 획득, 라이선싱 및 측정된 매칭 루프는 재현 작업입니다; 먼저 그 작업을 한 다음, 여기로 돌아와서 생성된 것으로부터 만드십시오.

4. 폴더 문서에 대해 체크, 촬영, 판단

  1. 체크:
    vos check <file>.json     # migrate → schema → syntax → compile → lints
    
    수정하고 통과할 때까지 다시 실행합니다. 절대 린트 오류를 무시하고 넘어가지 마십시오. 두 가지 체크는 아직 vos check에 없으므로 렌더링하여 수행하십시오:
    • 노브 정직성: 선언된 모든 매개변수는 눈에 띄게 작동해야 합니다. data에서 해당 키를 최소값과 최대값으로 변경하여 프로그램을 두 번 렌더링하고 스틸을 비교하십시오; 양 끝에서 동일하게 읽히는 노브는 죽은 것입니다. 테이크의 경우 vos frames/vos render에 --set <path>=<value>를 사용하여 재정의합니다.
    • 팔레트 정직성: 색상 노브는 new THREE.Color()를 통해 uniform으로 전달되어서는 안 됩니다(선형화되어 렌더링된 색조가 16진수에서 벗어납니다). 함수 문자열에서 이를 찾아 grep하십시오.
  2. 촬영:
    vos still <file>.json f12.webp --time <지속 시간의 12%>
    vos still <file>.json f40.webp --time <40%>
    vos still <file>.json f70.webp --time <70%>
    
    모션 중심 작품의 경우 밀집된 스트립(8회 이상, 또는 1초 접촉 시트)을 대신 촬영하십시오; 세 개의 스틸로는 모션 가중치를 판단할 수 없습니다.
  3. 판단: 아래의 크래프트 플로어 와 폴더 자체의 문서에 대해 프레임을 채점합니다. 컬렉션 작품은 컬렉션의 DESIGN.md와 상속된 TASTE.md 모두에 답해야 합니다. 수정하고 반복합니다(최대 3회); 여전히 실패하면 드롭하고 이유를 말합니다. 절대 변호할 수 없는 작업을 푸시하지 마십시오.

5. 폴더로 푸시, 버전으로 반복

vos push <file>.json --title "…" --desc "한 줄" --tags a,b \
  --folder <folderId|slug> --label "한 행동" --note "이유: 요청"

--label과 --note를 모든 푸시에 전달하십시오. 첫 번째 푸시도 포함됩니다: 생성 시 v1에 기록되며, 기록은 사람이 읽는 대화입니다. 푸시는 키 소유자의 선반에 비공개 vos를 생성하여 가져온 폴더에 정리합니다; 미리보기와 썸네일은 저장 자체로 클라우드에서 렌더링됩니다. 추적된 기본(vos-remix 루프: vos pull을 매 라운드 전에 실행, 사람이 편집한 노드는 보호됨, 명시적 지시에만 --override)에 대해 --vos <id>로 반복합니다. 키는 절대 게시할 수 없습니다; 프로모션은 vos.so에서 사람의 행동입니다.

결과를 확인하십시오. 모든 푸시는 약 15초 이내에 스틸을 렌더링합니다: GET /api/vos/{id}, contentUrls.thumbnail을 따라 이미지를 보고 완료를 보고하기 전에 확인합니다. 확인하지 않은 푸시는 완료된 것이 아닙니다.

배치 속도 조절: 연속 푸시는 할당량 내에서 괜찮습니다(렌더링 큐는 브라우저 실행 간격을 두고 자체적으로 백오프합니다). 배치 후에는 푸시 로그를 grep하지 말고 폴더 pull로 상태를 확인하십시오.

발견 사항 기록. 패밀리에 대해 배운 점(대역을 만드는 매개변수 범위, 더 나은 읽기를 제공하는 지속 시간)이 있으면 관련 레시피에 날짜가 있는 ## Agent notes 제목 아래에 추가합니다: PUT /api/assets/{id}/file 전체 마크다운 본문(레시피만, ≤64KB)으로. 소유자의 규칙을 다시 작성하지 마십시오. 교체된 본문은 보존됩니다: GET /api/assets/{id}/file?prev=1로 읽고 POST /api/assets/{id}/file/restore로 되돌릴 수 있습니다.

패밀리 프로세스: 시드, 확인, 확산

새 패밀리 작업은 1 시드 + 레시피이며, 배치가 아닙니다. 배치는 버그를 모든 멤버에 한 번에 복제합니다; 단일 시드는 방향 변경을 n=1에서 포착한 다음 저렴하게 확산합니다. 이것은 판단이지 게이트가 아닙니다: 작성하거나 따라야 할 상태 줄은 없으며, 사용자의 요청이 항상 결정합니다.

  1. 하나의 시드를 제작하고, 폴더에 배치하고, 패밀리의 DESIGN.md를 메커니즘, 축 및 팔레트 규칙으로 작성(또는 업데이트)합니다.
  2. 보여줍니다. 사람이 당신과 함께 반복합니다(속성 버전). 그들이 변형을 요청하면 그것이 승인입니다; 폴더에 어린 멤버가 하나 있고 요청이 열려 있을 때, 먼저 하나를 만들고 이유를 말합니다.
  3. 요청 시 확산합니다. 변형은 구성 축(구조, 모션 문법, 밀도, 카메라)을 변경하며, 절대 색조만 변경하지 않습니다; 색조만 변경한 확산은 같은 타일을 열 번 반복한 것으로 읽힙니다. 확산은 약 10개로 제한하여 선반 검토가 5분 작업으로 유지되도록 합니다.

크래프트 플로어 (범용, 린트 가능: 취향이 아닌 기준)

  • 컴파일 및 검증: vos check가 깨끗하게 통과; 절대 무시하지 않음.
  • 결정론적: seek는 t의 순수 함수여야 함(프레임 경로에 Date.now 또는 Math.random 없음; 결정론 린트가 이를 강제).
  • 루프 이음새 수학: 루핑 작품의 경우, 위상은 지속 시간에 대해 정수 배수여야 하므로 frame(0) ≈ frame(end)입니다. 스틸로는 이음새를 볼 수 없음; 수학으로 검증.
  • 정직한 노브: 2~4개의 선언된 매개변수, 각각 범위의 양 끝에서 눈에 띄게 작동. 적은 수의 정직한 노브가 많은 것보다 나음.
  • 노브는 매 프레임 onFrame에서 읽히며, createContent 내부에서 uniform으로 스냅샷되지 않음. 편집기는 노브 편집을 ctx.data만 교체하는 라이브 데이터로 전달; 생성 시 스냅샷은 새로고침할 때까지 업데이트되지 않음.
  • 비어 있지 않은 첫 번째 프레임: ~12% 프레임이 썸네일 역할; 검은색, 빈 공간 또는 "아직 시작 안 함" 열림 없음.
  • 밴딩 없음, 클리핑 없음: 밴딩 방지를 위해 그레인 추가; 블룸을 과도하게 사용하지 않음(강도 ≤ ~0.8, 폴더 문서가 요구하지 않는 한); 보이는 타일링 이음새나 하드 앨리어싱 없음.
  • 팔레트 정직성: 색상 노브는 new THREE.Color()를 통해 uniform으로 전달되어서는 안 됨; 16진수에서 원시 벡터를 구성.
  • 서버 렌더링 제약 조건(미리보기 팜은 소프트웨어 GL 사용): 전송 재질에 THREE.DoubleSide 없음, dispersion 없음, 가져온 모든 에셋은 팜이 도달할 수 있는 절대 https URL.

이 줄 이후의 모든 것(지속 시간, 밀도, 분위기, 재질, 팔레트 규율)은 폴더가 결정할 사항입니다.

보고

하나의 테이블로 종료: slug · concept · tags · outcome (pushed / dropped + 이유), 폴더 URL (https://vos.so/app/projects?folder=<slug>) 포함. 실패를 명확히 설명: 드롭된 디자인은 숨길 오류가 아니라 올바른 결과입니다.

엄격한 규칙

  • 참조는 창의적인 방향입니다. 외부 코드 포팅은 호환되는 라이선스 와 사용자의 명시적 지시가 필요합니다; 브랜드 또는 상표가 있는 구성은 거부됩니다.
  • 절대 게시하지 말고, 절대 가시성을 전환하지 마십시오. 푸시는 기본적으로 비공개입니다; 프로모션은 vos.so에서 사람의 결정입니다.
  • 선반은 사람의 것입니다: 폴더를 만들고 당신의 작업을 정리하십시오; 그들이 만든 것을 절대 이름 변경, 이동, 삭제 또는 재정렬하지 마십시오.
  • 자격 증명을 출력, 로그 또는 보고서에 절대 인쇄하지 마십시오.

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.

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.

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.

관련 스킬