hyperframes-registry

hyperframes-registry 스킬 개요

hyperframes-registry가 하는 일

hyperframes-registry 스킬은 일반적인 프롬프트보다 훨씬 적은 시행착오로 재사용 가능한 HyperFrames registry 항목을 설치하고 연결하도록 도와줍니다. hyperframes add <name>의 결과를 실제로 동작하는 구성으로 바꾸는 일이 목표이며, 블록을 추가하든, 컴포넌트를 병합하든, registry에 무엇이 있는지 확인하든 모두 이 작업에 맞춰져 있습니다.

가장 잘 맞는 사용 사례

다음 같은 상황이라면 hyperframes-registry guide로 hyperframes-registry 스킬을 사용하세요:

• 기존 프로젝트에 registry 항목을 설치할 때
• 항목이 block인지 component인지 판단해야 할 때
• 설치한 파일을 index.html에 연결해야 할 때
• hyperframes.json 경로 매핑을 읽어야 할 때
• 무엇을 쓸지 결정하기 전에 registry 항목을 탐색하고 싶을 때

무엇이 다른가

이 스킬은 설치 경로, 파일 유형, 통합 단계가 중요할 때 가장 강합니다. block은 자체적인 크기와 타임라인을 가진 독립적인 서브 컴포지션처럼 동작하고, component는 호스트 컴포지션에 병합되는 조각입니다. 파일을 수정하기 전에 이 hyperframes-registry 스킬이 가장 먼저 명확히 해주는 핵심 판단 지점이 바로 그 차이입니다.

hyperframes-registry 스킬 사용법

올바른 파일을 설치하고 확인하기

hyperframes-registry install을 할 때는 스킬만 보지 말고 저장소 구조와 함께 봐야 합니다. 설치할 항목부터 확인한 뒤 아래 파일을 읽으세요:

• 워크플로를 확인하기 위한 SKILL.md
• registry 조회와 manifest 필드 확인을 위한 references/discovery.md
• 기본 경로와 hyperframes.json 재매핑을 확인하기 위한 references/install-locations.md
• 항목 유형에 따라 references/wiring-blocks.md 또는 references/wiring-components.md
• 전체 흐름 예시를 위한 examples/add-block.md와 examples/add-component.md

대충의 요청을 좋은 프롬프트로 바꾸기

좋은 hyperframes-registry usage는 이름만 던지는 대신 구체적인 목표에서 시작합니다. 입력이 명확할수록 좋습니다:

• 항목 이름
• block인지 component인지
• 프로젝트 안에서 어디에 둘지
• 기존 컴포지션에 연결할지, 새로 시작할지
• hyperframes.json의 경로 재매핑 여부

예시 프롬프트 형태:
Install data-chart into my HyperFrames project, wire it into index.html, and tell me which files and attributes need updating.

흔한 실수를 피하는 워크플로

신뢰할 수 있는 hyperframes-registry guide는 다음 순서입니다:

1. 프로젝트에서 hyperframes add <name>를 실행합니다.
2. 작성된 파일과 CLI가 출력한 스니펫을 확인합니다.
3. 항목이 block인지 component인지 검증합니다.
4. block은 data-composition-src, data-start, data-duration, data-track-index로 연결합니다.
5. component는 스니펫이 지시한 대로 HTML, CSS, JS에 병합합니다.
6. 프로젝트가 hyperframes.json#paths를 덮어쓰는 경우 경로를 업데이트합니다.

실무에서 유용한 품질 팁

더 좋은 결과를 내려면, 스킬에 현재 컴포지션이 이미 무엇을 포함하는지 알려주세요. 예를 들어 기존 캔버스 크기, 타임라인 길이, 이미 호스트 data-composition-id가 있는지 등을 말해주면 좋습니다. hyperframes-registry for Design Implementation에서는 특히 중요합니다. block은 호스트 레이아웃과 맞아야 하고, component는 현재 타임라인과 스타일에 자연스럽게 들어가야 하기 때문입니다.

hyperframes-registry 스킬 FAQ

이것은 설치 작업에만 쓰나요?

대체로 그렇습니다. hyperframes-registry 스킬은 설치, 탐색, 연결 판단에 초점이 맞춰져 있습니다. HyperFrames의 개념 설명만 필요하다면 일반 프롬프트로도 충분합니다. 하지만 실제로 동작하는 파일 경로와 통합 단계가 필요하다면 이 스킬이 더 적합합니다.

block은 component와 어떻게 다른가요?

block은 자체적인 크기와 지속 시간을 가진 완전한 컴포지션으로, data-composition-src로 임베드하는 용도입니다. component는 기존 컴포지션에 붙여 넣는 스니펫입니다. 독립적인 타이밍이나 별도 캔버스가 필요하면 block을 선택하세요. 현재 장면에 자연스럽게 섞이는 효과가 필요하면 component가 맞습니다.

초보자도 repo를 먼저 알아야 하나요?

아니요. 목표가 “이 항목을 설치하고 연결한다”는 것만 분명하다면 초보자도 충분히 사용할 수 있습니다. 초보자가 가장 많이 겪는 위험은 hyperframes add 이후의 wiring 단계를 건너뛰는 것입니다. repo 참조 문서는 다음에 어디를 봐야 하는지 정확히 보여주기 때문에 그 위험을 줄여줍니다.

언제 이 스킬을 쓰지 말아야 하나요?

HyperFrames registry를 다루는 상황이 아니거나, 무엇인가를 설치하는 일이 아니거나, 이미 어떤 파일을 어떻게 고쳐야 하는지 정확히 알고 있고 아주 짧게 프롬프트만 다듬으면 되는 경우에는 hyperframes-registry를 쓰지 마세요. 설치 여부와 통합 세부사항이 아직 열려 있을 때 가장 유용합니다.

hyperframes-registry 스킬 개선 방법

부족한 제약 조건을 알려주세요

가장 큰 품질 향상은 hyperframes-registry에 대상 컴포지션이 기대하는 조건을 알려주는 데서 나옵니다. 캔버스 크기, 타임라인 길이, 설치 디렉터리 선호, 그리고 호스트 프로젝트가 기본 compositions/ 경로를 쓰는지 아니면 재매핑 경로를 쓰는지 포함하세요. 이렇게 하면 경로 불일치와 wiring 가정을 막을 수 있습니다.

실제 통합 지점을 정확히 보여주세요

더 나은 hyperframes-registry usage를 원한다면 호스트 컴포지션의 관련 부분을 그대로 붙여 넣거나 정확히 설명하세요:

• index.html 컨테이너
• 기존 data-composition-id
• 현재 GSAP timeline 시작 시점
• 이미 사용 중인 wrapper 요소나 layer

이 정보는 block wiring에서 특히 중요합니다. 배치와 layer 순서가 추가된 항목이 올바르게 동작하는지 좌우하기 때문입니다.

첫 결과에서 바로 반복 개선하기

첫 결과가 거의 맞지만 아직 부족하다면, 다음 중 하나를 요청하며 다듬으세요:

• hyperframes.json을 기준으로 수정한 설치 경로
• 최소한의 wiring 스니펫만
• 같은 시각 목표에 대한 block-vs-component 추천
• HTML, CSS, JS 단계를 분리한 병합 계획

이 피드백 루프가 초기 프롬프트를 지나치게 복잡하게 만들지 않으면서 hyperframes-registry 결과를 가장 빠르게 개선하는 방법입니다.