Communitygithub.com

비디오 콘텐츠 카드 추가

이해된 비디오 프로젝트에 대해 자막 기반 타이틀, 하단 자막, 통계, 메트릭 스포트라이트, 비교, 목록, 인용문, 챕터 카드, 행동 유도 문구를 HyperFrames HTML 그래픽으로 제작합니다.

비디오 콘텐츠 카드 추가란 무엇인가요?

이 스킬은 승인된 의미적 순간들을 하나의 일관된 HyperFrames 그래픽 오버레이로 변환합니다. 사전 실행된 `/video-understand` 스킬의 검증된 증거와 정식 타임라인을 활용하여, 소스 재전사나 재분석 없이 작업합니다. 개발자는 `ffmpeg`, Python, Node.js >= 22 환경을 요구하며, `npx hyperframes`를 통해 헤드리스 Chrome을 자동으로 관리합니다. 선택된 프로젝트 작업 파일(예: `work/understanding.json`, `work/timeline.json`)을 기반으로, 대화형 인터뷰를 통해 테마와 카드 수를 결정하고, 스크립트 기반의 `build_cards_plan.py`로 초안을 생성합니다. 사용자는 검토 페이지에서 각 카드의 사본, 시각적 처리, 배치를 편집하고 승인하며, 얼굴/헤드 실루엣 및 자막 영역과의 충돌을 방지합니다. 최종적으로 승인된 카드는 단일 HyperFrames HTML 구성 파일로 제작되어, 투명 오버레이 무비와 정지 이미지를 생성하며, GSAP 타임라인을 통해 안전하게 탐색 가능한 애니메이션을 구현합니다. 차트 레이아웃(막대, 원형, 선)은 증거 기반의 완전한 데이터 세트가 있을 때만 사용되며, `metric-spotlight`와 같은 다른 스타일로 대체될 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/WhiteTowerAI/cut-as-code/tree/main/skills/video-add-content-cards

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

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

문서

비디오 콘텐츠 카드 추가은(는) 무엇을 하나요?

승인된 의미적 순간들을 하나의 일관된 HyperFrames 그래픽 오버레이로 전환합니다. 공유된 증거와 정식 타임라인을 사용하며, 이 스킬 내에서 소스를 다시 전사하거나 분석하지 마십시오.

종속성

/video-understand는 필수 사전 조건입니다. 먼저 실행하여 카드가 검증된 의미적 증거와 정식 타임라인을 사용하도록 하십시오. 시작하기 전에 이것이 설치되었는지 확인하십시오. 설치되지 않은 경우, 이 필수 조건이 누락되었다고 사용자에게 경고하고 미디어 처리를 시작하기 전에 중지하십시오.

ffmpeg가 PATH에 있어야 하며, Python과 Node.js >= 22 (요청 시 npx hyperframes를 가져오기 위해)가 필요합니다. hyperframes render/snapshot은 헤드리스 Chrome을 구동합니다 — 자체 chrome-headless-shell을 관리하며, 캐시된 것을 사용할 수 없을 때 시스템 Chrome으로 폴백합니다 (CHROME을 설정하여 재정의). 미디어를 처리하기 전에 이것들을 확인하십시오.

입력

  • work/project.json: 작업 개정 및 종속성
  • work/understand/understanding.json: 검토된 의미적 순간 및 증거
  • work/timeline.json: 소스-프로그램 매핑 또는 컷이 없을 때의 정체성 타임라인
  • 대비나 팔레트가 해당 룩에 대해 판단되는 경우 선택적 컬러 그레이드 개정

이 스킬은 컷이나 컬러 그레이드 없이도 유효합니다. 캡션이 활성화된 경우, 먼저 실행하고, 현재 개정에 의존하며, 점유된 영역을 하드 제외 구역으로 취급하십시오. 콘텐츠 카드는 그래픽 모션보다 먼저 와야 합니다. 이러한 상대적 규칙은 선택된 모든 쌍에 적용됩니다. 실제로 소비된 종속성만 선언하고 현재 개정을 based_on에 기록하십시오.

모든 일차적 또는 전경 인물, 발표자, 진행자, 인터뷰 대상자 또는 의미적으로 중요한 사람의 보이는 얼굴과 머리 실루엣을 전체 카드 큐(진입 및 종료 포함)에 걸쳐 하드 제외 구역으로 취급하십시오. 내러티브나 시각적 초점이 아닌 우발적인 배경 전용 인물은 면제됩니다. 불확실한 경우는 보호하십시오. 카드가 보호된 얼굴이나 머리와 교차하는 경우 먼저 재배치한 다음, 크기를 조정하거나 재설계하십시오. 준수 배치가 없으면 카드를 건너뛰십시오.

작업 파일

work/content-cards/cards-plan.json          # 내구성 있는 편집 계획
work/cache/content-cards/index.html         # 코드가 편집인 구성
work/cache/content-cards-overlay.mov        # 투명 렌더링 기여
review/03-content-cards/card-stills/        # 카드당 하나의 유용한 정지 이미지
review/03-content-cards/content-cards-preview.mp4  # 선택적 짧은 큐 윈도우
review/03-content-cards/content-cards-summary.md
review/03-content-cards/content-cards-review.html  # 로컬 후보 검토 보드
review/03-content-cards/content-cards-review-assets/  # 후보당 하나의 소스 프레임
review/03-content-cards/content-cards-review.json  # 검증된 인간 선택

재사용 가능한 검토 페이지는 skills/video-add-content-cards/assets/content-cards-review.html에 커밋되어 있습니다. 채워진 HTML, 스크린샷, 오버레이 및 미리보기 렌더는 재현 가능합니다. 계획을 cache/ 밖에 두십시오. 계획은 work/cache/를 삭제한 후 일회용 HTML과 알파 자산을 재생성하는 데 필요한 모든 보이는 문자열, 타이밍, 배치, 시각적 처리 값, 렌더러 구성 경로, 렌더러 자산 경로 및 소스 FPS를 포함해야 합니다. 소스 예제/템플릿, 구성 출력 경로, 렌더 엔진 및 모든 로컬 런타임 자산의 출력 경로, 정확한 버전, 출처 및 SHA-256을 사용하여 하나의 계획 수준 renderer_recipe를 기록하십시오. 내구성 있는 레시피 없이 캐시된 HTML 파일이나 다운로드된 스크립트는 재생성을 만족시키지 않습니다.

워크플로우

1. 초안 작성 전 인터뷰

먼저 understanding.json과 활성 타임라인을 읽으십시오. 적격 그래픽 순간을 세고 인터뷰 전에 권장 카드 수를 계산하십시오:

min(적격 순간 수, max(1, round(프로그램 분 / 0.75)))

이것은 대상이며 자동 절단 규칙이 아닙니다. 질문을 하기 전에, 현재 OS에 대한 네이티브 명령으로 실제 애니메이션 예제를 직접 여십시오. 정확히 하나를 실행하십시오:

# Windows PowerShell
Start-Process (Resolve-Path 'skills/video-add-content-cards/examples/gallery-animated.html')
# macOS
open skills/video-add-content-cards/examples/gallery-animated.html

# Linux 데스크탑
xdg-open skills/video-add-content-cards/examples/gallery-animated.html

명령이 실패하면 진단하고 재시도하십시오. 이 작업을 URI로 대체하거나 사용자에게 파일을 찾아 클릭하도록 요청하지 마십시오. 갤러리는 6가지 테마를 모두 비교하며 네이티브 선택기로 하나의 열에 초점을 맞출 수 있습니다:

테마시작 문자
almanac따뜻한 크림, 세리프, 신중함
teal어두운 방송, 시안 악센트
editorial다큐멘터리, 잉크와 앰버
dotgrid픽셀-모노, 기술적
apex고에너지 스포츠, 빨간 악센트
air투명 Lexend 타이포그래피, 백킹 플레이트나 스크림 없음

한 번에 하나의 질문을 이 순서대로 하십시오:

  1. 이 편집에 어떤 테마를 사용해야 합니까?
  2. 이 편집에 어떤 대상 카드 수를 사용해야 합니까? 계산된 권장을 기본값으로 제공하십시오.
  3. 어떤 카드 유형이 포함되어야 합니까? intro, key-quote, stat, list 및 outro를 제공하십시오. 기본값은 없음입니다.

각 질문 후에 제시 + STOP 하십시오. 세 번째 답변 후, 테마, 대상 수, 필수 유형 및 사용자가 제공한 메모를 요약하고 확인을 요청하십시오. 사용자가 취소하면 분석을 유지하고, 작업을 draft로 남겨두고, 카드를 작성하거나 렌더링하지 마십시오.

2. 공유된 이해에서 카드 초안 작성

python skills/video-add-content-cards/scripts/build_cards_plan.py `
  work/understand/understanding.json `
  work/timeline.json `
  work/content-cards/cards-plan.json `
  --target-card-count 6 `
  --theme editorial `
  --must-include-type stat `
  --notes "제품 이름을 그대로 유지"

이 스크립트는 유지된 의미적 순간을 프로그램 시간으로 매핑하고 컷으로 제거된 순간은 생략합니다. 소스 범위와 증거 참조를 보존하고, 지속 시간을 포함하는 클립으로 고정하며, 복사/배치/시각적 처리를 draft로 표시합니다. stat은 metric-spotlight로 시작하고, list는 side-by-side로 시작합니다. 후보 검토는 일반 레이아웃을 유지하거나 목록을 parallel-columns로 전환할 수 있습니다. 확인된 인터뷰는 cards-plan.json에 brief로 저장됩니다. 여러 값에 대해 --must-include-type을 반복하십시오. 해당되지 않는 플래그는 생략하십시오. 이전의 선택적 brief 필드는 호환성을 위해 계속 허용되지만 일반 인터뷰의 일부는 아닙니다.

3. 편집 선택

각 카드 시간에 증거를 읽으십시오. ASR 이름과 숫자를 수정하고, 약한 후보를 제거하며, 간결한 사본을 작성하고, 보호된 얼굴, 보이는 머리 실루엣 및 캡션을 비우는 배치를 선택하며, 시각적 처리를 승인하십시오. 분석기 텍스트를 최종 사본으로 취급하지 마십시오.

모든 온스크린 사본을 copy.display 아래에 저장하십시오 (예: eyebrow, title 및 detail). 요약이나 제안된 제목만 저장하지 마십시오. 위의 보호된 얼굴-및-머리 정의에 대해 합성된 정지 이미지를 검토한 후에만 placement.face_clearance를 verified로 설정하고, 해당 정지 이미지의 프로토콜 상대 경로를 placement.review_still에 저장하십시오. HyperFrames 구성, 알파 자산 및 정확한 합리적인 FPS를 renderer 아래에 저장하십시오.

다음 매핑을 시작점으로 사용하십시오:

의미적 종류카드 유형
hookintro
key-point, quote, questionkey-quote
statstat
listlist
ctaoutro

repetition, tangent 및 risk는 편집 증거이며 자동 카드가 아닙니다.

다섯 가지 표준 카드 유형을 유지하십시오. 새로운 최상위 카드 유형을 만드는 대신 선택적 레이아웃을 visual_treatment.layout 아래에 저장하십시오:

표준 카드 유형허용된 레이아웃
statdefault, metric-spotlight, bar-chart, pie-chart, line-chart
listdefault, side-by-side, parallel-columns

증거로 뒷받침되는 하나의 숫자, 백분율, 양, 배수, 연도 또는 기간이 강조되어야 할 때만 metric-spotlight를 사용하십시오. 숫자를 간결한 상하 문맥 사이에 넣고, 긴 값을 겹치지 않게 맞추며, 숫자를 해당 레이블 사이에 시각적으로 중앙에 유지하십시오. 두세 개의 짧은 병렬, 대조, 반대 또는 대응 개념에 대해 side-by-side 또는 parallel-columns를 사용하십시오. 짧은 구문을 선호하십시오. 검토를 사용하여 사용 가능한 푸티지에 맞고 대상을 비우는 방향을 선택하십시오.

유지된 트랜스크립트가 완전하고 증거로 뒷받침되는 데이터 세트를 제공하는 경우에만 차트를 사용하십시오. 차트 데이터를 작성하기 전에 reference/chart-data.md를 읽으십시오. 차원, 메트릭, 단위, 기간, 정렬된 포인트 및 각 포인트의 트랜스크립트 증거를 data 아래에 수동으로 저장하십시오. 분석기 요약에서 값을 추론하거나 다른 비디오의 포인트를 결합하지 마십시오. 2-6개의 비교 가능한 카테고리에 대해 bar-chart를 사용하고, 증명된 전체의 2-6개의 상호 배타적 부분에 대해 pie-chart를 사용하며, 의미 있게 정렬된 3-8개의 포인트에 대해 line-chart를 사용하십시오. 필수 값, 레이블, 분모, 시간 순서 또는 단위가 누락된 경우 metric-spotlight, 일반 stat 카드 또는 카드 없음을 사용하십시오. 차트 레이아웃의 경우 긴 설명을 의미를 변경하지 않고 간결한 지원 사본으로 압축하십시오. 차트는 주로 키 값과 그 변화 또는 관계를 전달해야 합니다. 차트에 이미 보이는 값, 레이블, 기간 또는 단위를 열거하거나 다시 진술하지 마십시오.

이 단계에서 모든 증거로 뒷받침되는 후보를 유지하십시오. brief의 대상 카드 수를 목표로 하지만 증거가 보증하는 경우 더 강하거나 더 드문 세트를 허용하십시오.

4. 후보 선택 검토 및 적용

후보 계획이 존재한 후 프로젝트별 브라우저 검토를 생성하십시오. 소스 비디오를 계획의 source_range 및 활성 타임라인에 맞춰 전달하십시오. 스크립트는 각 증거 중간점을 포함하는 유지된 클립으로 고정한 다음, 후보당 하나의 해당 소스 프레임으로 커밋된 템플릿을 채웁니다:

python skills/video-add-content-cards/scripts/build_review_page.py `
  work/content-cards/cards-plan.json `
  review/03-content-cards/content-cards-review.html `
  --video input/source.mp4 `
  --timeline work/timeline.json `
  --captions-plan work/captions/captions-plan.json

프로젝트에 활성 캡션 작업이 없으면 --captions-plan을 생략하십시오. 활성 캡션 계획이 있으면 검토 프레임은 실제 점유된 상단, 중앙 또는 하단 영역을 보여줍니다.

즉시 현재 OS에 대한 네이티브 명령으로 채워진 검토를 직접 여십시오. 정확히 하나를 실행하십시오:

# Windows PowerShell
Start-Process (Resolve-Path 'review/03-content-cards/content-cards-review.html')
# macOS
open review/03-content-cards/content-cards-review.html

# Linux 데스크탑
xdg-open review/03-content-cards/content-cards-review.html

명령이 실패하면 진단하고 재시도하십시오. 사용자에게 파일을 찾도록 요청하지 마십시오. 페이지는 각 소스 프레임, 카드 ID, 프로그램 시간, 편집 가능한 사본, 시각적 처리 및 배치를 보여줍니다. 차트 레이아웃은 또한 편집 가능한 구조화된 데이터와 포인트 증거 참조를 보여줍니다. 승인하기 전에 표시된 증거와 대조하여 모든 값을 검토하십시오. 모든 후보는 선택되지 않은 상태로 시작하며 배치는 bottom으로 설정됩니다. 배치를 변경하면 실제 프레임 위에 회색 카드 프록시가 이동하여 승인 전에 충돌 위험이 보입니다. 사용자는 카드를 선택하고, 사본을 편집하고, 처리 및 배치를 선택하고, Copy summary를 클릭하고, 보이는 요약을 대화로 다시 붙여넣습니다.

제시 + STOP. 선택 요약이 붙여넣어질 때까지 기다리십시오. 확인되지 않은 초안 후보에서 HTML을 작성하지 마십시오. 요약을 review/03-content-cards/content-cards-review.json으로 변환하십시오: 모든 계획 카드에 대해 하나의 항목을 작성하고, 선택된 요약 ID를 선택된 사본, 시각적 처리 및 배치로 표시하고, 다른 모든 ID를 현재 초안 사본과 빈 배치로 선택되지 않은 것으로 표시하십시오. 검토 선택을 visual_treatment라는 문자열 필드로 저장하십시오. 그런 다음 검증된 검토를 적용하십시오:

python skills/video-add-content-cards/scripts/apply_cards_review.py `
  work/content-cards/cards-plan.json `
  review/03-content-cards/content-cards-review.json

적용 단계는 계획을 변경하지 않고 알 수 없거나, 중복되거나, 누락된 카드 ID, 빈 선택된 사본, 잘못된 배치 및 표준 카드 유형과 호환되지 않는 처리를 거부합니다. 성공 시 선택된 카드를 유지하고 사본, 배치, 시각적 처리 및 최상위 검토를 approved로 표시합니다. 계속하기 전에 결과 선택된 수를 brief 대상과 대조하여 읽으십시오.

선택된 차트 레이아웃의 경우 적용 단계는 또한 완전한 구조화된 데이터를 검증하고 data.status를 승인된 것으로 표시합니다. 잘못된 선택된 차트는 계획이 복사되기 전에 전체 검토를 거부합니다. 비차트 레이아웃을 선택하면 사용되지 않은 초안 차트 데이터를 제거합니다. 적용 후, 얼굴 및 캡션 정리는 실제 합성된 프레임에 대해 구성이 확인될 때까지 보류됩니다.

5. 하나의 HyperFrames 구성 작성

하나의 index.html과 일시 중지된 GSAP 타임라인을 사용하십시오. 각 승인된 카드는 계획의 program_start_s 및 duration_s에 의해 키가 지정된 하나의 .clip이 됩니다. 모션을 탐색 안전하게 유지하고 벽시계 타이머 대신 데이터 속성에서 타이밍을 파생하십시오.

차트 큐의 경우, 해당 일시 중지된 타임라인 내에서만 절대 구성 시간에 애니메이션을 적용하십시오. 막대는 하나의 0 기준선에서 드러납니다. 파이 섹터는 값에 비례하는 기하학과 함께 포인트 순서로 드러납니다. 선 경로는 포인트가 나타나기 전에 X축 순서로 그려집니다. 소스 상대 크기 조정과 고정 레이아웃 상자를 사용하여 검색, 레이블 및 동적 값이 레이아웃 점프를 일으키지 않도록 하십시오. 제안된 지속 시간은 막대 및 파이의 경우 5-6초이고 선의 경우 6-8초이며, 항상 유지된 클립으로 고정됩니다.

가장 가까운 저장소 예제에서 시작하십시오:

  • examples/index-almanac.html
  • examples/index-apex.html
  • examples/index-dotgrid.html
  • examples/index-editorial.html
  • examples/index-teal.html
  • examples/index-air.html

모든 카드에서 하나의 시각적 언어를 유지하고, 소스 상대 크기 조정을 사용하며, 선택된 그레이드에 대해 충분한 대비를 유지하십시오. 다섯 가지 불투명 패널 테마는 가독성을 위해 카드나 스크림을 사용할 수 있습니다. air는 장면과 텍스트 컨테이너를 투명하게 유지해야 합니다.

선택된 그레이드와 충분한 대비를 보장하고 스크림을 통해 가독성을 보장하십시오. index.html을 work/cache/content-cards/index.html에 쓰십시오.

6. 렌더링 및 스냅샷

npx hyperframes render .\work\cache\content-cards\ ^
  .\work\cache\content-cards-overlay.mov ^
  --fps $fps ^
  --width $width ^
  --height $height

npx hyperframes snapshot .\work\cache\content-cards\index.html ^
  --dir review/03-content-cards/card-stills/ ^
  --fps $fps ^
  --width $width ^
  --height $height

--fps에 대해 계획의 renderer.rational_fps를 사용하십시오. 프로젝트 dimensions에서 너비와 높이를 읽으십시오. 스냅샷은 각 카드의 중간점으로 이동합니다. 렌더링과 스냅샷 중 오류는 진단되고 해결되어야 합니다. 문제가 지속되면 마지막 cards-plan.json의 상태를 승인되지 않은 채로 유지하고 계획을 다시 검토하십시오.

7. 검토 자산 생성

python skills/video-add-content-cards/scripts/build_review_summary.py `
  work/content-cards/cards-plan.json `
  review/03-content-cards/content-cards-summary.md `
  --stills review/03-content-cards/card-stills

요약은 각 카드의 보이는 사본, 배치, 픽셀 치수 및 소스 시간을 포함해야 합니다.

누락된 입력 처리

누락된 이해 파일에 대한 오류 메시지는 "/video-understand를 먼저 실행해야 합니다"여야 합니다. 이러한 조건에서 이 스킬은 중지되어야 합니다. 의도하지 않은 불완전한 이해를 무시하거나 처리하지 마십시오.

중간 작업을 파괴하지 않도록 주의하십시오. work/cache/ 아래의 자산만 재생성할 수 있습니다.

Individual skills in this repo

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

관련 스킬