Communitygithub.com

일반 비디오

Hyperframes 프레임워크를 기반으로 한 비디오 제작 워크플로우입니다. 미디어 어댑터, 프로젝트 상태 해석, 협업 또는 자동화 플로우, 그리고 체계적인 컴포지션 실행 단계를 안내합니다.

일반 비디오란 무엇인가요?

이 스킬은 Hyperframes 프레임워크를 사용하여 비디오를 제작하는 포괄적인 워크플로우를 제공합니다. 사용자는 명확한 단계별 지침을 통해 미디어 어댑터 설정, 프로젝트 상태 파악, 협업(Companion) 또는 자동화(Automation) 플로우 선택, 그리고 체계적인 컴포지션 실행을 수행할 수 있습니다. 이 스킬은 Figma 및 미디어 소스와의 통합, 프로젝트 초기화 및 설정, 그리고 체계적인 의존성 해결 및 씬 제작 과정을 지원합니다. 특히, 협업 플로우에서는 '디렉터'로서 높은 수준의 기획과 디자인을 제공하고, 자동화 플로우에서는 효율적인 경로 선택과 실행을 강조합니다. 또한, 각 단계별로 필요한 참조 문서를 로드하여 품질과 일관성을 유지하도록 설계되었습니다.

지원 대상~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/general-video

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

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

문서

일반 비디오은(는) 무엇을 하나요?

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

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-core/references/brief-contract.md의 게이트를 적용하세요: 협업 모드는 로그인 또는 명시적인 오프라인 선택을 기다립니다. 자율 모드는 상태를 알리고 사용 가능한 오프라인 공급자를 통해 계속 진행합니다. 필수 기능을 충족할 수 있는 오프라인 공급자가 없으면 차단기를 표시하세요. 로컬 채택만으로는 인증 게이트가 필요하지 않습니다.
  • Figma: 입력이 figma.com URL인 경우, 먼저 /figma를 실행하세요. 내보낸 자산, 토큰, 컴포넌트 또는 스토리보드 프레임에서 빌드하세요. 원시 Figma 커넥터 호출을 사용하지 마세요. SVG 살균, 미디어 출처 및 브랜드 토큰 바인딩을 건너뛰기 때문입니다.

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

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

첫 번째 일치하는 행을 적용하고, 아래 상태 행은 평가하지 마세요:

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

새 프로젝트의 경우, 브리핑에서 케밥-케이스 디렉토리 이름을 선택하고 브리핑을 작성하기 전에 스캐폴딩하세요:

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

그런 다음 ../hyperframes-core/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-core/references/brief-contract.md의 정식 용어만 사용하세요:

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

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

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

기존 푸티지의 하드 컷, 트림, 스플라이스 또는 재정렬의 경우, 동일한 비디오 소스를 여러 클립 요소로 복제하세요. 각 복사본에서 data-media-start와 data-duration으로 소스 범위를 설정한 다음, data-start로 제작된 배치/순서를 설정하세요. 별도로 제작된 오디오는 일치하는 <audio> 요소에서 동일한 클립 범위와 타이밍을 따릅니다. /hyperframes-core가 이 시간 편집을 소유합니다. /hyperframes-keyframes는 줌, 펀치, 팬, 자르기, 마스크 또는 내부 래퍼의 clip-path와 같은 시각적 속성 애니메이션에만 사용하세요. ../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-core/references/storyboard-format.md 및 ../hyperframes-core/references/review-loop.md
모든 미디어 자산 또는 작업(내레이션, BGM, SFX, 캡션, 그레이딩 또는 변환 포함)/media-use; 프레임워크 재생 및 배치를 위해 /hyperframes-core → references/variables-and-media.md도 읽기
다중 장면 어셈블리../hyperframes-core/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를 통해 프롬프트를 확장하세요. 다중 장면 계획은 각 장면의 형태를 인용합니다: 적합한 청사진 ID는 /hyperframes-animation → blueprints-index.md, 적합한 청사진이 없으면 rules-index.md에서 구성하는 명명된 규칙 — 모션 이름은 해당 인덱스에서 가져오며, 절대 생성되지 않습니다. 스토리 진실이 어떤 장면이 존재하는지 결정합니다. 인용은 그 장면을 꾸밉니다. 다중 장면 계획은 또한 디스패치 아티팩트로 기록됩니다: STORYBOARD.md에 장면당 하나의 ## Frame N 블록 — status: outline, 선언된 src:, 청사진/규칙 인용, 비트 텍스트 — storyboard: no인 경우에도 마찬가지입니다. 블록은 디스패치 단위입니다. 보드는 검토 표면일 뿐입니다.

  2. 요청 시 계획 검토. storyboard: yes의 경우, 해당 블록에 대해 공유 검토 루프를 실행하세요. storyboard: no의 경우, 보드를 열지 않고 계속 진행하세요. 계획 일시 중지가 발생한 경우, 하위 에이전트 위임 권한(코덱스가 4단계 디스패치에 필요)을 해당 일시 중지에 접어 나중에 다시 중지하지 마세요.

  3. 의존성 해결. 병렬 작업 전에 레지스트리 블록을 설치하세요. 사용자 자산을 준비하고, 기존 미디어를 채택하며, 브리핑에 필요한 것만 해결하세요. 타이밍이 지속 시간을 결정할 때 오디오를 일찍 시작하세요.

  4. 장면 빌드. 짧은 단일 장면 작품의 경우, 모션을 추가하기 전에 가장 눈에 띄는 순간에 장면을 구현하세요(존재하는 경우 확인된 와이어프레임이 그 최종 상태이며 다시 그려서는 안 됨). 그런 다음 인용된 청사진 또는 규칙에서 애니메이션을 적용하세요. 모션을 작성하기 전에 전체 레시피 본문(/hyperframes-animation → blueprints/<id>.md, rules/<id>.md)을 읽으세요.

    디스패치는 규모가 커야만 비용을 정당화합니다. 패킷 작성 및 새 작업자 컨텍스트 워밍업은 실제 시간과 토큰을 소모합니다. 최대 ~6개의 짧은 장면으로 구성된 필름은 이 컨텍스트에서 인라인으로, 하나씩, 더 빠르게 빌드됩니다(측정 결과: 5개의 짧은 장면 ≈ 9

…

[번역을 위해 잘림]

Individual skills in this repo

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

embedded-captions

>

faceless-explainer

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

figma

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

hyperframes

>

hyperframes-animation

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

hyperframes-audio

>

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

jasonfast123/hyperframes-skills

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

관련 스킬