sanky369/vibe-building-skills

Remotion 스크립트 작성기

비디오 목표와 (선택적으로) 코드베이스를 입력받아 Remotion Script JSON — Remotion 에이전트가 후속 질문 없이 구현할 수 있을 정도로 정밀한 장면별 명세서를 생성합니다. 핵심 원칙: 스크립트는 렌더링의 단일 진리값입니다. 모든 지속 시간, 요소, 애니메이션 및 음성 해설은 숫자와 정확한 문자열로 명시되며, "약 5초" 또는 "소개 텍스트"와 같은 모호한 표현은 사용하지 않습니다. 동일한 입력을 받은 두 에이전트는 구조적으로 동일한 스크립트를 출력해야 합니다.

사용 시기 / 사용하지 말아야 할 시기

• 출력물이 Remotion으로 프로그래매틱하게 렌더링될 때 사용: 웹 앱 제품 데모, 애니메이션 코드가 포함된 코딩 튜토리얼, 모션 그래픽, 데이터 시각화 비디오, 짧은 소셜 애니메이션.
• 제품 비디오의 콘셉트와 비트가 아직 결정되지 않은 경우 → 먼저 skills/creative/product-video를 실행합니다. 해당 비트 시트가 이 스킬의 장면 목록이 됩니다.
• 사람이 출연하는 비디오 → skills/creative/talking-head (Remotion은 적합한 도구가 아닙니다).
• 정적 그래픽 → skills/creative/social-graphics.
• 이 스킬은 스크립트만 작성합니다. React 컴포넌트 구현, Remotion Studio에서 미리보기 및 렌더링은 다운스트림에서 Remotion 자체 에이전트 스킬이 수행합니다.

규칙 파일 — 스크립트 작성 전에 읽어야 할 파일

• rules/prompt-structure.md — 스크립트가 작성되는 입력 필드(goal, targetAudience, code, videoType, duration, style, animations, transitions). 입력을 입력 객체로 정규화할 때 읽습니다.
• rules/script-generation.md — 권위 있는 출력 JSON 구조 및 생성 지침. 스크립트를 생성하기 전에 읽어야 합니다. 아래 뼈대는 요약이며, 해당 파일이 계약입니다.
• rules/animation-patterns.md — 승인된 애니메이션/전환 어휘와 정확한 JSON 형태 및 타이밍 지침. animation 또는 transitionToNextScene 값을 지정할 때 읽어야 하며, 해당 범위 밖의 애니메이션 유형을 임의로 만들지 마십시오.
• rules/scene-templates.md — 일반적인 사용 사례(타이틀 카드, 기능 쇼케이스, 코드 워크스루, 데이터 시각화, 아웃트로/CTA)를 위한 미리 만들어진 장면 JSON. 장면이 알려진 패턴과 일치하면 해당 템플릿을 읽고 시작하여 편집합니다.
• examples/product-demo-example.json — 완전한 작업 예시 스크립트. 세분성에 대한 기준을 설정하기 위해 읽습니다.

입력 획득

한 번의 배치로 누락된 항목만 질문합니다(필드 이름은 rules/prompt-structure.md 기준):

1. goal 및 targetAudience — 비디오가 무엇을 달성해야 하며, 누구를 위한 것인가요?
2. videoType — product-demo | coding-tutorial | animation | data-visualization | social-media?
3. duration(초) 및 대상 플랫폼(너비/높이/fps 결정).
4. code — 앱 또는 코드가 등장하는 경우 코드베이스 경로, 저장소 URL 또는 코드 조각.
5. style — 시각적/브랜딩 제약 조건(색상, 글꼴, 로고; skills/creative/creative-strategist 스타일 가이드가 있는 경우 해당 가이드).

묻지 말고 추론: language는 코드베이스에서, 치수는 플랫폼에서(기본 1920×1080 가로, 세로 소셜은 1080×1920, fps 30), style에서 애니메이션/전환 선호도가 주어지지 않은 경우 추론합니다. 지체하지 마세요: goal + videoType + duration을 알면 가정을 명시하고 진행합니다.

워크플로우

1. 소스 자료 분석

code가 제공된 경우, 이를 탐색합니다: 주요 기능, 사용자 흐름, 데이터 구조 및 보여줄 가치가 있는 UI 표면을 식별합니다. 기능을 goal과의 관련성에 따라 순위를 매깁니다. 비디오는 모든 것이 아닌 상위 3~5개를 보여줍니다. 코드가 없는 경우 사용자 설명에서 동등한 목록을 추출합니다.

2. 장면 구성

videoType별 결정 규칙:

• product-demo → 타이틀 카드 → 문제/맥락 → 기능별 한 장면(상위 3~5개) → 아웃트로/CTA.
• coding-tutorial → 타이틀 → 콘셉트 설정 → 코드 단계별 한 장면(코드 표시 후 설명) → 요약.
• data-visualization → 타이틀 → 맥락 → 차트/인사이트별 한 장면 → 핵심 요점.
• social-media → 후크 장면(≤3초) → 1~2개의 페이오프 장면 → CTA. 총 60초 이하.
• animation → 크리에이티브 콘셉트(또는 skills/creative/product-video 비트 시트)에서 비트를 도출합니다.

타이밍 계산은 필수입니다: 장면 지속 시간과 전환 오버랩을 합산하여 duration과 정확히 일치해야 합니다. TransitionSeries 전환은 인접 장면과 오버랩됩니다. 오버랩을 고려하여 단순히 지속 시간을 더하지 마십시오. 총 약 5분 미만으로 유지(렌더링 성능 휴리스틱).

3. 각 장면 완전히 명시

모든 장면에 대해 모든 필드를 채웁니다: sceneNumber, title, durationInSeconds, visuals.background, visuals.elements[] (type, 정확한 content 문자열, font, size, color, position, rules/animation-patterns.md의 animation), audio.voiceover (정확히 말할 문장 — 약 초당 2.5단어 속도로 장면 지속 시간에 맞는지 확인), transitionToNextScene. 일치하는 경우 rules/scene-templates.md 템플릿을 사용합니다.

4. 에셋 및 기술 요구 사항 컴파일

어떤 장면에서든 참조되는 모든 이미지, 비디오 클립, 오디오 트랙, 글꼴 및 로고를 requiredAssets에 나열합니다. 참조된 항목이 목록에서 누락되어서는 안 됩니다. 에셋 생성은 범위를 벗어납니다: 각각을 사용자 제공으로 표시하거나 정확하게 설명합니다. 정적 이미지는 skills/creative/image-generation을 통해 생성할 수 있습니다(저장소 파이프라인: docs/creative_cli.py, 모델 fal-ai/nano-banana-pro). remotionPackages(예: 전환이 사용될 때마다 @remotion/transitions)와 타사 라이브러리를 나열합니다.

5. 품질 기준에 대한 검증 후 JSON 전달

스크립트와 함께 핸드오프 노트(아래)를 전달합니다. 다운스트림 Remotion 에이전트가 컴포넌트를 생성하고, 컴포지션을 설정하고, Studio에서 미리보기 및 렌더링을 수행합니다.

필수 출력 형식

rules/script-generation.md의 구조와 정확히 일치하는 하나의 JSON 객체를 출력합니다:

{
  "videoMetadata": {
    "title": "...", "durationInSeconds": 60,
    "width": 1920, "height": 1080, "fps": 30,
    "videoType": "product-demo"
  },
  "scenes": [
    {
      "sceneNumber": 1, "title": "...", "durationInSeconds": 5,
      "visuals": {
        "background": "#RRGGBB 또는 에셋 참조",
        "elements": [
          { "type": "text|image|code|chart", "content": "정확한 내용",
            "animation": { "type": "<rules/animation-patterns.md에서>", "durationInSeconds": 1 } }
        ]
      },
      "audio": { "voiceover": "정확한 음성 문장." },
      "transitionToNextScene": { "type": "<rules/animation-patterns.md에서>", "durationInSeconds": 1 }
    }
  ],
  "requiredAssets": { "images": [], "videos": [], "audio": [], "fonts": [], "logos": [] },
  "technicalRequirements": { "remotionPackages": [], "thirdPartyLibraries": [] }
}

JSON 뒤에 짧은 마크다운 핸드오프 노트를 추가합니다: 총 지속 시간 확인(장면별 계산 표시), 사용자가 가정한 1~3가지 사항, 렌더링 전에 사용자가 제공해야 하는 에셋.

품질 기준(전달 전 확인)

• 장면 지속 시간 + 전환 오버랩이 videoMetadata.durationInSeconds와 정확히 합산됩니다. 핸드오프 노트에 계산을 표시합니다.
• 모든 animation 및 transition type이 rules/animation-patterns.md에 존재합니다. 임의로 만든 유형은 없습니다.
• 모든 음성 해설 줄이 약 초당 2.5단어 속도로 해당 장면에 맞습니다. 음성 해설 또는 제목으로 목적이 명시되지 않은 시각적 요소가 있는 장면은 없습니다.
• 장면에서 참조된 모든 에셋이 requiredAssets에 나타납니다. 텍스트 요소에서 사용된 글꼴이 나열됩니다.
• Remotion 정확성이 명세에 포함됩니다: useCurrentFrame()을 통한 프레임 기반 타이밍, 공개를 위한 damping: 200의 스프링, 문자열 슬라이싱을 통한 타자기 효과(문자별 불투명도 아님), 결정론적 난수만 사용(Remotion의 random(), Math.random() 안 됨), 무거운 시퀀스에 대한 premountFor, 정렬을 위한 <Sequence>/<Series>/<TransitionSeries>.
• content 필드는 최종 카피이며 "기능 설명"과 같은 플레이스홀더가 아닙니다.
• 음성 해설은 자동 초안입니다. 핸드오프 노트에 사용자가 이를 다듬고 싶을 수 있음을 표시합니다.

통합

• skills/creative/product-video → 제공: 제품 비디오의 콘셉트 + 비트 시트 + 키프레임. 각 비트가 장면이 됩니다.
• skills/creative/creative-strategist → 제공: visuals 및 style에 적용되는 스타일 가이드(색상, 글꼴, 분위기).
• skills/creative/original-design → 제공: 디자인 언어 브리프. 모든 장면의 시각적 어휘는 해당 세계에서 와야 합니다.
• skills/creative/image-generation → 생성: requiredAssets.images에 나열된 정적 에셋.
• skills/creative/social-graphics → 사용: 게시물 에셋을 위한 렌더링된 스틸/썸네일.
• 다운스트림: Remotion 에이전트 스킬(이 저장소 외부)이 JSON을 소비하여 컴포넌트를 구축, 미리보기 및 렌더링합니다.