Communitygithub.com

AntlersSam/saas-launch-video-kit

전문적인 HyperFrames 작곡을 제작하거나 편집합니다. 브랜드 릴, 몽타주, 풋티지 리믹스, 타이틀 카드 및 자유로운 형식의 비디오 프로젝트에 적합합니다. 짧고 나레이션이 없는 모션 중심 유닛(애니메이션 타이틀 포함)에는 motion-graphics를 대신 사용하세요. 이 기술을 사용하기 전에 hyperframes를 통해 새로 제작하는 경로를 선택하세요.

saas-launch-video-kit란 무엇인가요?

이 기술은 Claude Code, Cursor 또는 Codex와 같은 AI 비서가 HyperFrames 프레임워크 내에서 일반 비디오 작곡을 제작, 편집 및 관리할 수 있도록 합니다. 기존 BRIEF.md가 없거나 hyperframes.json 및 STORYBOARD.md 파일이 없고, 사용자가 flow: companion과 함께 general-video 워크플로를 요청한 경우에 적합합니다. AI는 계획, 스토리보드, 자산 관리, 애니메이션 및 렌더링을 포함한 단계별 프로세스를 안내하며, 스토리 스파인, 하우스 스타일 및 기능 메뉴와 같은 참조 문서를 활용하여 고품질 출력을 보장합니다. 이 워크플로우는 자동화(flow: automation)와 협업(flow: companion) 모드를 모두 지원하며, AI가 사용자 입력에 따라 결정을 내리거나 협업할 수 있습니다. 요금제, 렌더링 시간 및 로그인이 필요한 작업에 대한 비용이 명시된 '천장 처리(ceiling treatment)'로 시작하여, 사용자가 이를 다듬을 수 있도록 합니다. 또한 플러그인 설치, Figma 통합 및 미디어 자산 및 작업에 대한 다양한 어댑터를 처리합니다. 이 기술은 프로젝트를 간소화하고 반복 작업을 줄여 비디오 제작을 보다 효율적이고 확장 가능하게 만듭니다.

지원 대상~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/AntlersSam/saas-launch-video-kit/tree/HEAD/skills/general-video

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

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

문서

플러그인 설치: 설정 또는 신규 명령 전에, 이 기술이 HyperFrames 플러그인 내에 있을 경우 플러그인 실행 규칙을 따르세요. 독립 실행형 설치는 아래 업데이트 지침을 유지합니다.

일반 비디오

이 워크플로우를 사용하기 전에 다음을 실행하세요.

npx hyperframes skills update general-video

성공적인 no-op는 기술이 최신 상태임을 의미합니다. 메모리에서 계속 진행하는 대신 업데이트 실패를 표시하세요.

1. 교차 소스 어댑터 적용

  • 미디어: 오디오, 이미지, 아이콘, 로고, 음성, 그레이딩, LUT, 효과, 자막 또는 미디어 작업이 필요한 경우 /media-use를 로드하고 ../media-use/references/resolve.md (해결, 채택, 재사용) 및 ../media-use/references/setup-providers.md (제공자, 인증)를 따르세요. 모호한 풋티지 피드백 및 명명된 스타일은 편집 전에 ../media-use/references/media-treatments.md를 사용하세요. 지원되지 않는 미디어 효과를 CSS/SVG/불투명도로 즉석에서 구현하지 마세요. 첫 번째 인증된 제공자 작업 전에 npx hyperframes auth status를 실행하고 그 출력을 그대로 전달하세요. 로그아웃 상태인 경우 ../hyperframes/references/brief-contract.md의 게이트를 적용하세요: 협업 모드에서는 로그인 또는 명시적인 오프라인 선택을 기다립니다. 자율 모드에서는 상태를 알리고 사용 가능한 오프라인 제공자를 통해 계속 진행합니다. 필수 기능을 충족할 수 있는 오프라인 제공자가 없으면 차단기를 표시하세요. 로컬 채택만으로는 인증 게이트가 필요하지 않습니다.
  • Figma: 입력이 figma.com URL인 경우 먼저 /figma를 실행하세요. 내보낸 자산, 토큰, 컴포넌트 또는 스토리보드 프레임을 기반으로 빌드하세요. SVG 삭제, 미디어 출처 및 브랜드 토큰 바인딩을 건너뛰므로 원시 Figma 커넥터 호출을 사용하지 마세요.

이러한 어댑터는 /hyperframes에서 선택한 워크플로를 변경하지 않습니다.

2. 프로젝트 상태에서 시작

일치하는 첫 번째 행을 적용하고, 더 낮은 상태 행을 평가하지 마세요.

상태작업
특정 편집편집을 수행하고, 기존 프로젝트 결정을 유지한 후, 영향을 받는 검사를 다시 실행하세요. 발견 단계를 다시 열지 마세요.
BRIEF.md가 존재함읽으세요. workflow가 다른 워크플로를 지정하고 flow가 companion이 아닌 경우, 인계하세요. 브리프 질문을 하지 마세요.
브리프는 없지만 hyperframes.json 또는 STORYBOARD.md가 존재함파일과 기록된 기본 설정에서 재개하세요. BRIEF.md는 알려진 사실로만 백필하세요.
새로 제작/hyperframes와 그 의도 레이어를 실행하세요. workflow: general-video 또는 flow: companion인 경우에만 여기로 돌아오세요.

새 프로젝트의 경우, 브리프에서 kebab-case 디렉토리 이름을 선택하고 브리프를 작성하기 전에 스캐폴드하세요.

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=general-video

그런 다음 ../hyperframes/references/brief-format.md를 사용하여 프로젝트 루트에 BRIEF.md를 작성하세요. 기존 프로젝트에서 루트는 hyperframes.json이 포함된 디렉토리입니다. 브리프 형식이 지정한 확인된 기본 설정 기반 필드만 node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes <PROJECT_ROOT>을 사용하여 기록하고, 추론된 기본값은 절대 기록하지 마세요. 여기서 <MEDIA_DIR>은 설치된 /media-use 기술 디렉토리이고 <PROJECT_ROOT>는 hyperframes.json이 포함된 디렉토리입니다. 의도 레이어가 레시피를 채택한 경우, 지금 node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes <PROJECT_ROOT> --name <name>을 적용하고 다시 묻지 마세요.

3. 실행 형태 해석

../hyperframes/references/brief-contract.md의 정식 용어만 사용하세요.

필드의미효과
flow누가 주도하는가automation: 경로를 선택하고 실행합니다. companion: 대화를 통해 공동 창작합니다.
storyboard빌드 전에 계획, 스케치 및 검토yes: 계획 및 스케치 검토를 실행합니다 (storyboard.html). no: 검토 없이 빌드합니다.
파생된 mode체크포인트 게이트 동작 방식브리프 계약을 따릅니다. 사용자에게 모드 이름을 묻지 마세요.

이러한 상태에 대한 동의어를 만들지 마세요. 지속적인 "그냥 빌드해" 신호는 의도 레이어에서 처리되며 flow: automation, storyboard: no로 도착합니다.

  • flow: automation의 경우, 경로를 선택하고 첫 번째 진행 업데이트에서 한 줄로 명시하세요.
  • 특정 편집의 경우, 새 경로를 만들지 않고 편집을 수행하세요.

기존 풋티지의 하드 컷, 트림, 스플라이스 또는 재정렬의 경우, 동일한 비디오 소스를 여러 클립 요소로 복제하세요. 각 복사본에서 data-media-start와 data-duration으로 소스 범위를 설정한 다음, data-start로 작성된 배치/순서를 설정하세요. 별도로 작성된 오디오는 일치하는 <audio> 요소에서 동일한 클립 범위와 타이밍을 따릅니다. /hyperframes-core가 이 시간 편집을 소유합니다. 줌, 펀치, 팬, 크롭, 마스크 또는 내부 래퍼의 clip-path와 같은 시각적 속성 애니메이션에는 /hyperframes-keyframes만 사용하세요. ../hyperframes-core/references/creator-editing-recipes.md의 전체 계약을 복사하세요.

협업 흐름

flow: companion인 경우:

  • BRIEF.md를 읽고 수락된 ## Assets 및 ## Customizations를 프로젝트 아티팩트와 조정하세요. 아직 완료되지 않은 수락된 작업을 완료하고, 완료된 작업은 그대로 두세요. 수락된 기능을 새 것처럼 다시 제공하지 마세요.
  • 계약자가 아닌 감독으로 도착하세요. 협업을 선택한 사용자는 참여와 품질을 선택한 것입니다. 정직한 응답은 변호할 수 있는 가장 작은 버전이 아니라 설계할 수 있는 최고의 버전입니다. 첫 번째 계획은 천장 처리입니다: 스토리 아크 (가장 가까운 장르 렌즈 빌리기 — 메뉴 § 장르 렌즈), 디자인 사양, 각 장면의 모션 처리 이름 (§ 5의 계획 규율), 전환, 오디오 아이덴티티 — 음악 및 사운드 마크, 또는 의도적인 침묵 — 사용자의 자료 배치, 그리고 설계된 시작과 끝. 각 레이어가 무엇을 추가하는지 한 줄로 말하고, 비용이 많이 드는 것(렌더링 시간, 로그인, 요금제)을 이름을 지정할 때 표시하세요. 사용자는 처리를 다듬습니다. 승인 하나하나를 조립하도록 해서는 안 됩니다.
  • 천장은 개념에 속하며 도구 상자에 속하지 않습니다. 모든 레이어는 브리프의 메시지를 제공해야 합니다. 모든 비디오를 같은 방식으로 꾸미는 처리는 장식일 뿐입니다. 공예는 천장까지 올라갑니다. 콘텐츠는 요청된 것 이상으로 절대 커지지 않습니다 (§ 6).
  • 체크포인트 사이에 ../hyperframes/references/capability-menu.md는 두 가지 방식으로 작동합니다. 트리거 목록으로: 사용자가 입력을 언급하거나 빌드가 필요에 도달할 때 관련 기능을 제공합니다. 각 패스의 업그레이드 채널로: 계획, 스케치 또는 빌드 체크포인트는 사용자가 보고 있는 자료를 가리키는 하나 또는 두 개의 추적된 제안을 전달할 수 있습니다 ("장면 3의 통계는 카운트업 처리를 원합니다"). 제공하기 전에 읽으세요. 전체 카탈로그를 덤프하지 마세요.
  • 사용자가 기능을 수락한 후, 해당 아티팩트를 생성하고 즉시 일치하는 BRIEF.md 본문 섹션에 결정을 기록하세요. 사용자가 명시적으로 변경할 때만 frontmatter 필드를 다시 작성하고 확인된 기본 설정을 기록하세요.
  • 동일한 스토리보드, 검증, 최종 미리보기 및 렌더링 승인 게이트를 유지하세요. 협업은 누가 조종하는지를 변경할 뿐, 품질에 필요한 것을 변경하지 않습니다.

4. 각 단계 전에 필요한 지식 로드

조건이 일치할 때 다음 읽기는 필수입니다.

조건작업 전 읽기
모든 구성 HTML 또는 장면 레이아웃/hyperframes-core; 레이아웃 계약을 위해 references/determinism-rules.md 사용
모든 중요하지 않은 생성 또는 시각적 처리/hyperframes-creative → references/house-style.md 및 references/video-composition.md
모든 모션, 애니메이션 또는 장면 전환/hyperframes-animation; 일치하는 규칙, 어댑터, 청사진 또는 전환 참조로 라우팅 따르기
storyboard: yes../hyperframes/references/storyboard-format.md 및 ../hyperframes/references/review-loop.md
모든 미디어 자산 또는 작업 (내레이션, BGM, SFX, 자막, 그레이딩 또는 변환 포함)/media-use; 프레임워크 재생 및 배치를 위해 /hyperframes-core → references/variables-and-media.md도 읽기
다중 장면 어셈블리../hyperframes/references/production-loop.md
flow: companion, 첫 번째 계획 전/hyperframes-creative → references/story-spine.md 및 references/house-style.md; 가장 가까운 장르 렌즈 및 전체 ../hyperframes/references/capability-menu.md — 천장 처리는 이것들로부터 설계되며 회상되지 않음
협업 기능 제공, 캡처, 비트 그리드, 생성형 비디오, 맵, 게시 또는 교차 워크플로 기능../hyperframes/references/capability-menu.md
디자인 사양이 존재하며, 최종 승인 전/hyperframes-creative → references/design-adherence.md

이러한 읽기를 회상으로 대체하지 마세요. 점진적 공개는 일치하는 참조가 실제로 로드된 경우에만 컨텍스트를 저장합니다.

5. 구성 실행

이 종속성 순서를 사용하세요. 입력이 없을 때만 단계를 건너뛰세요.

  1. 계획. 뷰어 아크, 구조, 리듬 및 지속 시간 드라이버를 명시하세요. 짧은 단일 장면에는 파일 하나를 사용하고, 세 개 이상의 하드 장면 컷 또는 재사용되는 장면에는 하위 구성을 사용하세요. 나레이션 아크를 위해 /hyperframes-creative → references/story-spine.md, 리듬을 위해 references/beat-direction.md, 구조를 위해 /hyperframes-core → references/composition-patterns.md를 읽으세요. 개방형 다중 장면 브리프의 경우, /hyperframes-creative → references/prompt-expansion.md를 통해 프롬프트를 확장하세요. 다중 장면 계획은 각 장면의 형태를 인용합니다: 하나가 맞을 경우 /hyperframes-animation → blueprints-index.md의 청사진 ID, 또는 맞는 것이 없을 경우 rules-index.md에서 구성하는 명명된 규칙 — 모션 이름은 해당 인덱스에서 가져오며 절대 발명하지 않습니다. 스토리 진실이 어떤 장면이 존재하는지 결정하고, 인용이 그 장면을 꾸밉니다. 명명된 모양을 직접 빌드하기 전에 라이브 카탈로그를 검색하세요: 브리프가 명명한 모든 룩, 효과, 처리 또는 전환("CRT 스캔라인", "글리치", "필름 그레인", "샤이머 스윕", "컨페티 버스트")에 대해 npx hyperframes catalog --query "<룩을 평범한 영어로>" --json을 실행하고 계획이 해당 룩을 어떻게 빌드할지 명명하기 전에 상위 결과를 읽으세요. 검색에는 아무것도 설치할 필요가 없습니다: 프로젝트, 사전 add 또는 계정이 필요 없습니다. 모든 디렉토리에서 호스팅된 전체 레지스트리(~400 블록 및 컴포넌트)의 순위를 매기므로, 빌드 중 사용자가 요청한 룩에도 적용됩니다. 계획이 명명한 블록은 3단계에서 설치됩니다. 검색 결과에 맞는 것이 없을 때만 룩을 직접 작성하세요. 다중 장면 계획은 디스패치 아티팩트로도 기록됩니다. STORYBOARD.md의 장면당 하나의 ## Frame N 블록 — status: outline, 선언된 src:, 청사진/규칙 인용 및 비트 텍스트 — storyboard: no인 경우에도 마찬가지입니다. 블록은 디스패치 단위이고, 스토리보드 시트는 검토 표면일 뿐입니다.
  2. 요청 시 계획 검토. storyboard: yes의 경우, 해당 블록에 대해 공유 검토 루프를 실행하세요. storyboard: no의 경우, 계획 일시 중지나 스케치 시트 없이 계속하세요. 계획 일시 중지가 발생하면…”},

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

AntlersSam/saas-launch-video-kit

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

AntlersSam/saas-launch-video-kit

Use when audio already placed in a HyperFrames composition needs to be mixed: fade-in/fade-out, crossfade, track gain or volume, volume automation, ducking, a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), automation envelopes drawn on a track's volume or any effect parameter, or one submix bus carrying a chain, a fader and an automation clock for several tracks at once (`<hf-audio-group>`). Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.

AntlersSam/saas-launch-video-kit

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, timeline, history, clean, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.

AntlersSam/saas-launch-video-kit

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

관련 스킬