Agent Skills

모든 스킬

hyperframes-animation (HeyGen HyperFrames)

HyperFrames 컴포지션의 타이밍과 애니메이션 규칙을 정의합니다: data-* 속성, clip, 트랙, 하위 컴포지션.

hyperframes-animation: HyperFrames 애니메이션 컴포지션이 렌더 계약을 따르도록 만들지만(대조군 3.8, 스킬 4.9, 한 문장 4.5) 대조군 토큰의 1.05배를 쓰며, 이 스킬은 HeyGen 저장소에서 제거되었습니다

추천주의

Codex CLI · gpt-6-astra

26.1 / 30

스킬 없이 대비 향상폭: +1.16 · 추천 · 18회 실행

추천: 총점 26.1/30이 22점 이상, 출력 품질 4.9가 3.5 이상, 향상폭 +1.16가 +1.0 이상입니다.

SOTA

통과

Codex로 테스트

커버 대상 Codex, Claude Code

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

점수

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

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

보안 리뷰

주의

정적 스캔: CRITICAL 17 / HIGH 17 / MEDIUM 148. 수동 검토: 네트워크가 차단된 샌드박스에서 실행 안전(스캐너의 BLOCK 판정은 오탐). 스크립트를 맹목적으로 실행해서는 안 됩니다. 스캔이 깨끗하다고 해서 스킬이 안전하다는 증거는 아닙니다.

설치

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

출처

고정 커밋: 207c8a4daf6480d697f203784f1fd422727569e3

테스트일: 2026-11-02

테스트한 과제

  • 키네틱 헤드라인 — 6초 1920x1080 HyperFrames(GSAP 타임라인을 프레임 단위로 탐색해 HTML 페이지를 MP4로 렌더링하는 오픈소스 프레임워크이며, GSAP은 CDN script 태그로 불러옵니다) 컴포지션을 만드세요: 세 단어 헤드라인('Build. Ship. Repeat.')이 각 단어마다 강하게 등장…
  • 장면 전환 — 8초 1920x1080 HyperFrames(GSAP 타임라인을 프레임 단위로 탐색해 HTML 페이지를 MP4로 렌더링하는 오픈소스 프레임워크이며, GSAP은 CDN script 태그로 불러옵니다) 컴포지션을 전체 화면 장면 두 개('Problem' 4.5초, 'Solution' 4.5초)로 만드세요…
  • 카운트업 수치와 막대 — 7초 1920x1080 HyperFrames(GSAP 타임라인을 프레임 단위로 탐색해 HTML 페이지를 MP4로 렌더링하는 오픈소스 프레임워크이며, GSAP은 CDN script 태그로 불러옵니다) 컴포지션을 만드세요: 0에서 87%까지 2.5초 동안 올라가는 큰 숫자와 가로…

장점

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

단점

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

리뷰

Codex CLI 0.166 (gpt-6-astra, low reasoning)을 전용 Windows 테스트 PC에서 실행했고, 실행마다 새 임시 프로젝트와 임시 HOME/TMPDIR/캐시를 사용했습니다. 스킬 설치(스킬 사용군), 미설치(대조군), 미설치 상태에서 스킬의 핵심 요구사항만 한 문장으로 압축해 프롬프트에 덧붙인 경우(한 문장 프롬프트군)로 나눴으며, 과제·그룹당 2회씩 실행했습니다. 네트워크는 끄고 /tmp 쓰기는 차단했습니다. 프롬프트에는 스킬 이름을 언급하지 않았습니다(아래에 적은 경우 제외). 각 프롬프트에는 HyperFrames를 한 문장으로 설명했습니다(GSAP 타임라인을 프레임 단위로 탐색해 HTML 페이지를 MP4로 렌더링). 과제는 6초짜리 키네틱 헤드라인(세 단어가 강하게 등장), 8초짜리 2장면 전환, 7초짜리 카운트업 숫자와 막대입니다. 한 문장 프롬프트군은 애니메이션 규칙을 한 문단으로 제시합니다.

3개 그룹 비교

그룹평균 점수 (0-5)실행당 토큰
스킬 없음3.76131k
한 문장 프롬프트4.5287k
스킬 사용4.92137k

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

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

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

어떤 스킬인가

heygen-com/hyperframes의 hyperframes-animation 스킬로, 커밋 207c8a4에서 테스트했습니다(이 스킬은 더 이상 저장소 HEAD에 없으므로 은퇴한 버전을 설명합니다). HyperFrames 컴포지션을 위한 애니메이션 안내입니다. window.__timelines[root id]에 등록된 일시정지된 GSAP 타임라인 하나, 레이아웃 속성 대신 GSAP transform 별칭, 이름 있는 이징, 시퀀스에는 스태거, 트윈 시점에 Math.random/Date.now/timers/rAF/getBoundingClientRect 사용 금지, 프록시 객체에서 트윈하는 카운트업 카운터, 그리고 data-start/data-duration을 가진 장면들로 그 합계가 루트 duration에 포함되어야 합니다.

테스트 방법

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

각 프롬프트에는 HyperFrames가 한 문장으로 설명되어 있습니다(GSAP 타임라인을 탐색해 HTML 페이지를 MP4로 렌더링). 작업은 6초 키네틱 헤드라인(세 단어가 강하게 들어옴), 8초짜리 2장면 전환, 막대가 있는 7초 카운트업 숫자입니다. 한 문장 프롬프트는 애니메이션 규칙을 한 문단으로 설명합니다.

  1. 키네틱 헤드라인 — 6초 1920x1080 HyperFrames(HTML 페이지를 GSAP 타임라인을 프레임 단위로 탐색해 MP4로 렌더링하는 오픈소스 프레임워크. GSAP은 CDN script 태그에서 가져옴) 컴포지션을 만드세요. 세 단어 헤드라인('Build. Ship. Repeat.')이 각 단어마다 강하게 들어오는…
  2. 장면 전환 — 8초 1920x1080 HyperFrames(HTML 페이지를 GSAP 타임라인을 프레임 단위로 탐색해 MP4로 렌더링하는 오픈소스 프레임워크. GSAP은 CDN script 태그에서 가져옴) 컴포지션을 만드세요. 전체 화면 장면 두 개('Problem' 4.5초, 'Solution' 4.5초)로 구성된…
  3. 막대가 있는 카운트업 통계 — 7초 1920x1080 HyperFrames(HTML 페이지를 GSAP 타임라인을 프레임 단위로 탐색해 MP4로 렌더링하는 오픈소스 프레임워크. GSAP은 CDN script 태그에서 가져옴) 컴포지션을 만드세요. 큰 숫자가 2.5초에 걸쳐 0에서 87%까지 증가하고 가로…

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

결과

세 번째 군에 전달한 한 문장 프롬프트: "HyperFrames 컴포지션에서는 window.__timelines[root id]에 등록된 일시정지된 GSAP 타임라인 하나를 사용하세요. 요소는 GSAP transform 별칭(x, y, scale, rotation, opacity)으로 움직이고 width/height/top/left는 절대 쓰지 마세요. 이름 있는 이징을 고르고 시퀀스에는 스태거를 사용하세요. 트윈 시점에 Math.random/Date.now/timers/rAF/getBoundingClientRect를 쓰지 말고 repeat:-1도 쓰지 마세요. 카운터는 프록시 객체의 onUpdate에 트윈을 걸어 구동하세요. 장면은 data-start/data-duration을 가진 시간 지정 요소이며 루트 data-duration이 이를 모두 포함해야 합니다."

작업대조군 점수한 문장 프롬프트스킬 사용대조군 토큰한 문장 프롬프트 토큰스킬 사용 토큰스킬 읽음
t1-kinetic3.54.254.75113k77k144k2/2
t2-transition3.575.05.0152k111k159k2/2
t3-countup4.214.325.0126k73k107k2/2

평균 점수: 스킬 없이 3.76, 스킬 사용 시 4.92(델타 +1.16). 실행당 토큰: 131k 대 137k(1.05배), 시간 72초 대 70초. 한 문장 프롬프트군: 4.52(한 문장 프롬프트 대비 스킬의 이득: +0.39, 스킬 없는 경우 대비 한 문장 프롬프트의 이득: +0.77). 한 문장 프롬프트는 실행당 87k 토큰을 쓰므로, 스킬은 한 문장 프롬프트의 1.57배 비용입니다.

실제로 있었던 일

  • 대조군 3.76, 스킬 4.92, 한 문장 프롬프트 4.52(각 n=6). 대조군에서 가장 잦은 실패는 구조적입니다. 6/6 실행에서 루트 요소에 완전한 id/width/height/duration 조합이 없었고, 5/6에서는 타임라인이 window.__timelines에 등록되지 않아 HyperFrames 렌더러가 찾지 못했습니다.
  • 스킬은 이 검사들을 6/6에서 통과했습니다. 한 문장 프롬프트는 6회 중 2회에서만 타임라인을 등록했고(키네틱과 카운트업 작업에서 실패), 루트 duration과 속성은 올바르게 지정했습니다.
  • 키네틱 헤드라인 작업: 스킬과 대조군 모두 2/2 실행에서 스태거 검사 기준 단어별 스태거를 놓쳤습니다(단어마다 별도 트윈 사용). 한 문장 프롬프트는 2/2에서 스태거를 사용했습니다. 이 검사는 범위가 좁아서 차이의 일부는 코드 스타일 문제입니다.
  • 토큰: 스킬 137k, 한 문장 프롬프트 87k, 대조군 131k(실행당). 스킬은 대조군과 같은 토큰 비용으로 실행을 더 안정적으로 만들 뿐 더 저렴하지는 않으며, 한 문장 프롬프트는 둘 중 어느 쪽보다 36% 저렴합니다.
  • 스킬은 규모가 큽니다(작업 폴더에 약 133개 파일 설치, 규칙·청사진·기법 포함). 스킬 사용군은 hyperframes-animation과 hyperframes-core를 모두 읽었으므로, 이 스킬이 코어 스킬을 가리키며 이 이득의 일부는 코어 계약에서 나옵니다.

항목별 점수

항목점수이유
1_output_quality4.92

스킬 사용 시 평균 4.92/5점(프로그램 검사, 작업별 표 참조).

2_lift_vs_no_skill3.16

스킬 없이 3.76점 대비 +1.16점(작업당 n=2, 약 1점 미만의 차이는 노이즈).

3_trigger5.0스킬 사용군 6/6 실행에서 스킬 파일이 읽힘.
4_instructions_portability4SKILL.md와 다수의 참고 파일. HyperFrames 전용.
5_efficiency5

토큰 1.05배(실행당 137k 대 131k), 시간 0.96배(70초 대 72초).

6_safety_hygiene4산문과 규칙만 포함. security.md 참조.

이 테스트의 한계

  • HTML/GSAP 텍스트에 대한 정적 검사이며 프레임을 렌더링하지 않았습니다(hyperframes CLI, Chrome, FFmpeg 미실행). 따라서 시각적 타이밍과 품질은 측정하지 않았습니다.
  • HEAD에 더 이상 스킬이 없어 커밋 207c8a4에서 테스트했습니다. 설치 명령이 현재 저장소에서는 작동하지 않을 수 있습니다.
  • 스태거 검사는 동등한 단어별 오프셋이 아니라 GSAP stagger 옵션만 허용합니다.
  • 셀당 n=2.
  • 작업·군당 n = 2: 약 1점 미만의 차이는 노이즈입니다.
  • 규칙 기반 채점은 검사가 볼 수 있는 것만 측정합니다. 취향이나 결과가 최선인지는 판단할 수 없습니다.

보안

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

결론

스킬을 사용하면 컴포지션이 거의 항상 HyperFrames 계약을 충족합니다. 스킬이 없으면 루트와 타임라인 등록이 대개 잘못됩니다. 규칙을 적은 한 문단만으로도 더 적은 토큰으로 그 차이의 대부분을 회복합니다. 스킬이 더 이상 벤더 저장소에 없으므로, 이 결과는 이전 버전의 기록으로 보시면 됩니다.

트랜스크립트

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

t1-kinetic control-1: 점수 3.5, 토큰 128548, 초 60.2, 검사 7/10, 연 파일 없음
t1-kinetic control-2: 점수 3.5, 토큰 99223, 초 66.5, 검사 7/10, 연 파일 없음
t1-kinetic oneliner-1: 점수 4.25, 토큰 79255, 초 64.5, 검사 9/10, 연 파일 없음
t1-kinetic oneliner-2: 점수 4.25, 토큰 75639, 초 62.9, 검사 9/10, 연 파일 없음
t1-kinetic treatment-1: 점수 4.75, 토큰 106794, 초 54.6, 검사 9/10, 연 파일 hyperframes-animation,hyperframes-core
t1-kinetic treatment-2: 점수 4.75, 토큰 181725, 초 64.4, 검사 9/10, 연 파일 hyperframes-animation,hyperframes-core
t2-transition control-1: 점수 3.57, 토큰 139995, 초 89.6, 검사 8/11, 연 파일 없음
t2-transition control-2: 점수 3.57, 토큰 164538, 초 97.6, 검사 8/11, 연 파일 없음
t2-transition oneliner-1: 점수 5.0, 토큰 98384, 초 101.1, 검사 11/11, 연 파일 없음

18회 실행, 아티팩트 21개

샘플 출력

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

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=1920, height=1080"> <title>Build. Ship. Repeat.</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: #080b10; color: #f5f7f5; font-family: system-ui, sans-serif; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; } .clip { position: absolute; inset: 0; } .background { background: #080b10; } .glow { position: absolute; left: 310px; top: 140px; width: 1300px; height: 800px; border-radius: 50%; background: radial-gradient(ellipse, #167b60 0%, #0d463e 32%, transparent 70%); opacity: .24; } .grid { position: absolute; inset: 0; background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px); background-size: 120px 120px; mask-image: radial-gradient(ellipse, black, transparent 72%); } .content { display: flex; align-items: center; justify-content: center; flex-direction: column; } .headline { display: flex; align-items: baseline; justify-content: center; gap: 34px; margin: 0; width: 1720px; font-size: 160px; font-weight: 850; letter-spacing: -9px; line-height: 1.15; } .word { display: block; flex: 0 0 auto; transform-origin: 50% 65%; opacity: 0; } #repeat { color: #b7f676; } .subtitle { margin: 38px 0 0; font-size: 34px; font-weight: 400; letter-spacing: 1px; color: #b9c5c2; opacity: 0; } .beats { position: absolute; bottom: 210px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; } .beat { display: block; width: 38px; height: 4px; background: #b7f676; opacity: .15; transform-origin: left center; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080"> <div class="clip background" data-start="0" data-duration="6" data-track-index="0" aria-hidden="true"> <div class="glow" id="glow"></div> <div class="grid"></div> </div> <section class="clip content" data-start="0" data-duration="6" data-track-index="1"> <h1 class="headline" aria-label="Build. Ship. Repeat."><span class="word" id="build">Build.</span><span class="word" id="ship">Ship.</span><span class="word" id="repeat">Repeat.</span></h1> <p class="subtitle" id="subtitle">The loop that never stops</p> <div class="beats" aria-hidden="true"><i class="beat"></i><i class="beat"></i><i class="beat"></i></div> </section> </div> <script> // Every visual change belongs to this single, frame-seekable timeline. const tl = gsap.timeline({ paused: true }); const beats = [0.25, 0.95, 1.65]; tl.fromTo('#glow', { scale: 0.88, x: -65, opacity: 0.24 }, { scale: 1.12, x: 65, opacity: 0.40, duration: 6, ease: 'sine.inOut' }, 0); tl.fromTo('#build', { scale: 1.65, y: -55, opacity: 0 }, { scale: 1, y: 0, opacity: 1, duration: 0.32, ease: 'power4.out' }, beats[0]); tl.fromTo('#ship', { scale: 1.35, x: 95, opacity: 0 }, { scale: 1, x [... excerpt: first 3200 of 4167 characters]

Pro 보기