트리거 조건

HTML 기반 영상·모션·타이틀카드·오버레이·자막·씬 전환·오디오 반응 비주얼 제작 요청 시 발동한다. HTML이 진실원천(data-* 타이밍 + GSAP 타임라인 + CSS)인 영상 컴포지션 작업 전반에 적용한다.

실행 지시

• 디자인 확정: design.md가 있으면 그 값을 그대로 사용, 없으면 visual-styles/house-style 팔레트에서 선택. 시각 아이덴티티 확정 전 컴포지션 HTML 작성 금지(HARD-GATE)
• 프롬프트 확장 → 계획(내러티브·구조·리듬·타이밍) → 레이아웃 우선(각 씬의 히어로 프레임을 정적 CSS로 먼저 구축) → gsap.from() 입장 애니메이션 추가, 퇴장은 마지막 씬만 허용
• 타임라인 계약: 모든 타임라인 { paused: true } + window.__timelines["<composition-id>"] 등록, 길이는 data-duration 기준
• 렌더링: 헤드리스 크로미엄 프레임 캡처 + ffmpeg 인코딩(로컬 실행). QA는 npx hyperframes lint / validate / inspect와 scripts/animation-map.mjs로 검증
• 첨부 파일(스킬 패키지 ZIP)을 해제해 references/·scripts/ 문서를 필요 시 로드해 사용
• 상세 절차는 아래 원문을 따른다.

주의 사항/한계

• 결정론 필수: Math.random()·Date.now()·비동기 타임라인 구축·repeat: -1 금지
• 씬 전환 필수(점프컷 금지), 마지막 씬 외 퇴장 애니메이션 금지
• 미디어 재생은 프레임워크 소유 — play()/pause()/seek 직접 호출 금지
• WCAG 콘트라스트·오버플로 경고는 기존 팔레트 내에서 수정 후 재검증
• 자막 자동 추출은 이 스킬 범위에서 제외

원문 (이식 원본)

name: hyperframes

description: Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow including local rendering via headless Chromium frame capture + ffmpeg encoding (no CLI install, no network required). For asset preprocessing commands (tts, transcribe, remove-background) see the hyperframes-media skill.