hyperframes-core (HeyGen HyperFrames)

Name: hyperframes-core (HeyGen HyperFrames) review
Item: hyperframes-core (HeyGen HyperFrames)
Rating: 25.8
Author: Agent Skills

HTML로 렌더링 가능한 HyperFrames 컴포지션 하나를 만들고 구조, 타이밍, 미디어 재생, 검증을 다룹니다.

hyperframes-core: 스킬을 쓰면 Codex가 HyperFrames 컴포지션을 훨씬 자주 올바르게 만들고(대조군 4.1, 스킬 4.9, 한 문장 4.6) 토큰도 덜 씁니다(대조군의 0.48배). 다만 이 스킬은 HeyGen 저장소에서 제거되었습니다

상황에 따라안전

Codex CLI · gpt-6-astra

25.8 / 30

스킬 없이 대비 향상폭: +0.85 · 상황에 따라 · 18회 실행

상황에 따라: 향상폭 +0.85가 +1.0 미만. 추천이 되려면 총점 22/30, 출력 품질 3.5, 향상폭 +1.0이 필요합니다.

SOTA

통과

Codex로 테스트

커버 대상 Codex, Claude Code

Codex CLI 0.166 (SOTA 티어): 채점된 실행 18회. 여기서 통과하면 티어 규칙에 따라 Claude Code도 커버되지만, 두 번째 티어에 대해서는 아무것도 말해주지 않습니다.

점수

각 차원은 0~5점이며 여섯 차원을 더하면 30점 만점의 총점이 됩니다. 모든 차원에서 5가 가장 좋습니다. 비용 5는 저렴하고 빠름, 설치 5는 쉬움을 뜻합니다.

트리거 신뢰도: 5.0
스킬 없이 대비 향상폭: 2.9
출력 품질: 4.9
토큰 및 시간 비용: 5.0
설치 및 이식성: 4.0
안전성: 4.0

보안 리뷰

안전

정적 스캔: CRITICAL 0 / HIGH 0 / MEDIUM 21. 수동 검토: 설치 안전. 스캔이 깨끗하다고 해서 스킬이 안전하다는 증거는 아닙니다.

설치

npx skills@latest add heygen-com/hyperframes --skill hyperframes-core

출처

고정 커밋: 207c8a4daf6480d697f203784f1fd422727569e3

테스트일: 2026-11-02

테스트한 과제

3장면 설명 영상 — 12초 1920x1080 영상을 HyperFrames(GSAP 타임라인을 프레임 단위로 탐색해 HTML 페이지를 MP4로 렌더링하는 오픈소스 프레임워크이며, GSAP은 CDN script 태그로 불러옵니다)로 만드세요. 4초씩 세 장면: 타이틀 카드('Meet Orbit'), 불릿 목록…
깨진 컴포지션 수정 — 이 폴더의 index.html은 HyperFrames(GSAP 타임라인을 프레임 단위로 탐색해 HTML 페이지를 MP4로 렌더링하는 오픈소스 프레임워크이며, GSAP은 CDN script 태그로 불러옵니다) 컴포지션인데, 렌더링이 잘못됩니다(떨림, 잘못된 장면 타이밍, 장면 2가 보이지 않음, …)
하위 컴포지션으로서 재사용 가능한 하단 자막 바 — HyperFrames(GSAP 타임라인을 프레임 단위로 탐색해 HTML 페이지를 MP4로 렌더링하는 오픈소스 프레임워크이며, GSAP은 CDN script 태그로 불러옵니다)로 8초 1920x1080 영상을 만드세요. 재사용 가능한 하단 자막 바(왼쪽에서 미끄러져 들어오는 이름과 직책, 그리고…)

장점

스킬 없이보다 평균 점수를 4.09에서 4.94로 끌어올렸습니다(+0.85).
스킬 이름을 언급하지 않았는데도 적용되었습니다. 스킬 사용군 실행 6/6회에서 스킬 파일을 읽었습니다.
토큰 오버헤드 없음: 스킬 없이의 0.47배 토큰을 사용합니다.
자신의 규칙을 한 문장으로 요약한 프롬프트보다 +0.32 높은 점수를 냈습니다.
스킬 사용 시 높은 절대 품질: 4.94/5.

단점

테스트 참고: heygen-com/hyperframes 커밋 207c8a4에서 테스트했습니다. 이후 스킬이 저장소 HEAD에서 제거되어, 이 리뷰는 퇴출된 버전을 설명하며 현재 저장소에서는 설치 명령이 동작하지 않을 수 있습니다.
과제·그룹당 n=2이며, 약 1점 미만의 차이는 노이즈입니다.

리뷰

Codex CLI 0.166 (gpt-6-astra, low reasoning)을 전용 Windows 테스트 PC에서 실행했고, 실행마다 새 임시 프로젝트와 임시 HOME/TMPDIR/캐시를 사용했습니다. 스킬 설치(스킬 사용군), 미설치(대조군), 미설치 상태에서 스킬의 핵심 요구사항만 한 문장으로 압축해 프롬프트에 덧붙인 경우(한 문장 프롬프트군)로 나눴으며, 과제·그룹당 2회씩 실행했습니다. 네트워크는 끄고 /tmp 쓰기는 차단했습니다. 프롬프트에는 스킬 이름을 언급하지 않았습니다(아래에 적은 경우 제외). 프롬프트에서는 HyperFrames를 'GSAP 타임라인을 프레임 단위로 탐색해 HTML 페이지를 MP4로 렌더링하는 오픈소스 프레임워크'라고만 설명하고, 계약 세부 사항은 넣지 않았습니다. 과제는 12초 3장면 설명 영상 제작, 깨진 컴포지션 수정(떨림, 잘못된 타이밍), 재사용 가능한 하단 자막 바를 하위 컴포지션으로 만들기입니다. 한 문장 프롬프트군은 전체 컴포지션 계약을 한 문단으로 제시합니다.

3개 그룹 비교

그룹	평균 점수 (0-5)	실행당 토큰
스킬 없음	4.09	239k
한 문장 프롬프트	4.62	160k
스킬 사용	4.94	114k

Codex CLI에서 18회 실행해 측정했고, LLM 심사 없이 규칙 기반 검사로 채점했습니다. 총점 25.8 / 30, 판정 상황에 따라.

참고: heygen-com/hyperframes의 커밋 207c8a4에서 테스트했습니다. 이후 저장소 HEAD에서 스킬이 제거되어, 이 리뷰는 더 이상 제공되지 않는 버전을 설명하며 설치 명령이 현재 저장소에서는 작동하지 않을 수 있습니다.

판정: 상황에 따라 다름 (25.8 / 30). 출처: heygen-com/hyperframes, skills/hyperframes-core, 커밋 207c8a4에 고정. 설치: npx skills@latest add heygen-com/hyperframes --skill hyperframes-core. 라이선스: Apache-2.0(저장소 LICENSE).

무엇인가

heygen-com/hyperframes의 hyperframes-core 스킬로, 커밋 207c8a4에서 테스트했습니다(이후 저장소 HEAD에서 스킬이 제거되어, 여기서는 은퇴한 버전을 설명합니다). 이 스킬은 HyperFrames 컴포지션 계약을 문서화합니다. data-composition-id/width/height/duration이 있는 루트 div, data-start/data-duration과 class=clip이 있는 시간 지정 클립, window.__timelines[root id]에 등록하는 일시정지된 GSAP 타임라인 하나, 렌더 시 결정성 규칙, 별도 파일에 두는 하위 컴포지션을 다룹니다.

테스트 방법

전용 Windows 테스트 PC에서 Codex CLI 0.166(gpt-6-astra, 낮은 추론)을 실행했고, 실행마다 새 임시 프로젝트와 임시 HOME/TMPDIR/캐시를 사용했습니다. 스킬을 설치한 경우(스킬 사용군), 설치하지 않은 경우(대조군), 스킬 없이 스킬의 핵심 요구사항을 한 문장으로 압축해 프롬프트 끝에 붙인 경우(한 문장 프롬프트군)로 나눴고, 작업마다 각 군 2회씩 실행했습니다. 네트워크는 끄고 /tmp 쓰기는 차단했습니다. 프롬프트에는 스킬 이름을 전혀 언급하지 않았습니다(아래에 적은 표현은 예외).

프롬프트에서는 HyperFrames를 'GSAP 타임라인을 프레임 단위로 탐색해 HTML 페이지를 MP4로 렌더링하는 오픈소스 프레임워크'라고만 설명하고 계약 세부 사항은 주지 않았습니다. 작업은 12초짜리 3장면 설명 영상 제작, 망가진 컴포지션 수정(떨림, 잘못된 타이밍), 재사용 가능한 로어서드를 하위 컴포지션으로 제작하는 것입니다. 한 문장 프롬프트는 전체 컴포지션 계약을 한 문단으로 제시합니다.

3장면 설명 영상 — HyperFrames(HTML 페이지를 GSAP 타임라인을 프레임 단위로 탐색해 MP4로 렌더링하는 오픈소스 프레임워크. GSAP은 CDN 스크립트 태그로 불러옴)로 12초짜리 1920x1080 영상을 만드세요. 각 4초인 장면 세 개: 타이틀 카드('Meet Orbit'), 불릿 목록…
망가진 컴포지션 수정 — 이 폴더의 index.html은 HyperFrames(HTML 페이지를 GSAP 타임라인을 프레임 단위로 탐색해 MP4로 렌더링하는 오픈소스 프레임워크. GSAP은 CDN 스크립트 태그로 불러옴) 컴포지션인데 잘못 렌더링됩니다(떨림, 장면 타이밍 오류, 장면 2가 보이지 않음…
재사용 가능한 로어서드를 하위 컴포지션으로 — HyperFrames(HTML 페이지를 GSAP 타임라인을 프레임 단위로 탐색해 MP4로 렌더링하는 오픈소스 프레임워크. GSAP은 CDN 스크립트 태그로 불러옴)로 8초, 1920x1080 영상을 만드세요. 재사용 가능한 로어서드(왼쪽에서 슬라이드 인하는 이름과 직함…

채점은 프로그램 방식(숨은 테스트, 심어 둔 문제 탐지, 제약 조건 검사, 해당되는 경우 렌더링+OCR)으로 실행당 0~5점입니다. 점수를 결정한 LLM 심사자는 없습니다.

결과

세 번째 군에 전달한 한 문장 프롬프트: "HyperFrames 컴포지션 계약: <body> 안에 독립형 루트 <div data-composition-id data-width data-height data-duration>; 시간 지정 요소는 data-start와 data-duration을 가짐(class=clip); gsap.timeline({paused:true}) 하나를 만들어 window.__timelines['<root id>']에 등록; 렌더 시 결정성: Math.random/Date.now/타이머/rAF 금지, repeat:-1 금지, 클립의 display/visibility/autoAlpha를 절대 트윈하지 말 것; 하위 컴포지션은 data-composition-src가 있는 별도 파일에 두고 콘텐츠는 <template>로 감싸며, 호스트 id = 내부 id = 타임라인 키."

작업	대조군 점수	한 문장 프롬프트	스킬 사용	대조군 토큰	한 문장 프롬프트 토큰	스킬 사용 토큰	스킬 읽음
t1-explainer	3.33	5.0	5.0	136k	82k	98k	2/2
t2-fix	3.95	3.86	4.82	377k	100k	128k	2/2
t3-sub	5.0	5.0	5.0	203k	298k	114k	2/2

평균 점수: 스킬 없음 4.09, 스킬 사용 4.94(차이 +0.85). 실행당 토큰: 239k 대 114k(0.47배), 시간: 107초 대 79초. 한 문장 프롬프트 군: 4.62(한 문장 프롬프트 대비 스킬의 이득 +0.32, 스킬 없음 대비 한 문장 프롬프트의 이득 +0.53). 한 문장 프롬프트의 실행당 토큰은 160k이므로 스킬은 한 문장 프롬프트의 0.71배 비용을 씁니다.

무슨 일이 있었나

대조군 4.09, 스킬 4.94, 한 문장 4.62(각 n=6). 가장 큰 차이는 설명 영상입니다. 대조군은 2/2회 실행에서 클립에 visibility/display 트윈이나 autoAlpha를 썼고, 2/2회 모두 window.__timelines에 타임라인을 등록하지 않았습니다. 스킬 2회와 한 문장 2회는 모두 깨끗했습니다(5.0).
수정 작업: 스킬 4.82, 대조군 3.95, 한 문장 3.86. 대조군은 2/2회 모두 루트에 duration을 넣지 않고 px 크기를 하드코딩했으며, 루트의 duration이 마지막 클립을 덮지 못했습니다. 한 문장 실행은 px 크기를 하드코딩했고, 한 실행은 타임라인을 등록하지 않았습니다.
하위 컴포지션 작업: 세 군 모두 5.0. 재사용 컴포넌트를 요청하면 기본 모델도 이미 data-composition-src와 template 래퍼를 처리합니다.
토큰: 실행당 스킬 114k, 한 문장 160k, 대조군 239k. 계약이 없으면 대조군은 형식을 파악하느라 훨씬 많은 단계를 씁니다(실행당 명령 13개 대 9개). 스킬은 아무 지침도 없을 때보다 오히려 저렴합니다.
'모든 시간 지정 요소에 duration이 있음' 검사는 스킬 실행을 포함해 3회 실행에서 실패합니다. 수정 작업 파일에서 클립을 2개만 세며, 모든 군에 같은 규칙입니다.

항목별 점수

항목	점수	근거
1. 출력 품질	4.94	스킬 사용 시 평균 4.94/5(프로그램 검사, 작업별 표 참조).
2. 스킬 없음 대비 향상	2.85	스킬 없음 4.09 대비 +0.85점(작업당 n=2, 약 1점 미만은 노이즈).
3. 트리거	5.0	스킬 사용군 6/6회 실행에서 스킬 파일을 읽었습니다.
4. 지침 이식성	4	SKILL.md와 참고 자료. HyperFrames CLI에 특화된 내용입니다.
5. 효율성	5	토큰 0.47배(실행당 114k 대 239k), 시간 0.74배(79초 대 107초).
6. 안전성·위생	4	산문과 규칙만 포함합니다. security.md 참조.

이 테스트의 한계

검사는 정적입니다. HTML 구조, GSAP 호출, 타임라인 등록을 파싱했지만 프레임은 렌더링하지 않았습니다(hyperframes CLI, Chrome, FFmpeg를 실행하지 않음).
이 스킬은 HEAD에 더 이상 없어서 커밋 207c8a4에서 테스트했습니다. 이 리뷰의 설치 명령은 현재 저장소에서는 작동하지 않을 수 있습니다.
셀당 n=2. 대조군의 토큰 수는 몇 번의 매우 긴 실행(최대 440k) 때문에 부풀려져 있습니다.
프롬프트는 HyperFrames를 한 문장으로 설명합니다. 웹 접근이 가능한 에이전트라면 문서를 찾아볼 수 있지만 네트워크는 꺼져 있었습니다.
작업·군당 n = 2: 약 1점 미만의 차이는 노이즈입니다.
규칙 기반 채점은 검사가 볼 수 있는 것만 측정합니다. 취향이나 결과가 최선인지는 판단할 수 없습니다.

보안

security.md를 참조하세요. 스캔: CRITICAL 0 / HIGH 0 / MEDIUM 21. 판정: 실행해도 안전(네트워크 차단 샌드박스). 깨끗한 스캔 결과가 스킬의 안전성을 증명하지는 않습니다.

결론

형식을 모르는 상황에서 이 스킬은 계약 실수 가능성을 대략 절반으로 줄이고 토큰도 아낍니다. 계약을 한 문단으로 적은 프롬프트만으로도 이점의 대부분을 되찾습니다. 스킬이 더 이상 공급사 저장소에 없으므로, 이 결과는 그 이전 버전에 대한 기록으로 보세요.

트랜스크립트

실행 로그: hyperframes-core (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.)
열: 작업, 그룹-회차, 점수(0-5), 토큰, 초, 통과한 검사, 에이전트가 연 스킬 파일.

t1-explainer control-1: 점수 3.1, 토큰 140793, 초 87.3, 검사 7/11, 연 파일 없음
t1-explainer control-2: 점수 3.57, 토큰 132979, 초 80.3, 검사 8/11, 연 파일 없음
t1-explainer oneliner-1: 점수 5.0, 토큰 90890, 초 75.8, 검사 11/11, 연 파일 없음
t1-explainer oneliner-2: 점수 5.0, 토큰 73311, 초 72.9, 검사 11/11, 연 파일 없음
t1-explainer treatment-1: 점수 5.0, 토큰 111517, 초 90.6, 검사 11/11, 연 파일 hyperframes-core
t1-explainer treatment-2: 점수 5.0, 토큰 84676, 초 102.2, 검사 11/11, 연 파일 hyperframes-core
t2-fix control-1: 점수 3.95, 토큰 314272, 초 165.7, 검사 7/10, 연 파일 없음
t2-fix control-2: 점수 3.95, 토큰 440614, 초 142.2, 검사 7/10, 연 파일 없음
t2-fix oneliner-1: 점수 3.77, 토큰 108753, 초 81.4, 검사 7/10, 연 파일 없음

18회 실행, 아티팩트 3개

샘플 출력

SOTA · With the skill: index.html (t1-explainer, run 1, Codex)

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=1920, height=1080"> <title>Meet Orbit — 12-second film</title> <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> <style> * { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; } body { background: #f3f0e7; color: #202d29; font-family: system-ui, sans-serif; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #f3f0e7; } .brand { position: absolute; top: 66px; left: 100px; display: flex; align-items: center; gap: 16px; font-size: 32px; font-weight: 750; letter-spacing: -1px; } .brand-mark { width: 30px; height: 30px; border: 8px solid #e65932; border-radius: 50%; } .edition { position: absolute; top: 77px; right: 100px; font-size: 18px; letter-spacing: 3px; } .clip { position: absolute; inset: 0; } .scene { width: 100%; height: 100%; padding: 190px 100px 150px; display: flex; align-items: center; gap: 65px; } .copy { flex: 1; position: relative; z-index: 2; } .eyebrow { margin: 0 0 30px; font-size: 21px; font-weight: 650; letter-spacing: 4px; text-transform: uppercase; color: #52635b; } h1, h2, p { margin: 0; } h1 { font-size: 150px; line-height: 1.05; letter-spacing: -10px; font-weight: 650; } h2 { font-size: 86px; line-height: 1.07; letter-spacing: -5px; font-weight: 650; } .subtitle { margin-top: 34px; font-size: 31px; line-height: 1.5; color: #52635b; } .art { width: 760px; height: 650px; flex: none; } .orbit-svg { display: block; width: 100%; height: 100%; overflow: visible; } .footer { position: absolute; bottom: 65px; left: 100px; right: 100px; display: flex; justify-content: space-between; font-size: 18px; letter-spacing: 2px; color: #52635b; } .progress-track { position: absolute; bottom: 0; left: 0; right: 0; height: 7px; background: #deded3; } .progress { width: 100%; height: 100%; background: #e65932; transform-origin: left center; } .features-copy { max-width: 650px; } .features { list-style: none; margin: 0; padding: 0; width: 930px; } .feature { display: flex; align-items: center; gap: 30px; padding: 39px 0; border-bottom: 2px solid #ced3c9; font-size: 43px; font-weight: 550; letter-spacing: -1.5px; } .feature:first-child { border-top: 2px solid #ced3c9; } .number { display: grid; place-items: center; width: 66px; height: 66px; flex: none; border-radius: 50%; background: #202d29; color: #f3f0e7; font-size: 22px; letter-spacing: 0; } .feature-dot { margin-left: auto; color: #e65932; font-size: 40px; } .closing { justify-content: center; text-align: center; } .closing-copy { width: 1300px; } .closing h2 { font-size: 119px; letter-spacing: -7px; } .cta { display: inline-flex; align-items: center; justify-content: center; gap: 50px; margin-top: 48px; padding: 26px 42px; border-radius: 100px; background: #e65932; color: #17251f; font-size: 32px; font-weight: 650; } .cta-arrow { font-size: 40px; line-height: 1; } .closing-icon { display: block; width: 84px; height: 84px; margin: 0 auto 38px; border: 19px solid [... excerpt: first 3200 of 7731 characters]

Pro 보기