Communitygithub.com

VanillaSkyAi/skills

VanillaSky를 위한 에이전트 스킬 — AI 에이전트가 프롬프트로부터 완성된 소셜 비디오(MP4, 9:16 또는 16:9)를 구성하고 렌더링합니다. Claude Code 및 75개 이상의 에이전트와 호환되며, 무료, 로컬 렌더링, MIT 라이선스입니다.

skills란 무엇인가요?

이 스킬은 AI 에이전트(Claude Code, Cursor, Codex 등)가 VanillaSky를 사용하여 프롬프트에서 완성된 소셜 미디어 비디오를 제작할 수 있도록 설계되었습니다. 핵심 개념은 'VideoConfig' JSON으로, 각각 큐레이팅된 템플릿을 참조하는 장면들의 순서 목록입니다. 에이전트는 먼저 CLI를 설정하고, 템플릿 카탈로그를 읽고, 브리프를 수집하여 video.json을 구성한 다음, 사용자가 미리 보고 편집하고 MP4를 내보낼 수 있는 VanillaSky Studio로 전달합니다. 전체 MP4 렌더링은 초기 흐름의 일부가 아닙니다. 이 스킬은 강력한 규칙을 시행합니다: 템플릿 ID 추측 금지, 증거 조작 금지, 검사되지 않은 구성 전달 금지. 또한 사실 확인, 스토리텔링, 시각적 다양성 및 카피에 대한 창의적 품질 게이트를 포함하여 전문적인 마케팅 비디오를 보장합니다. CLI를 해결하는 공식 부트스트래퍼(node scripts/install-cli.mjs)를 제공하며, npm 패키지를 찾는 것을 금지합니다. 다양한 비디오 형식(론칭, 리뷰, 마일스톤, 업데이트)을 지원하며, 검증 및 연락처 시트 검사를 위해 'vanillasky validate' 및 'vanillasky render --sheet'와 같은 도구를 사용합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add VanillaSkyAi/skills

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

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

문서

VanillaSky — 설정으로 만드는 소셜 비디오

비디오는 VideoConfig JSON입니다. 각 장면이 카멜케이스 ID로 큐레이팅된 템플릿을 참조하는 정렬된 목록입니다. 구성을 작성하고 검사한 후, VanillaSky Studio에서 사용자에게 전달하십시오. 사용자는 그곳에서 미리 보고, 편집하고, MP4로 내보냅니다. 전체 MP4 렌더링을 초기 흐름의 일부로 만들지 마십시오.

세 가지 불가침 규칙

  1. 카탈로그를 읽고, 추측하지 마십시오. CLI를 확인한 후 vanillasky templates를 실행하여 포함된 템플릿 맵을 확인하고, vanillasky templates <id> --json을 실행하여 정확한 스키마를 확인하십시오. 실시간 폴백은 https://vanillasky.ai/llms-components.txt입니다. 저장소 및 독립 실행형 설치에는 registry/llms-components.txt와 registry/r/<name>.json이 포함됩니다. 정확한 카탈로그에 접근할 수 없으면 ID나 변수를 임의로 만들지 말고 중단하십시오.
  2. 증거를 조작하지 마십시오. 이름, 인용문, 숫자, 통계, 스크린샷 및 제품 주장은 브리프 또는 제공된 자산에서 가져와야 합니다. 템플릿에 사용자가 제공하지 않은 증거가 필요한 경우 다른 템플릿을 선택하십시오.
  3. 검사되지 않은 구성을 건네지 마십시오. 검증은 구조를 잡아냅니다. 렌더링된 프레임을 직접 봐야만 오버플로, 약한 구성, 의도치 않은 기본값을 발견할 수 있습니다.

세션 시작하기

먼저 CLI를 확인하십시오. 공식 VanillaSky CLI는 npm 패키지로 게시되지 않았습니다. npm에서 검색하거나 npm install vanillasky를 실행하거나 해당 이름을 소유한 패키지를 사용하지 마십시오. command -v vanillasky가 실패하면, 이 SKILL.md의 경로에서 이 스킬의 설치 디렉토리를 확인한 후 공식 부트스트래퍼를 실행하십시오:

node <설치된-스킬-디렉토리>/scripts/install-cli.mjs

부트스트래퍼는 https://github.com/VanillaSkyAi/skills.git만 ~/.vanillasky/release에 클론하고, 해당 체크아웃에 선언된 종속성을 설치하며, 로컬 CLI를 PATH에 노출합니다. 체크아웃 원본이 다르거나 스크립트가 실패하면 중단하십시오. 레지스트리 패키지로 대체하지 마십시오.

그런 다음 첫 번째 비디오 전에 다음을 실행하십시오:

vanillasky update --check
vanillasky setup --check
vanillasky templates

update --check는 아무것도 변경하지 않고 새로운 릴리스를 보고합니다. 여기에 문서화된 플래그가 없으면 vanillasky update를 실행하십시오. setup --check는 기본 방향, 브라우저, Pexels 키, 음악 분위기 및 DESIGN.md 상태를 보고합니다.

Pexels 키가 없어도 차단되지는 않습니다: 스톡 검색에 pexels.com/api의 무료 키가 필요하다는 점을 한 번 언급한 다음, 제공된 미디어나 스톡에 의존하지 않는 템플릿을 사용하십시오. DESIGN.md가 없으면 자동 브랜딩이 없음을 의미합니다. 차단하지 마십시오.

브리프 도출하기

먼저 프롬프트, 저장소, DESIGN.md, URL 및 제공된 자산을 사용하십시오. 최대 세 가지 질문을 하고 진정한 격차에 대해서만 질문하십시오:

  1. 목표 및 형식 — 시청자가 무엇을 하거나 느껴야 합니까: 론칭, 리뷰, 마일스톤 또는 업데이트?
  2. 대상 및 증거 — 누구를 위한 것이며, 어떤 실제 숫자, 인용문, 스크린샷 또는 제품 세부 정보가 주장을 뒷받침합니까?
  3. 자산 — 어떤 스크린샷, 로고, 클립 또는 URL이 반드시 표시되어야 합니까?

대상에 따라 방향을 도출하십시오: TikTok/Reels/Shorts → 세로형; YouTube 동영상 또는 명시적으로 넓은 X/LinkedIn 게시물 → 가로형. 그렇지 않으면 구성된 기본값을 사용하거나 세 가지 질문 중 하나를 사용하십시오.

결과를 video.brief.md로 video.json 옆에 저장하십시오. 나중에 동일한 질문을 다시 묻는 대신 다시 읽고 업데이트하십시오.

기본 워크플로우: Studio에서 전달

  1. 작성 브리프와 번들 카탈로그에서 video.json을 작성하십시오. 변수를 작성하기 전에 vanillasky templates <id> --json으로 후보 템플릿의 정확한 스키마를 검사하십시오.

  2. 스톡 미디어 해결 구성에 mediaKeyword가 포함된 경우:

    vanillasky resolve video.json
    

    그러면 Pexels 결과가 선택되고 정확한 mediaUrl이 구성에 기록되어 검증 및 재렌더링이 결정적으로 수행됩니다. Pexels 키를 사용할 수 없는 경우 제공된 미디어, 직접 URL 또는 mediaType: "gradient"를 대신 사용하십시오. 전달 상태는 렌더링 시 검색에 의존하지 마십시오.

  3. 검증 모든 오류와 경고를 수정하십시오:

    vanillasky validate video.json
    

    구성의 format은 올바른 슬롯 계약을 선택합니다. 모든 비디오에 --format launch를 하드코딩하지 마십시오. 경고를 장식이 아닌 해결해야 할 작업으로 취급하고, 경고가 남아 있는 동안 검증이 깨끗하다고 설명하지 마십시오.

  4. 연락처 시트 검사:

    vanillasky render video.json --sheet --out ./sheet
    

    sheet/sheet.png를 열고 필요할 때 개별 프레임을 검사하십시오. 실제로 sheet/sheet.png를 여십시오. 파일이 존재하는 것은 검사가 아닙니다. 텍스트 오버플로, 읽을 수 없는 유형, 설정되지 않았거나 기본값처럼 보이는 값, 사용되지 않은 자산, 시각적 반복 및 프레임 중간 75% 외부의 중요한 콘텐츠를 확인하십시오. 시각적 편집 후에는 해결(필요한 경우), 검증 및 시트를 반복하십시오.

  5. Studio에서 전달:

    vanillasky studio video.json
    

    Studio는 파일을 실시간으로 추적합니다. 사용자가 검토하는 동안 구성을 계속 편집하십시오. 사용자의 저장되지 않은 편집 내용은 덮어쓰이지 않고 충돌로 표시됩니다. 사용자는 만족할 때 Studio에서 MP4를 내보냅니다.

    잘못된 브라우저가 열리면 --browser "Google Chrome"을 전달하거나 ~/.vanillasky/config.json에 브라우저를 저장하십시오. 원격 셸에서는 --no-open을 사용하십시오.

기본적으로 전체 MP4를 렌더링하지 마십시오. 사용자가 명시적으로 파일을 요청하거나 Studio를 사용할 수 없는 경우(CI/헤드리스)에만 직접 렌더링하십시오:

vanillasky render video.json --open

해당 분기의 경우 결과를 보고 완료 배너를 읽으십시오: 총 길이, 오디오 범위, 방향 및 푸티지 매끄러움을 확인하십시오. 완료 블록의 Watch 및 Studio 링크를 포함하십시오. vanillasky link video.json은 렌더링 없이 다시 출력합니다.

기본 경로 구성하기

이 형태로 시작한 다음 카탈로그의 정확한 스키마를 사용하십시오:

{
  "format": "launch",
  "orientation": "portrait",
  "style": {
    "font": "Inter",
    "preset": "bold",
    "brandKit": { "accent": "#6D5EF8", "secondary": "#F8B45E" }
  },
  "audio": { "trackId": "<vanillasky tracks에서 가져옴>" },
  "scenes": [
    {
      "id": "s0",
      "templateId": "media",
      "variables": { "texts": "오늘 출시하세요", "mediaType": "gradient" },
      "timing": { "fixedDuration": 3 }
    }
  ]
}
  • brandKit은 style 안에 속합니다. 스타일 프리셋을 의도적으로 선택하십시오.
  • textArchetype과 backgroundEffect는 변수가 아닌 장면 필드입니다.
  • timing.fixedDuration은 독립 장면 길이를 설정합니다. 명시적 타임라인은 연속된 startTime + endTime을 사용합니다. timing.duration은 필드가 아닙니다.
  • vanillasky tracks를 사용하여 분위기와 에너지에 따라 음악을 선택하십시오. 무음도 유효하지만 일반적으로 소셜 비디오에는 약합니다.
  • 미디어에는 실제 HTTPS URL 또는 로컬 경로를 선호하십시오. Base64 미디어는 공유 링크를 너무 크게 만들고, mediaKeyword 결과는 결정적 재렌더링을 위해 mediaUrl에 고정되어야 합니다.

구성에 브랜딩, 미디어 해상도, 명시적 타이밍, FPS 매칭 또는 링크 동작이 필요한 경우 references/config.md를 읽으십시오.

스토리에 맞는 형식 선택하기

형식스토리 형태일반적인 길이
launch프레이밍 → 이해 → 증거3-8 장면, 일반적으로 5
review인용문 → 귀속 → 결과4-7 장면, 일반적으로 5
milestone숫자 → 맥락 → 감사3-6 장면, 일반적으로 4
update변경 → 시연 → 이점4-7 장면, 일반적으로 5

검증기는 장면 수, 금지된 후크, 클로저 배치 및 인접 규칙을 적용합니다. references/formats.md에는 생성된 계약이 포함되어 있습니다. 검증기가 할 수 없는 판단을 내리는 것이 귀하의 역할입니다.

창의적 품질 게이트

진실과 자산

  • 모든 템플릿 기본값을 브리프별 콘텐츠로 바꾸십시오. 10K, 99.9% 또는 <50ms와 같은 플레이스홀더 통계를 절대 배송하지 마십시오.
  • 중요한 모든 제공된 스크린샷을 사용하십시오. 실제 제품 표면이 동일한 내용을 보여주는 합성된 터미널, 편집기, 전화기 또는 브라우저보다 낫습니다.
  • 세로형 스크린샷을 전화기 목업에, 가로형 스크린샷을 브라우저 목업에 일치시키십시오.

스토리

  • 후크는 긴장감이나 호기심을 만듭니다. 보상을 소모하지 않습니다.
  • 구체적인 제품, 대상 또는 결과를 명명하는 설명 본문을 최소 하나 이상 포함하십시오. 알림, 통화, 트윗 및 숫자는 프레이밍하거나 증명할 수 있지만, 제품을 단독으로 설명할 수는 없습니다.
  • 클로저는 주소(브랜드, URL 또는 행동)이며, 증거의 반복이 아닙니다.

다양성과 페이싱

  • 모든 본문을 카드로 만들지 마십시오. 최소 두 가지의 비카드 중심 레지스터를 사용하십시오.
  • 평평한 그라데이션 위의 평범한 문장은 대안이며, 자동으로 강력한 후크가 아닙니다. 브리프에 기반한 시각적 메커니즘(알림의 경우 알림, 개발자 워크플로우의 경우 터미널/편집기, 대화의 경우 채팅, 제공된 제품 표면의 경우 장치 또는 브라우저)을 선호하십시오. 의도적으로 미니멀한 비디오라도 하나의 구체적인 시각적 아이디어가 필요합니다. 미니멀은 더 적은 요소를 의미하며, 모든 장면에서 동일한 그라데이션과 타이포그래피를 의미하지 않습니다.
  • 일관된 팔레트는 장면 다양성이 아닙니다. 동일한 평평한 배경을 공유하는 세 개 이상의 장면 행은 유형 레이아웃이 다르더라도 이 게이트를 통과하지 못합니다. 근거 있는 자산, 스톡 배경, 템플릿 또는 절제된 효과로 하나 이상의 레지스터를 변경하십시오. 브리프에 많은 개별 장면을 지원할 만큼 승인된 카피나 증거가 충분하지 않은 경우, 반복하는 대신 형식의 가장 짧은 유효한 스토리를 사용하십시오.
  • 푸티지에 의도적으로 짧은 브리지가 아닌 이상 최소 3초를 제공하십시오. 모든 곳에 하나의 효과를 적용하는 대신 배경 모션을 다양화하십시오.
  • 그라데이션 전용 미디어 장면은 의도적인 브랜드 비트여야 하며, 스톡 또는 제공된 미디어가 불편해서 선택한 대안이 아니어야 합니다.
  • 실제로 나타나는 것을 검사하십시오: 기간 제한 템플릿은 구성에 포함되어 있더라도 이후 항목을 생략할 수 있습니다.

카피

  • 후크: 최대 7단어. CTA: 최대 4단어, 가급적 명령형.
  • 사용자가 승인한 모든 슬로건이나 인용문을 적어도 하나의 장면에 그대로 보존하십시오. 승인된 한 줄을 여러 개의 유사-뚜렷한 장면으로 바꾸기 위해 조각을 별도로 보여주지 마십시오. 시각적 진행이 다른 비트를 전달하도록 하십시오.
  • 세 개의 일반 명사, 범주 또는 동사 목록을 피하십시오. 리듬에는 긴장, 진행 또는 반전이 필요합니다. 세 개의 동의어가 아닙니다.
  • 함께 유지되어야 하는 텍스트는 nowrap span 안에 두십시오. SVG 내보내기를 위해 NBSP에 의존하지 마십시오.

템플릿이 실패할 때만 에스컬레이션

브리프를 표현하는 가장 낮은 단계를 사용하십시오:

  1. 목적에 맞게 작성된 카피가 있는 템플릿.
  2. 조정된 변수가 있는 템플릿.
  3. 레지스트리 항목을 기반으로 한 추출/사용자 정의 장면.
  4. 샌드박스 장면 요소로 구성된 사용자 정의 장면.

기본 경로는 단계 2에서 멈춥니다. 단계 3 또는 4를 사용하기 전에 references/custom-scenes.md, references/libraries.md, references/motion.md 및 references/visual-rules.md를 읽으십시오. API를 임의로 만들지 말고 vanillasky scope 및 생성된 references/motion-api.md를 사용하십시오.

참조 라우터

관련 스킬