Communitygithub.com

media-use

HyperFrames 프로젝트의 모든 미디어 요구를 해결하는 단일 스킬: BGM, SFX, 이미지, 아이콘, 브랜드 로고, 음성, 컬러 그레이딩, LUT를 로컬 파일 또는 붙여넣기 가능한 블록으로 해결하고, TTS/음악/이미지 모델로 생성하며, 음성 해설, 자막, 배경 제거를 수행하고, 미디어를 자르거나 변형하며, 프로젝트 간 에셋을 재사용합니다.

media-use란 무엇인가요?

이 스킬은 HyperFrames 프레임워크 내에서 모든 미디어 관련 작업을 처리하는 통합 운영체제 역할을 합니다. 하나의 명령어 `resolve`로 BGM, SFX, 이미지, 아이콘, 브랜드 로고, 음성(TTS), 컬러 그레이딩, LUT 등 모든 미디어 타입을 검색하거나 생성하여 로컬 파일로 고정(freeze)할 수 있습니다. HeyGen CLI를 설치하고 인증하면 즉시 사용 가능하며, `--doctor` 플래그로 환경을 검증할 수 있습니다. 또한, 시각적 피드백(어둡다, 평평하다 등)을 받으면 `media-treatments` 참조를 통해 적절한 스타일 보정을 제안하고, 텍스트가 있는 장면에는 음성 해설을 추가하거나 전환 효과음을 제안하는 등 능동적으로 미디어 기회를 발굴합니다. 컬러 그레이딩은 CSS/SVG 오버레이를 사용하지 않고 정식 Studio 컨트롤과 셰이더 경로를 통해 처리됩니다.

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

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

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

문서

media-use은(는) 무엇을 하나요?

HyperFrames를 위한 미디어 OS: 해결(resolve) · 생성(generate) · 조작(operate) · 기억(remember) — 모든 미디어 타입, 하나의 스킬, 컨텍스트 노이즈 제로.

첫 실행: heygen CLI를 설치하고 로그인(무료 사용 경로)한 후 node <SKILL_DIR>/scripts/resolve.mjs --doctor로 확인합니다. 설정 및 제공자: references/setup-providers.md.

해결(Resolve) — 하나의 동사

node <SKILL_DIR>/scripts/resolve.mjs --type <type> --intent "<설명>" --project <dir>

한 줄을 반환합니다: resolved <id> → <path> (<type>, <metadata>). 모든 검색 노이즈는 디스크에 남습니다.

타입한 줄 의도
bgm배경 음악 (HeyGen 카탈로그, 1만 개 이상 트랙)
sfx음향 효과 (번들 19개 파일 라이브러리 + 카탈로그)
image사진, 배경 (HeyGen 에셋 검색, 7만 5천 개 이상 벡터)
icon아이콘, 기호 (투명)
logo공식 브랜드 마크 (svgl → simple-icons → GitHub 아바타 → favicon; 절대 다시 그리지 않음)
voiceTTS 음성 해설 (HeyGen 무료 사용 경로; 선택적 로컬 Kokoro)
grade측정된 보정 후보; 광범위한 다듬기/스타일화는 미디어 처리(Media Treatments) 참조
lut사용자 제공 또는 명시적으로 선택된 재사용 가능한 검증된 .cube 파일

새로 해결하기 전에 --candidates로 재사용 가능한 후보를 나열하고 직접 적합성을 판단하세요. 재사용 규칙, 모든 플래그, 수집(--from), 채택(adopt)에 대한 내용은 references/resolve.md를 참조하세요.

광범위한 시각적 피드백을 미디어 의도로 처리

사용자가 사진 미디어의 수정, 다듬기, 스타일화, 가리기, 강조, 또는 공개를 명시적으로 요청할 때, 그들이 컬러 그레이딩이나 효과 이름을 언급하지 않더라도 references/media-treatments.md를 읽으세요. 실제 <img>/<video>를 검사하고, 하나의 기본 의도를 선택한 후, 결정론적 지속성과 검증을 사용하세요. 선택적으로 테스트된 시드로 일치하는 레시피를 사용하거나 hyperframes media-treatment --capabilities --json을 검사한 후 관련 있는 하나의 패밀리/효과를 --capability <id>로 요청하고 정식 컨트롤에서 사용자 정의 처리를 조합하세요. 일반적인 저작을 위해 --all을 로드하지 마세요. 하나의 처리는 보정, 프리셋, 마무리, 호환되는 셰이더 효과, 지원되는 키프레임, 선택적 Registry 오버레이를 구성할 수 있습니다. 소스에서 정당화된 범위 내의 튜닝과 호환 가능한 부분만 추가하고, 결과를 더 정교하게 보이게 하기 위한 효과는 절대 추가하지 마세요. 최종 결합 페이로드를 hyperframes media-treatment로 지속(persist)시키세요.

점진적으로 확대되는 하나의 워크플로우를 사용하세요. 비디오의 경우, 프레임을 개별적으로 읽지 말고 라벨이 지정된 이른/중간/늦은 접촉 시트(contact sheet) 하나를 검사하세요. 일반적인 보정이나 다듬기를 위해 후보 하나를 적용하고 후-시트(after-sheet) 하나를 검사하세요. 결과가 모호하거나, 시간적이거나, 스타일화되었거나, LUT 기반이거나, HDR/LOG에 민감하거나, 비공개이거나, 브랜드에 중요한 경우에만 개별 프레임이나 움직이는 드래프트 증거로 확대하세요.

일반적인 보정이나 다듬기의 경우, 최종 처리의 프리셋/조정 JSON만 지속시키세요. 노출, 그림자, 대비, 따뜻함을 인코딩하기 위해 .cube LUT를 생성하지 마세요. 사용자가 LUT를 제공하거나 선택한 처리가 명시적으로 LUT를 소유한 경우에만 LUT를 사용하세요. resolve --type grade --for ... --analyze는 측정 증거일 뿐, 선택한 처리를 생성된 LUT로 대체할 권한이 아닙니다. 지원되는 비네트, 그레인, 블러, 픽셀화, 색상, 또는 처리 효과를 CSS/SVG 오버레이로 재생성하지 마세요. 이는 Studio 컨트롤과 정식 미리보기/렌더링 셰이더 경로를 우회합니다.

능동적으로 행동 — 미디어 기회 스캔 실행

사용자는 일반적으로 어떤 미디어가 작품을 향상시킬지 알 수 없습니다. 당신은 알 수 있습니다. 구성을 작성하거나 검토할 때, 하나의 근거 있는 스캔을 수행하고 한 번만 질문하세요. — 조용히 추가하지 말고, 에셋당 잔소리하지 마세요.

구체적인 신호가 있을 때만 기회를 제시하세요:

감지된 신호제안
화면상의 텍스트 / 음성 해설이 없는 스크립트TTS 음성 해설 (오디오 엔진)
이모지 또는 아이콘으로 스타일링된 <div>실제 icon 해결
플레이스홀더, 작거나, 업스케일된 것으로 보이는 이미지더 나은 image (및/또는 업스케일 — references/operations.md 참조)
소리가 없는 하드 장면 컷 / 전환전환 sfx
약 10초 이상 음악 배경이 없는 조각bgm
과소/과다 노출 또는 색조가 있는 것으로 보이는 푸티지보정 그레이드 ( hyperframes media-treatment --selector '#hero' --analyze --json으로 검사)
시각적으로 평평하거나 주제와 동떨어진 사진 미디어하나의 특정 소스에 적합한 프리셋 또는 사용자 정의 처리, 의도된 대상을 명시함
정적으로 느껴지는 의미 있는 미디어 등장/공개하나의 지원되는 시크-세이프(seek-safe) 처리 애니메이션; 요청이 프리셋도 정당화하지 않는 한 색상 유지

이것이 도움이 되고 잔소리가 되지 않도록 하는 규칙: 근거 있고, 일반적이지 않음(신호 없음 → 제안 없음); 의견을 제시하고 구체적임(기본값이 선택된 특정 수정안 제안 — 사용자가 모두 / 일부 / 없음 승인); 프로젝트당 한 번(하나로 통합된 요청; "그냥 둬" 존중); 제안하고, 절대 조용히 변경하지 않음(특히 컬러 그레이딩: 제안하고 미리보기 — 회색-세계 "보정"은 의도된 석양이나 네온 룩을 망칩니다).

찾아보기 — 작업에 필요한 파일만 읽기

작업읽을 파일
해결 / 재사용 / 채택 / 수집, 플래그, 캐스케이드, 인벤토리references/resolve.md
컬러 그레이딩, LUT, 스마트 그레이드(--for), 그레이드-비교references/grading.md
음성 해설 / TTS, 음악, SFX, 자막, 전사 (오디오 엔진)references/audio.md
기존 미디어 자르기 / 프레임 변경 / 변형, 정밀 오류 확산, HEVCreferences/operations.md
소스 인식 창의적 처리, 실시간 효과, 오버레이, 공개references/media-treatments.md
설치 + 인증, 제공자 테이블, RAM 사다리, --local-only, --providerreferences/setup-providers.md
기억된 선호사항 + 고정된 레시피 (사용자 메모리)references/memory.md
소유권 매트릭스, 사용 통계, 텔레메트리, 개인정보 (관리자 대상)references/meta.md

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.

general-video

>

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.

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

관련 스킬