Question 1

hyperframes npm 패키지에서 import할 때 render export가 없는 문제를 어떻게 해결하나요?

Accepted Answer

`hyperframes` 패키지(v0.8.78)는 CLI 전용이며 `render()` 함수를 내보내지 않고 `frames: [...]` 배열도 받지 않습니다. 대신 CLI를 사용하세요:

```bash
npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render -o output.mp4
```

기존 컴포지션을 렌더링하려면:

```bash
npx hyperframes render -c ./my-composition.html -o output.mp4
```

프로그래매틱 렌더링을 위해서는 별도의 `@hyperframes/producer` 패키지를 설치하세요:

```bash
npm install @hyperframes/producer
```

그런 다음 `createRenderJob()`과 `executeRenderJob()`을 사용하세요:

```typescript
import { createRenderJob, executeRenderJob } from "@hyperframes/producer";

const job = createRenderJob({
  inputPath: "./my-composition.html",
  outputPath: "./output.mp4",
  width: 1080,
  height: 1920,
  fps: 30,
});

await executeRenderJob(job, (progress) => console.log(progress.percent));
```

이 모델은 프레임 객체 배열이 아니라 렌더링당 하나의 HTML 컴포지션 파일입니다. 요구 사항은 Node.js 22+와 FFmpeg입니다. 0.x CLI는 자주 변경되므로 최신 컴포지션 형식은 `npx hyperframes docs`를 실행하여 확인하세요.

Question 2

creative-review-template.html에서 shape-error 크래시, 불완전한 탭 ARIA, 하드코딩된 좋아요를 어떻게 수정하나요?

Accepted Answer

`ad-creative` 스킬을 이슈 #592를 해결하는 PR이 포함된 버전 2.11.17로 업그레이드하거나 re-pin하세요. `skills/ad-creative/assets/creative-review-template.html`을 수동으로 패치하는 경우 다음 수정 사항을 적용하세요: 1. `renderAll()`이 실행되기 전, `JSON.parse` 직후에 JSON 구조를 검증하세요: ```js function fail(msg) { document.querySelector(".wrap").innerHTML = '

Invalid review data.
' + esc(msg) + '

'; throw new Error(msg); } if (!Array.isArray(DATA.concepts) || !DATA.concepts.length) { fail("DATA.concepts must be a non-empty array"); } DATA.concepts.forEach((c, i) => { if (!Array.isArray(c.frames) || !c.frames.length) { fail(`concepts[${i}].frames must be a non-empty array`); } }); ``` 이렇게 하면 `renderConcepts()`가 유효하지 않은 데이터에서 `c.frames.length`를 읽어 헤더만 표시되는 문제를 방지할 수 있습니다. 2. 컨셉 전환기의 ARIA를 수정하세요. `aria-controls`, 연관된 `role="tabpanel"` 요소, 화살표 키 탐색을 갖춘 전체 탭 패턴을 구현하거나, `role="tablist"`, `role="tab"`, `aria-selected`를 제거하고 일반 토글 버튼을 사용하세요: ```html ``` 활성 컨셉에는 `aria-pressed="true"`를 설정하세요. 3. 지어낸 Instagram 참여 수를 제거하고 데이터 기반으로 변경하세요: ```js

${c.likes ? esc(c.likes) + " likes" : ""}

``` `c.likes`가 없으면 좋아요 줄이 완전히 생략되므로, 날조된 통계가 표시되는 것을 피할 수 있습니다.

Question 3

npx나 Claude Code를 사용하지 않고 claude.ai에서 Claude 스킬을 설치하려면 어떻게 해야 하나요?

Accepted Answer

프로젝트의 GitHub Releases 페이지에서 스킬별 ZIP 에셋을 다운로드하세요. 소스 코드 ZIP은 사용하지 마세요. claude.ai 웹 또는 데스크톱에서 Settings → Capabilities → Skills로 이동하여 다운로드한 ZIP을 업로드한 다음 스킬을 활성화하세요. 릴리스 워크플로는 고정된 커밋에서 빌드되고 스킬의 참조, 스크립트, 에셋 및 라이선스가 포함된 ZIP을 스킬당 하나씩 첨부합니다.

marketingskills

개요

README 미리보기

FAQ (3)

同类型项目

rust

ponytail

agency-agents

obsidian-skills