플러그인 설치: 설정 또는 최신 상태 확인 명령을 실행하기 전에, 이 스킬이 HyperFrames 플러그인 내부에 있을 경우 플러그인 실행 규칙을 따르세요. 독립 실행형 설치는 아래 업데이트 지침을 유지합니다.
HyperFrames 창작
브랜드, 페이싱, 스타일, 내레이션 및 구성 방향. hyperframes-core의 기술적 계약이 수립된 후에 사용하세요.
모션 패턴, 씬 청사진, 전환 및 CSS 마커 효과에는 hyperframes-animation을 사용하세요 — 이 스킬은 의도적으로 애니메이션을 다루지 않습니다.
중요하지 않은 구성을 위해서는 먼저 다음 두 문서를 반드시 읽으세요 — 웹 인스팅트를 무시합니다:
references/house-style.md— "프롬프트를 해석하고 실제 콘텐츠를 생성"하는 방법, 레이지 디폴트 목록, 배경/전경 레이어 레시피. 이것은 문자 그대로의 리스타일을 _컨셉_으로 바꿔줍니다.references/video-composition.md— 비디오 매체의 스케일, 깊이, 전경 세부 사항. 빈 웹 페이지 레이아웃을 피하면서도 보편적인 요소 개수를 강요하지 않는 방법을 설명합니다.이 두 가지를 건너뛰는 것은 제너릭하고 웹 페이지처럼 보이는 결과물이 나오는 가장 큰 원인입니다. 아래 라우팅 테이블에서 선택 사항이 아닙니다 — 한 줄 수정을 넘어서는 작업이라면 색상을 선택하거나 HTML을 작성하기 전에 두 문서를 모두 여세요.
워크플로우
- 프로젝트에 디자인 사양이 있다면 먼저 읽고 해당 프론트매터 토큰을 브랜드 진리(색상, 폰트, 간격, 톤, 제약 조건)로 취급하세요. 읽을 파일(
frame.md→design.md→DESIGN.md우선순위)과 구문 분석 방법(프론트매터 = 규범, 본문 = 컨텍스트)은references/design-spec.md에 한 번 정의되어 있습니다 — 해당 문서에 따라 확인하고 로드하세요. - 디자인 사양이 없고 사용자가 시각적 방향을 요청하는 경우, 다음 경로 중 하나를 선택하세요:
- 기성 프레임 프리셋(선택 사항) →
frame-presets/(FRAME.md를frame.md로 채택,references/design-spec.md참조) - 명명된 스타일 또는 무드 →
references/visual-styles.md - 빠른 기본값 →
references/house-style.md - 대화형 선택 →
references/design-picker.md
- 기성 프레임 프리셋(선택 사항) →
- 멀티 씬 작업의 경우, HTML을 작성하기 전에 비트와 리듬을 계획하세요 →
references/beat-direction.md. 씬 전환의 경우hyperframes-animation/transitions/로 이동하세요. - 모션 중심 작업의 경우,
references/motion-principles.md(상위 수준 가드레일)를 읽은 다음, 원자적 규칙을 위해hyperframes-animation으로 이동하세요.
라우팅
| 주제 | 읽을 문서 |
|---|---|
기성 프레임 프리셋을 frame.md로 채택 (선택 사항) | frame-presets/ · references/design-spec.md |
| 기본 팔레트, 모션, 타이포그래피, 의문을 제기할 레이지 디폴트 | references/house-style.md |
| 명명된 스타일 프리셋, 무드-스타일 라우팅 | references/visual-styles.md |
| 팔레트별 색상 토큰 | palettes/*.md |
| 구성 패턴 — PiP, 텍스트-피사체-뒤, 타이틀 카드, 슬라이드 쇼 | references/composition-patterns.md |
| 통계 / 인포그래픽 프레젠테이션 | references/data-in-motion.md |
| 개방형 프롬프트에 대한 구조적 확장 | references/prompt-expansion.md |
| 비디오 매체 밀도, 스케일, 색상, 프레임 구성 | references/video-composition.md |
| 비트별 방향, 리듬 계획, 전환 타이밍 | references/beat-direction.md |
| 작성 후 사양 검증 (색상, 서체, 모서리, 간격, 깊이) | references/design-adherence.md |
| 상위 수준 모션 가드레일 및 GSAP 품질 규칙 | references/motion-principles.md |
| 폰트 선택, 페어링, 렌더링된 비디오 유형 가드레일 | references/typography.md |
| 스토리 교리 — 훅 언어, 증거보다 가치, 제안으로서의 스토리보드, 출처 추적 가능한 비주얼 | references/story-spine.md |
| 스크립트 페이싱, 톤, 오프닝, 숫자 발음 | references/narration.md |
| 모션에 매핑된 사전 계산된 오디오 밴드 | references/audio-reactive.md |
스크립트
scripts/contrast-report.mjs— 렌더링된 프레임에서 대비 경고를 검사합니다.scripts/extract-audio-data.py— 오디오 반응형 구성을 위해 오디오 밴드를 사전 추출합니다.scripts/package-loader.mjs— 번들된 창작 도구를 위한 지원 스크립트입니다.
contrast-report.mjs는 먼저 현재 프로젝트에서 도우미 패키지를 확인한 다음, 번들된 HyperFrames 패키지 버전을 부트스트랩할 수 있습니다. 번들 CLI/스킬 설치 외부에서 스킬을 실행하고 해당 부트스트랩 버전을 명시적으로 고정해야 하는 경우에만 HYPERFRAMES_SKILL_PKG_VERSION=<version>을 설정하세요.
리포지토리 루트에서 명시적 경로로 실행하세요. 예:
python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>
애니메이션 분석(animation-map.mjs)은 hyperframes-animation/scripts/에 있습니다.
경계
hyperframes-core기술 규칙을 재정의하지 마세요.- 최소한의 기술적 구성을 위해 디자인 시스템을 요구하지 마세요.
- 요청에 포함되지 않았거나 먼저 확장을 제안하지 않는 한, 추가 씬, 내레이션, 음악, 캡션 또는 전환을 추가하지 마세요.
- 레시피 참조를 작업별로 유지하세요. 간단한 편집을 위해 모든 참조를 읽지 마세요.