Communitygithub.com

code-film

모든 프레임이 타임스탬프의 순수 함수인 모션 필름을 코드로 렌더링하고, 프레임 검증 및 인코딩합니다.

code-film란 무엇인가요?

code-film은 각 프레임이 타임스탬프의 순수 함수로 정의된 모션 필름을 코드로 제작하는 AI 에이전트 스킬입니다. `window.__seek(t)` 인터페이스를 통해 페이지가 특정 시간의 프레임을 렌더링하고, `ui:render --profile film` 명령어로 각 프레임을 캡처하여 시퀀스의 결정론적 성질을 증명합니다. 또한, 감광성 임계값(flash floor) 및 선언된 포맷에 대한 검사를 수행하고, ffmpeg으로 최종 인코딩합니다. 이 스킬은 제품 런칭 클립, 쇼릴, 모션 타이포그래피, 애니메이션 차트, 프로세스 설명 영상, 반복 브랜드 애니메이션 등 사용자의 소재로 짧은 모션 필름을 만들어야 할 때 유용합니다. 유료 비디오 제공자나 실시간 재생에 의존하지 않으며, 모든 프레임이 동일하게 렌더링되어야 하고, 비트나 선언된 템포에 맞춰져야 하며, 특정 크기의 MP4로 제공되어야 하는 상황에 적합합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/event4u-app/agent-config/tree/HEAD/src/skills/code-film

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

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

문서

code-film은(는) 무엇을 하나요?

모든 프레임이 타임스탬프의 순수 함수인 모션 필름: 페이지는 window.__seek(t)를 노출하고, ui:render --profile film이 각 프레임을 탐색하며, 캡처하고, 시퀀스가 결정론적임을 증명하고, 감광성 임계값 및 선언된 포맷에 대해 검사한 후 ffmpeg로 인코딩합니다. 유료 비디오 제공자나 실시간 재생이 필요하지 않습니다. 필름 모션의 값은 references/film-motion.md에, 페이지 계약은 film-page에 정의되어 있습니다.

사용 시기

  • 사용자가 자신의 소재로 만든 짧은 모션 필름을 요청하는 경우 — 제품 런칭 클립, 쇼릴, 모션 타이포그래피, 애니메이션 차트, 프로세스 설명 영상, 반복 브랜드 애니메이션.
  • 필름이 동일하게 두 번 렌더링되어야 하거나, 비트나 선언된 템포에 맞춰져야 하거나, 지정된 크기의 MP4로 제공되어야 하는 경우.

사용하지 말아야 할 경우

  • 생성형 비디오 제공자(Veo, Kling, Sora)에 대한 프롬프트인 경우 → motion-choreographer.
  • UI 내부의 애니메이션 — 호버, 스크롤 리빌, 페이지 전환 → fe-design § 모션.
  • 기존 영상 자르기 또는 자막 추가 → /video 클러스터.
  • 단일 정적 또는 반복 SVG 에셋 → svg-authoring.

절차

  1. 입력. 레시피에 변수로 나열된 것만 질문: 목적, 포맷 및 픽셀 크기, 16진수 팔레트, 서체 하나, 오디오(없음, 제공된 파일, 또는 선언된 템포), 엔드 카드. "그냥 만들어"라는 요청에는 사용한 기본값을 명시.

  2. 방향. 코퍼스에서 레시피 하나를 선택하고 모든 샷이 제공하는 하나의 개념을 명시:

    node <skills-root>/corpus-grounding/scripts/ground.mjs search \
      --manifest <skills-root>/code-film/data/manifest.json "<brief>"
    
  3. 금지 사항. brief에 대한 tells(--domain tell)를 가져오고 각 금지 사항과 그 대안을 계획에 작성.

  4. 그리드. 제공된 트랙의 템포와 마디(allin1.sh가 설치된 경우; 그렇지 않으면 선언된 템포, 선언되었다고 보고), 그 다음 시간이 포함된 정렬된 샷 목록. 모든 텍스트는 읽는 시간(초당 3단어) 동안 유지.

  5. 설명용 — 주장. 출처와 함께 모든 화면상의 수치, 이름 및 날짜를 나열하거나 사용자의 것으로 표시. 어떤 것도 만들어내지 않음.

  6. 구축. seek 계약에 따라 페이지 작성: window.__seek(t), window.__videoMeta, 벽 시계 없음, 시드된 난수, 로컬 폰트. --domain renderer에서 렌더러를 선택; 일반 HTML이 기본값이며 라이선스가 있는 렌더러는 라이선스 질문에 답변한 후에만 제안.

  7. 연락처 시트. 한 번 렌더링하고 contact.png를 읽어 어수선함, 겹침, 박자에 맞지 않는 타이밍을 수정. 최대 세 번 반복.

  8. 렌더링.

    agent-config ui:render film/index.html --profile film --out film/out.mp4 [--audio track.wav]
    

    종료 코드 0은 정상, 2는 결과(결정론, 깜빡임, 데드 타임, 포맷, 네트워크)가 있음, 1은 평가되지 않음, 3은 브라우저 드라이버 없음.

  9. 보고. manifest 인용: seek 형태, 각 검사는 ran 또는 skipped: <이유>, 결과, verification. verified는 manifest가 명시하고 파일 다이제스트가 전달하는 파일과 일치하는 경우에만 표시.

상태 — 각 용어의 의미

  • verified — 해당 기기에서 모든 적용 가능한 검사가 실행되었고 인코딩된 파일의 다이제스트가 기록된 것과 일치. 필름이 좋다는 것을 의미하지는 않음.
  • static-only — 프레임이 캡처되고 해시되었지만, ffmpeg이 필요한 검사(깜빡임 임계값, 인코딩, 포맷)가 실행되지 않음. 누락된 도구 이름을 명시.
  • unassessed — 아무것도 확인되지 않음: 브라우저 드라이버 없음, seek 형태 없음, 또는 선언된 길이 없음. 설치 또는 누락된 선언을 명시.

출력 형식

  1. 필름 경로와 manifest의 SHA-256.
  2. 검사 테이블(ran / skipped: …) 및 모든 결과.
  3. 연락처 시트 경로.
  4. 설명용인 경우 출처가 포함된 주장 목록.

주의사항

  • Math.random 또는 Date.now를 사용하는 페이지는 역방향 패스에서 다르게 렌더링됨; manifest는 첫 번째로 차이가 나는 프레임을 명시. t에서 시드.
  • 깜빡임 임계값은 안전 임계값: 스트로브는 실패하며 어떤 플래그도 낮출 수 없음.
  • film 프로필은 네트워크를 끄고 페이지의 스크립트를 실행함. CDN에서 가져온 폰트나 이미지는 로드되지 않음 — 페이지와 함께 전달.
  • 결정론은 기기별로 입증됨; 폰트와 GPU는 기기마다 다름.
  • 타임라인 프레임워크로 구축된 페이지는 window.__timelines(일시 정지됨, 탐색 가능한 항목)을 통해 보여짐; 내장된 영상은 t − data-start에서 유지. 영상은 all-intra(-g 1)로 인코딩해야 함, 그렇지 않으면 탐색이 키프레임 사이에 위치할 수 있음.

하지 말아야 할 것

  • 외부 갤러리의 프롬프트 텍스트를 계획이나 레시피에 붙여넣지 말 것 — 코퍼스에서 새로 작성.
  • 묻지 않고 렌더러를 번들로 설치하지 말 것; 감지하고 경로를 결정.
  • 코드만으로 필름이 완성되었다고 말하지 말 것 — 프레임이 결정.
  • 필름이 좋다, 브랜드에 맞다, "AI 적다"고 주장하지 말 것; 측정된 것을 보고.

함께 보기

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

관련 스킬