Communitygithub.com

tzezhang1-crypto/claude-motion-explainer-video

애니메이션 영상의 시각적 자체 검토 루프 (HyperFrames 버전) — 초안 출력, 각 타임라인 비트에서 스크린샷을 찍어 콘택트 시트로 만들고, 항목별 체크리스트와 대조하여 수정 후 재검토합니다. 애니메이션의 화면이나 타이밍이 조금이라도 변경되거나 영상 완료를 선언하기 전에 반드시 이 스킬을 사용하세요.

claude-motion-explainer-video란 무엇인가요?

이 스킬은 AI 에이전트(예: Claude Code)가 HyperFrames 기반 애니메이션 영상의 시각적 품질을 검토할 수 있도록 설계된 리뷰 루프입니다. AI가 영상을 직접 재생할 수 없기 때문에, 대신 각 비트의 스크린샷을 포함한 콘택트 시트(contact sheet)를 생성하여 시각적 일관성, 레이아웃, 텍스트 및 리듬을 확인합니다. 원래 whaleyxbt/claude-motion의 review-loop 스킬을 기반으로 하되, CLI 기반 명령어를 HyperFrames MCP 도구와 Python 스크립트(sheet.py)로 대체했습니다. 주요 기능으로는 초안 렌더링, 타임라인 비트별 콘택트 시트 생성, 구성, 텍스트, 리듬 및 일관성에 대한 상세 체크리스트, 그리고 음성 트랙이 있는 경우 오디오 레벨 체크(EBU R128)를 포함합니다. 이 스킬은 애니메이션의 모든 시각적 측면이 의도한 대로 구현되었는지 확인할 때까지 반복적으로 수정 및 검토를 수행하는 '리뷰 루프'를 강제합니다. 버그 수정이나 타이밍 조정을 한 후, 또는 영상이 완료되었다고 선언하기 전에 반드시 실행해야 합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/tzezhang1-crypto/claude-motion-explainer-video/tree/HEAD/skills/review-loop

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

리뷰 루프 (HyperFrames 버전)

당신은 비디오를 볼 수 없지만, 프레임은 볼 수 있습니다. 현재 버전의 출력 콘택트 시트를 확인하지 않고 절대 영상 완료를 보고하지 마세요.

whaleyxbt/claude-motion의 review-loop 스킬에서 수정 (MIT, 동일 폴더의 LICENSE 참조). 원래의 npm run … 명령어는 kinocut MCP의 HyperFrames 도구와 이 폴더의 scripts/sheet.py로 대체되었습니다. "(본 버전 추가)"로 표시된 문단은 원본 내용이 아닙니다.

아래 SHEET는 python "<이 스킬 폴더>/scripts/sheet.py"를 의미합니다 (예: ~/.claude/skills/review-loop/scripts/sheet.py). 모든 경로는 절대 경로를 사용합니다.

루프

  1. 먼저 기계 검사 통과 (본 버전 추가): 프로젝트 폴더에서 hyperframes check 실행. lint, 실행 시간, 레이아웃 오버플로우, 동작 및 대비 검사를 한 번에 실행합니다 (공식적으로 validate/inspect는 더 이상 사용되지 않으며 check를 사용합니다). 오류가 있으면 수정 후 계속 진행하세요. 자세한 내용은 공식 hyperframes-cli 스킬을 참조하세요.
    • 마스크가 진입 중일 때는 항상 container_overflow가 보고됩니다. 이는 의도된 설계이며, 마스크 컨테이너에 data-layout-allow-overflow를 추가하세요. 하지만 안착 후에도 text_box_overflow가 보고되면 컨테이너가 너무 낮아서 텍스트가 잘리는 것입니다 (특히 중국어와 위 첨자). 컨테이너 높이를 늘리세요.
  2. 초안: hyperframes_render, 매개변수 quality: "draft", output_path는 <프로젝트>/out/draft.mp4로 설정.
  3. 콘택트 시트: SHEET --video <프로젝트>/out/draft.mp4 --timeline <프로젝트>/timeline.js --out <프로젝트>/out/sheets 각 비트 후 0.3초(동작이 안정된 후)에 프레임을 캡처하여 4×2로 배열해 out/sheets/beats-N.png에 저장하며, 각 프레임에는 비트 이름과 시간이 표시됩니다. 각 프레임의 기본 너비는 360px로, 모바일 동적 이미지의 실제 너비입니다.
  4. Read를 사용하여 각 시트를 열고 아래 체크리스트의 각 항목과 대조합니다.
  5. 의심스러운 부분을 확대하여 확인:
    • 트랜지션 스캔: SHEET --video … --from 3 --to 5 --every 0.2 --name scrub
    • 특정 시간 확인: SHEET --video … --at 3.7,3.75,3.8 --name exact
    • 단일 프레임 전체 해상도 확인: hyperframes_still, frame에 프레임 번호 입력 (초 × fps)
    • 영상을 다시 출력하고 싶지 않을 때는 hyperframes_snapshot의 at을 사용하여 composition에서 직접 스크린샷을 찍은 후 SHEET --images … --labels …로 결합.
  6. 수정 후 0단계로 돌아갑니다. 전체 루프를 완료하고 문제가 발견되지 않을 때만 중단합니다.
  7. 최종 버전: hyperframes_render, quality: "high"로 영상 출력. 최종 영상에 대해 2단계를 다시 실행한 후 오디오 검사를 수행합니다 (아래 참조).

체크리스트

구성

  • 각 프레임에는 하나의 초점만 있습니다. 두 요소가 경쟁할 때는 하나가 기다려야 합니다.
  • 의도하지 않은 충돌이나 겹침이 없어야 합니다. 특히 트랜지션 중에는 퇴장 및 진입 요소가 동일한 공간을 공유합니다.
  • 안전 영역: 중요한 콘텐츠는 가장자리에서 약 60px 이내에 있지 않아야 합니다.
  • 0번 프레임은 실제 화면이어야 하며 검은색이 아니어야 합니다 (소셜 미디어 플랫폼의 썸네일이 됩니다).

텍스트

  • 마스크, 컨테이너 또는 화면 가장자리에 의해 잘리지 않아야 합니다 (의도된 경우 제외).
  • 모바일 너비(시트의 셀)로 축소될 때도 핵심 메시지를 읽을 수 있어야 합니다.
  • 읽혀야 할 때 텍스트가 움직이지 않아야 합니다.
  • (본 버전 추가) 중국어: 오타 없음; 모두 번체자이며 간체자가 섞이지 않음; 구두점은 전각 사용; 글꼴에서 누락된 문자 없음 (사각형 또는 명백히 다른 글꼴이 나타남).

리듬

  • 읽혀야 할 각 상태는 충분히 오래 정지되어 있어야 합니다 (motion-design 섹션 4 참조). 정지 중간 셀에서 텍스트가 여전히 움직이면 정지 시간이 너무 짧은 것입니다.
  • 장면 간에는 빈 화면으로 전환되지 않고 겹쳐서 연결됩니다.
  • 퇴장은 진입보다 빠릅니다.

일관성

  • :root 색상 팔레트의 색상만 사용; 강조 색상은 해당 프레임의 핵심을 표시합니다.
  • 동일한 요소는 나타나는 모든 장면에서 동일하게 보여야 합니다.

오디오 (오디오가 있는 경우에만)

  • 파형: video_audio_waveform으로 오디오 피크가 TL의 비트와 일치하는지 확인.
  • 음량 (본 버전 추가, 원래의 npm run wave 대체): ffmpeg -hide_banner -nostats -i <최종 영상> -af ebur128=peak=true -f null - 마지막 요약에서 Integrated loudness 및 True peak 확인. 목표는 −14 LUFS ±1, true peak ≤ −1 dBFS입니다.
  • 중국어 내레이션의 억양과 감정은 사용자가 귀로 직접 듣고 점수로 대체하지 마세요 (본 버전 추가).

보고

완료 시 무엇을 확인했는지, 무엇을 수정했는지, 어떤 시트에서 결과를 볼 수 있는지 명확히 말하십시오. 다시 출력하여 직접 보지 않은 수정은 수정되었다고 주장하지 마십시오.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

관련 스킬