플러그인 설치: 설정 또는 최신화 명령을 실행하기 전에, 이 스킬이 HyperFrames 플러그인 내부에 있을 경우 플러그인 실행 규칙을 따르십시오. 독립 실행형 설치의 경우 아래 업데이트 지침을 유지합니다.
HyperFrames 진입점
HyperFrames는 HTML로 비디오를 렌더링합니다. 구성(composition)은 DOM이 data-* 속성으로 타이밍을 선언하고, 애니메이션 런타임이 탐색 가능하며, 미디어 재생이 프레임워크에 의해 관리되는 HTML 파일입니다. 전체 작성 규약은 /hyperframes-core에 있습니다. 구성 HTML을 작성하기 전에 이를 읽으십시오. 브리프, 스토리보드, 리뷰, 프로덕션, 디스패치 및 프레임 워커 규약은 이 스킬의 references/에 있습니다.
1. 프로젝트 상태로 시작
일치하는 첫 번째 행을 적용하고, 더 낮은 상태 행은 평가하지 마십시오.
| 상태 | 작업 |
|---|---|
| 기존 Remotion 소스를 HyperFrames로 명시적으로 포팅 | references/routes/remotion-to-hyperframes.md를 읽은 다음 해당 워크플로우로 직접 라우팅하십시오. 의도 계층을 건너뜁니다. |
| 기존 HyperFrames 프로젝트에 대한 특정 작업: 검사, 진단, 검증, 미리보기, 렌더링, 게시 또는 배치 렌더링 | 해당 작업만 수행하십시오. 의도 및 워크플로우 라우팅을 건너뛰고, /hyperframes-cli 및 필요한 도메인 스킬을 로드하십시오. |
| 기존 프로젝트의 완성된 영화에 대한 질문, 보류, 구체적인 변경 사항이 없는 아이디어 또는 느낌 노트 | /hyperframes-studio § 0을 따르십시오. |
| 기존 프로젝트 내에서 새 영화 요청 | /hyperframes-studio § 5를 따르십시오. |
| 기존 프로젝트에 대한 특정 편집 | 편집을 수행하십시오. 의도 계층을 실행하지 마십시오. 프로젝트 타임라인(트랙, 클립, 시작, 종료, 재생 내용)을 확인하려면 index.html과 모든 하위 구성 파일을 읽는 대신 npx hyperframes timeline [--json]을 실행하십시오. |
BRIEF.md가 존재함 | workflow와 flow를 읽으십시오. 해당 워크플로우를 실행하십시오. flow: companion은 항상 /general-video에서 실행됩니다. 브리프 질문을 하지 마십시오. |
브리프는 없지만 hyperframes.json 또는 STORYBOARD.md가 존재함 | 프로젝트 파일과 기록된 기본 설정에서 재개하십시오. 기존 아티팩트에서 소유 워크플로우를 추론하십시오. 고유하게 결정할 수 없는 경우 라우팅 전용 질문을 하나만 하고, 의도 인터뷰를 실행하지 마십시오. |
| 새로 만들기 | 의도 계층(references/intent-interview.md)을 실행한 다음 § 2의 테이블을 사용하여 한 번 라우팅하십시오. |
기존 프로젝트를 편집할 때, 편집 내용을 프로젝트 히스토리(/hyperframes-cli, 당신의 차례의 프로젝트 히스토리)로 감싸십시오.
새 요청이 주제나 입력을 식별하지 못하는 경우, 라우팅 전에 비디오가 무엇에 관한 것인지 물어보십시오. 질문하기 전에 기본 설정과 레시피를 확인하십시오(references/intent-interview.md, 1단계). figma.com 입력 또는 명명된 레시피는 인테이크(intake)를 변경하지만 라우팅은 변경하지 않습니다. 인터뷰의 "Adapt orthogonal inputs" 섹션이 둘 다 처리합니다.
프로젝트 CLI를 최신 상태로 유지
스캐폴딩된 프로젝트는 렌더링이 재현 가능하도록 package.json 스크립트에 hyperframes@<version>을 고정합니다. 핀은 자체적으로 절대 업데이트되지 않으며, 고정된 이전 CLI 실행 시 이에 대한 경고가 출력되지 않습니다. 스크립트에 핀이 있는 프로젝트를 재개할 때, 렌더링에 영향을 주는 첫 번째 명령 전에 한 번 프로브(probe)하십시오:
npx hyperframes@latest upgrade --project . --check
프로브는 읽기 전용이며 핀을 최신 릴리스와 비교합니다. 명시적인 .을 유지하십시오. 이전 CLI 릴리스에서는 bare --project 뒤에 다른 플래그가 오면 해당 플래그를 디렉토리 값으로 소비합니다. 프로브가 프로젝트가 뒤처져 있다고 보고하거나, 이미 CLI 출력에 표시되는 경우(stderr 알림 This project pins hyperframes@… (latest …), 또는 고정된 스크립트의 --json 결과에 _meta.updateAvailable: true) 다음을 적용하십시오: npx hyperframes@latest upgrade --project ., 그런 다음 npx hyperframes check로 확인하십시오. 확인 통과는 프로젝트의 구성이 새 버전에서 여전히 유효함을 보장합니다(렌더링된 출력이 이전 핀과 프레임 단위로 동일하다는 의미가 아님). 따라서 성공적인 범프(bump)는 절대 조용하지 않습니다. 실행 요약에서 이전 버전과 새 버전의 이름을 명시하십시오. 아직 구성이 없는 프로젝트는 확인이 필요하지 않습니다. 확인에 실패하면 package.json 변경 사항을 되돌리고, 고정된 버전을 계속 사용하며, 프로젝트가 어떤 버전에 유지되는지와 그 이유를 보고하십시오. 신호를 사용자에게 전달하지 말고 신호에 따라 행동하십시오. 범프된 핀을 확인되지 않은 상태로 두지 마십시오.
2. 새로 만들기 라우팅
일치하는 첫 번째 행을 사용하십시오. 요청된 **산출물(deliverable)**과 일치시키고, 지나가며 언급된 단어나 파일 유형과 일치시키지 마십시오.
| 우선순위 | 요청 | 워크플로우 |
|---|---|---|
| 1 | 기존 Remotion 소스를 명시적으로 포팅 | /remotion-to-hyperframes |
| 2 | 프레젠테이션, 피치 덱 또는 탐색 가능한 대화형 덱 작성 | /slideshow |
| 3 | 변경하지 않고 기존 토킹헤드 영상에 일반 자막 또는 자막 추가 | /embedded-captions |
| 4 | 영상을 변경하지 않고 기존 토킹헤드, 인터뷰 또는 팟캐스트 영상에 디자인된 그래픽 오버레이 추가 | /talking-head-recut |
| 5 | 나레이션 또는 웹사이트 캡처 없이 음악 트랙에서 비트 동기화된 비디오 제작 | /music-to-video |
| 6 | 명시적으로 짧고, 나레이션이 없으며, 모션 중심의 단위 생성, 일반적으로 10초 미만 | /motion-graphics |
| 7 | PR 참조에서 GitHub 풀 리퀘스트 또는 코드 변경 사항 설명 | /pr-to-video |
| 8 | URL 또는 사이트별 브리프에서 웹사이트, 제품 사이트, 앱 또는 회사 마케팅 또는 전시 | /product-launch-video |
| 9 | 발명된 비주얼로 제품 또는 사이트 캡처 없이 주제, 기사 또는 노트 설명 | /faceless-explainer |
| 10 | 기타 모든 사용자 정의 비디오 또는 구성 | /general-video |
경로를 최종 확정하기 전에 references/routes/<workflow>.md를 읽으십시오. 각 경로당 하나의 작은 파일입니다: 표준 입력/출력/트리거 계약(지연 설치된 워크플로우 스킬이 있기 전에 사용 가능)과 해당 경로의 인터뷰 항목입니다. 후보가 계약을 충족하지 않으면 일치를 강제하는 대신 계속 라우팅하십시오. 일치하는 경로의 파일만 읽으십시오.
일반적인 모호성 해결
- 짧은 애니메이션 제목, 로고 스팅, 통계 히트, 차트 히트, 지도 히트 또는 독립형 하단 써드가 나레이션이 없고 모션이 메시지인 경우
/motion-graphics입니다. 정적 타이틀 카드, 나레이션이 있는 시퀀스, 더 긴 몽타주 또는 사용자 정의 루프는/general-video입니다. - 명시적으로 짧은 모션 그래픽은 소스 자료로 URL, 트윗, 기사 또는 스크린샷을 사용할 수 있습니다. "이 사이트로 비디오를 만들어 주세요"와 같은 일반적인 요청은
/product-launch-video입니다. - 자막이 있는 기존 영상은
/embedded-captions로 라우팅됩니다. 디자인된 정보 카드가 있는 영상은/talking-head-recut로 라우팅됩니다. 영상의 리타이밍, 재정렬, 재색칠, 재구성 또는 리믹스는 사용자 정의 편집이며/general-video로 폴백합니다. - 음악 파일은 비트 그리드가 작품을 구동할 때만
/music-to-video를 선택합니다. 배경 음악으로 사용되는 것은 주제 일치 경로를 재정의하지 않습니다. - "스토리보드를 원합니다"는 워크플로우가 아니라 리뷰 프로세스를 변경합니다. 다른 라우팅 신호가 없으면
/general-video를 사용하십시오. 확인된 스케치storyboard.html자체가 요청된 산출물일 수 있습니다. 리뷰 루프가 해당 중지 지점을 정의합니다. - 특화된 내러티브 워크플로우는 최대 약 3분을 지원하며 30-90초에 가장 강력합니다. 명확히 더 긴 작품은
/general-video로 라우팅하십시오. 길이가 명시적인 포트, 덱, 자막, 오버레이 또는 음악 기반 산출물을 재정의하지 않습니다.
3. 한 번 라우팅한 후 종료
새로 만들기의 경우 의도 계층(references/intent-interview.md)이 전체 대화(메모리, 트라이지, 피치 라운드, 필수 사항, 실행 형태, 핸드오프)를 실행하고 BRIEF.md 작성을 마지막으로 종료합니다. 브리프는 워크플로우가 읽는 유일한 라우팅 아티팩트입니다. 이후 어떤 작업도 이 스킬이나 인터뷰를 다시 열지 않습니다. "경로에 무엇이 필요했는지"에 대한 모든 후속 질문은 BRIEF.md에서 답하십시오.
4. 워크플로우 설치 및 진입
선택한 워크플로우를 읽기 전에, 워크플로우와 핵심 도메인 스킬을 설치하거나 최신화하십시오:
npx hyperframes skills update <workflow-name>
/ 없이 기본 이름을 사용하십시오. 명령이 실패하면 오류를 표시하고, 메모리에서 워크플로우를 재구성하지 마십시오. 설치의 다른 모든 것(코어 대 지연 분할, init이 최신화하는 내용, 진단, CI 옵트아웃, CLI 없는 폴백)은 references/skill-lifecycle.md에 있습니다.
5. 필요 시 도메인 스킬 로드
| 필요 사항 | 스킬 |
|---|---|
| 구성 구조, 타이밍 속성, 트랙, 변수, 결정론 | /hyperframes-core |
| 모션 규칙, 장면 청사진, 전환, 런타임 어댑터 | /hyperframes-animation |
탐색 가능한 GSAP, CSS, Anime.js, WAAPI, FLIP, 경로, 마스크, SVG, 3D 키프레임 또는 hyperframes keyframes 진단 | /hyperframes-keyframes |
| 디자인 사양, 컨셉, 팔레트, 타이포그래피, 나레이션, 비트 계획 | /hyperframes-creative |
| 이미지, 아이콘, 로고, 오디오, 자막, 그레이드, LUT, 재사용 가능한 미디어 | /media-use |
| 보이스오버 카브, 오디오 효과 체인, 자동화 엔벨로프 또는 여러 트랙에 걸친 하나의 체인/페이더(서브믹스 버스) | /hyperframes-audio |
| 초기화, 린트, 확인, 스냅샷, 비교, 배치 렌더, 스튜디오, 렌더, 게시 또는 진단 | /hyperframes-cli |
| 레지스트리 블록 및 구성 요소 | /hyperframes-registry |
| 손으로 만들기 전에 명명된 룩, 효과, 처리 또는 전환(CRT 스캔라인, 글리치, 필름 그레인, 샤머 스위프, 컨페티 버스트) | /hyperframes-registry |
| 재구성된 모션으로서의 Figma 자산, 토큰, 구성 요소 또는 스토리보드 프레임 | /figma |
크리에이터 편집 구문은 도메인 간 요청입니다. 일치하는 행에 명명된 모든 스킬을 로드하십시오:
| 크리에이터 요청 | 필요한 도메인 |
|---|---|
| "이 영상 잘라", 하드 컷, 트림, 스플라이스, 재정렬 또는 소스 범위 사용 |
...