Communitygithub.com

johdav999/VideoAIAgent

코드로 프리미엄 시네마틱 모션 디자인을 직접 제작하고, 영화, 제품/기능 영상, 랜딩 페이지 및 소셜용 루핑 애니메이션, 로고 스팅, UI 워크스루, 앱 데모, 키네틱 타이포그래피, 티저, 트레일러, 인트로 및 프로모션 클립을 제작합니다. 사용자가 Remotion, HyperFrames, HTML/GSAP 또는 React로 비디오, 애니메이션, 모션 그래픽 또는 애니메이션 데모를 원할 때 사용하세요.

VideoAIAgent란 무엇인가요?

이 에이전트 스킬은 단순한 웹 페이지 애니메이션을 넘어 '단편 영화'를 연출하는 것과 같은 접근 방식으로 프리미엄 시네마틱 모션 디자인을 제작하는 데 특화되어 있습니다. 사용자가 코드 기반 영상 제작 도구인 Remotion(React, 프레임 기반) 또는 HyperFrames(HTML/GSAP)를 사용해 제품 출시 영화, 기능 데모, UI 워크스루, 로고 스팅, 루핑 애니메이션 등을 원할 때 이 스킬을 활용합니다. 핵심은 하나의 타임라인 파일이 영상, 카피, 사운드를 통합적으로 제어하며, 단순한 스타일링이 아닌 제품의 구체적인 특성을 시각적으로 증명하는 스토리텔링에 중점을 둡니다. 하드 밴(특정 폰트, 색상, 장식 금지)을 통해 생성형 AI 특유의 미감을 배제하고, 무브먼트는 60fps에서 부드럽고 가중치 있게 구현되며, 최종 렌더링 후 측정과 비평을 통해 완성도를 검증합니다. 이 스킬은 강력한 브랜드 아이덴티티와 영화적 품질을 요구하는 프로덕션 환경에 적합하며, 심층적인 컨셉 개발, 브랜딩, 비평 과정을 포함하는 포괄적인 워크플로우를 제공합니다.

지원 대상~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/johdav999/VideoAIAgent/tree/HEAD/third_party/cinetic/release
원본 보기→모든 스킬 둘러보기

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

cinetic

당신은 웹 페이지를 애니메이션화하는 것이 아니라 단편 영화를 연출하고 있습니다. 영상, 카피, 사운드는 하나의 타임라인 파일에 의해 구동되는 하나의 시스템이며, 렌더링되고 측정되고 비평될 때까지 완료된 것이 아닙니다.

  • 엔진. 기본값은 Remotion 4.0.529 (React, 프레임 기반)입니다. HyperFrames 0.8.79 (HTML 및 일시 중지된 GSAP 타임라인)가 대안입니다. 제작 기술은 엔진에 독립적입니다. §7에는 엔진별로 다른 규칙이 나열되어 있습니다.
  • 숫자. 여기에 있는 모든 숫자는 실제 출시된 작업에서 입증된 기본값입니다. 명시된 이유가 있을 때 변경할 수 있는 출발점이지 자연의 법칙이 아닙니다.
  • 브랜드. 사용자가 브랜드(색상, 글꼴, 로고, 영상, 톤)를 제공하면 브랜드가 우선합니다. 기본 취향 설정은 사용자가 직접 만들어야 하는 부분을 대체합니다.
  • 경로. scripts/render.sh와 같은 경로는 스킬 루트와 영화 프로젝트 내부에서 모두 작동합니다. scripts/new-film.sh가 모든 스크립트를 프로젝트로 복사하기 때문입니다. brand-svg.ts(brand-kit.sh가 호출)를 제외한 모든 스크립트는 --help를 출력합니다.
  • 작업 예제. references/worked-example.md는 1920×1080, 60fps, 33초 분량의 출시 영화인 Tessel을 안내하며, 실수를 포함하여 아래 각 규칙이 어떻게 사용되는지 보여줍니다. 첫 번째 영화를 제작하기 전에 한 번 읽어보십시오.

기준

목표는 사람들이 두 번 시청하는 영화입니다. 제품이 소유한 하나의 아이디어를 그림으로 이야기하며, 모든 프레임이 선택된 것처럼 보이고 공간을 채우기 위한 것이 없는 영화입니다.

  • 광택보다 본질. 이 제품이 하는 구체적이고 영리한 일, 즉 더 단순한 제품은 하지 못할 일을 보여주십시오. 평범한 주장을 완벽한 모션으로 표현하는 것보다, 거친 영화라도 시청자가 "오, 똑똑하네"라고 생각하게 만드는 것이 낫습니다.
  • 고유한 스타일. 모든 브랜드는 하드 밴 목록 안에서 이름, 제품 및 개성에서 파생된 시각적 언어를 얻습니다. 절제는 장식이 없음을 의미합니다. 모든 것에 하나의 미니멀한 하우스 스타일을 의미하지는 않습니다.
  • 매우 깔끔하고 부드럽게. 깔끔하고 현대적인 프레임과 창의적인 아이디어 및 안무. 모든 움직임은 60fps에서 이징되고, 무게감 있고 부드럽습니다. 떨림, 튐, 또는 아이디어를 대체하는 효과가 없어야 합니다.
  • 시각적, 내레이션 없음. 소리가 꺼져도 아이디어가 읽혀야 합니다. 단어는 그림이 이미 말한 것을 확인합니다.
  • 무게와 정지. 움직임은 질량을 가지며, 박자에 맞춰 도착한 후 멈춥니다. 그래야 빠른 순간이 제대로 전달됩니다.
  • 그림을 더 좋게 만드는 사운드: 모든 히트는 볼 수 있는 것에 의해 발생합니다.
  • 장식보다 절제. 의심스러우면 제거하십시오.
  • 인상이 아닌 증명. 아래 프로세스는 에디터나 스튜디오에서는 이 중 어떤 것도 판단할 수 없기 때문에 존재합니다. 실제 렌더링을 시청하고 측정한 후에야 알 수 있습니다.

하드 밴

스타일을 만들 때, 다음 중 어떤 것도 절대 나타나지 않아야 합니다. 이것들은 생성된 작업의 가장 빠른 식별 표시이며, 이 스킬은 생성된 것처럼 보이지 않는 영화를 만들기 위해 존재합니다. lint-film.mjs는 토큰과 스타일에서 이것들을 확인하고, 비평가들은 프레임을 확인합니다.

  • 단어:

    • 헤드라인 위의 눈썹 또는 킥커 레이블;
    • 중첩된 태그라인 및 "Introducing…";
    • 텍스트 벽 및 임의의 채우기 텍스트: 장식용 모노 캡션, 아무도 필요로 하지 않는 가짜 지표, 가짜 라벨, 로렘 입숨.

    화면의 모든 단어는 그 자리를 얻습니다.

  • 타입: 세리프 서체 및 이탤릭체 또는 오블리크 스타일(가짜 기울임 포함). 코드나 숫자용 모노 서체를 하나 더 추가할 수 있습니다(제품에 필요한 경우). 하나의 깔끔하고 현대적인 산세리프체를 사용하십시오.

  • 색상:

    • 주황색, 호박색, 베이지색, 크림색, 황갈색 또는 모래색을 악센트, 종이 또는 광채로 사용;
    • 네온: 매우 밝고 채도가 높은 악센트, 광채, 블룸 및 후광;
    • 보라색, 바이올렛 또는 남색, 보라색에서 파란색 또는 다중 색조 그라데이션;
    • 유리 형태.

  • 장식:

    • 이모지 및 스톡 아이콘;
    • "AI"를 나타내는 반짝임, 입자, 색종이, 렌즈 플레어 및 코드 비;
    • 착지하지 않는 모든 것에 바운시 오버슛.

남은 것은 충분합니다: 잉크와 종이(밝거나 어둡거나, 중립적이거나 차가운), 금지된 색상군 외부의 의미를 가진 하나의 악센트(빨간색, 녹색, 청록색, 파란색, 노란색), 하나의 산세리프체, 그리고 매우 깔끔하고 부드럽고, 이징되고, 무게감 있고, 모션 블러가 적용되며 지터가 없는 모션입니다. 창의성은 효과가 아닌 아이디어, 장치 및 안무에 들어갑니다.

사용자가 이러한 항목 중 하나(예: 세리프 워드마크, 주황색)를 포함하는 브랜드를 제공하면 브랜드가 우선합니다. 이는 기본값이 아닌 그들의 정체성이기 때문입니다. 비평가가 플래그를 지정하지 않도록 BRIEF.md에 기록하고, 이를 설정하는 줄에 // cinetic:brand-supplied <무엇>을 표시하여 린트가 허용하도록 하십시오.

1. 형식 및 기본값

먼저 행을 선택하십시오. 길이, 밀도 및 제공할 파일 목록을 설정합니다. 각 형식에 대한 레시피는 references/formats.md에 있습니다.

형식길이fps그리드 (BPM)스토리 비트화면 단어사운드제공물
출시 영화 / 티저20–45 초6012030초당 8–10개총 20–35개 이하전체 악보 + SFX16:9 마스터, 9:16 및 1:1 재배치, 포스터, 발명된 경우 브랜드 키트
제품 / 기능 비디오8–30 초60100–1208–10초당 1개 기능15개 이하라이트 배경 + UI SFX마스터, 포스터
기능 루프4–15 초, 전체 마디60 (GIF 25)임의; 전체 마디3–5개8개 이하, 음소거 상태로 읽힘선택 사항MP4, WebM, GIF, 끊김 없는 이음새
로고 스팅3–8 초601202–4개이름 + 4개 이하하나의 조정된 히트 + 테일MP4, ProRes 4444 알파(유지 및 클리어), 포스터, 발명된 경우 브랜드 키트
UI 워크스루20–90 초6090–1102–4마디당 1개 장캡션당 6개 이하배경 + UI SFX마스터, SRT 캡션

UI, 텍스트 또는 카메라가 움직일 때마다 60fps를 사용하십시오. 30fps에서는 느린 드리프트가 눈에 띄게 단계적으로 보이고 빠른 움직임이 스트로브 효과를 내며, 24fps는 UI에 적합하지 않습니다. GIF는 유일한 예외입니다. 60fps 마스터에서 25fps(또는 50fps)로 내보내십시오. GIF 프레임 지연은 100분의 1초 단위이며 30fps는 11% 빠르게 재생되기 때문입니다.

2. 다섯 가지 법칙

  1. 이 제품에 특화된 하나의 아이디어. 영화를 한 문장으로 말할 수 있어야 하며, 증명은 이 제품이 명백하거나 더 단순한 버전으로는 할 수 없는 일을 보여주어야 합니다. 절제는 장식과 카피에 적용되며, 제품의 지능에는 절대 적용되지 않습니다. 기능이 똑똑하다면 영화는 그 똑똑한 부분을 보여줍니다. 이유: 시청자는 한 가지를 간직하며, 경쟁사 또는 더 단순한 기능에도 동등하게 적용될 수 있는 영화는 그들에게 아무것도 가져다주지 않습니다.
  2. 하나의 스토리 장치. 하나의 대상, 모양 또는 색상이 모든 장면을 통과하며 컷에서 절대 사라지지 않습니다. 출시 영화에서는 이상적으로 끝에 마크로 해소됩니다. 기능 루프 또는 제품 비디오에서는 제품이 작용하는 단위(카드, 행, 파일)입니다. 이 제품이 소유한 대상을 찾으십시오. 맨 점, 선 또는 블록은 게으른 기본값이며, 이 스킬 자체 예제의 모양이기도 합니다. 이유: 영화를 연속적으로 만들고, 소리가 꺼져도 읽히게 하며, 소유된 대상은 영화를 이 브랜드의 것임을 명확하게 합니다.
  3. 하나의 의미를 가진 하나의 악센트. 악센트는 "지금", "새로운" 또는 "당신의 것"과 같은 한 가지를 의미하는 단일 토큰입니다. 드물게 사용하고(픽셀의 약 8% 이하), 프레임 전체를 채우는 것은 최대 한 번만 허용합니다. 이유: 의미 있는 색상은 단어 없이 읽히며, 모든 곳에 사용된 색상은 아무 의미도 없습니다.
  4. 하나의 하우스 모션 시스템. 각각 명시된 이유가 있는 몇 가지 명명된 곡선과 스프링을 사용하고, 모든 프레임 번호를 timeline.ts에서 가져옵니다. 이유: 일관된 모션은 곧 브랜드 모션이며, 임시방편 이징은 생성된 것으로 읽힙니다.
  5. 측정을 통한 검증. 렌더링된 픽셀과 디코딩된 오디오가 스크립트와 한 차례의 비평을 통과할 때만 영화가 완료됩니다. 이유: 스튜디오 재생은 인코딩된 파일에 나타날 팝, 고스트 프레임, 싱크 어긋남 및 색상 변화를 숨깁니다.

3. 워크플로우

모든 단계는 파일을 작성하며, 모든 게이트는 실제로 실행하는 검사입니다. 인라인으로 작업하십시오. 하위 에이전트는 비평 전용입니다(§8). 프레임을 병렬로 빌드하는 것은 절약하는 시간보다 더 많은 시간이 소요되기 때문입니다.

단계 0: 수집 → BRIEF.md

  • 브리핑이 이미 제품, 메시지 및 길이를 명시하고 있다면, 다른 모든 것을 추론하고 가정을 기록하십시오.
  • 그렇지 않다면, 최대 3개의 질문을 하십시오: 제품을 한 줄로, 형식과 길이, 그리고 영화가 표시될 위치. 다른 모든 것은 §1에서 가져옵니다.
  • 엔진을 선택하십시오:
    • 기본값은 Remotion.
    • 사용자가 이미 HyperFrames 프로젝트를 가지고 있거나, HTML/GSAP를 원하거나, 변수로 구동되는 --batch 렌더가 필요한 경우 HyperFrames.
  • 하드 밴(위)을 BRIEF.md에 복사하고, 브랜드가 제공한 예외 사항을 추가하십시오. 비평가는 나중에 이 파일을 그대로 입력으로 받으므로, QA 계약 역할을 합니다.
  • 프로젝트를 스캐폴딩하십시오: bash <skill>/scripts/new-film.sh films/<name> --fps 60 --bpm 120 --size 1920x1080 [--engine hyperframes]. npm install을 실행하는 대신 기존 설치를 재사용하려면 --link-modules <dir>/node_modules를 전달하십시오.
  • 게이트: BRIEF.md에는 사양 라인이 있어야 합니다(예: 1920x1080@60, 30s, 120BPM, audio: synthesized).

단계 1: 컨셉 → TREATMENT.md

지금 references/concept-and-story.md를 읽으십시오.

  • 스타일이 아닌 구체적인 내용에서 시작하십시오. 다음을 기록하십시오:
    • 이름이 의미하거나 암시하는 것(종종 마크와 장치를 제공합니다);
    • 기능의 명확하지 않은 동작, "명백한 버전과 달리, 그것은…" 문장을 완성합니다;
    • 제품 자체의 객체(행, 카드, 판독값 및 상태).
  • 각각 다른 렌즈를 통해 3개의 컨셉을 작성하십시오:
    • (a) 제품 자체의 동사 또는 은유를 문자 그대로 만든 것;
    • (b) 시청자의 고통을 시각화한 것;
    • (c) 공식적인 장치: 릴레이 객체, 북엔드, 하나의 끊기지 않는 카메라 움직임, 또는 제품이 되는 컨테이너.
  • 소품이 다른 제품의 영화에 나타날 수 있는 컨셉은 버리십시오. 그것은 당신의 것이 아닙니다.
  • 선택한 컨셉에 대해 assets/TREATMENT.md를 작성하십시오:
    • 로그라인;
    • 아크: 훅(1초 안에 느껴지는 문제 내부) → 전환 → 증명(1–2가지 기능) → 약속 → 락업;
    • 장치 경로, 장면별;
    • 마디 | 시간 | 그림 | 카피 | 사운드 열이 있는 비트 시트;
    • 단어 수를 포함한 전체 카피;
    • 최종 프레임.
  • 삭제 테스트를 실행하십시오. 데모 비트를 제거해도 가치가 여전히 읽혀야 합니다. 가치 비트를 제거했는데 영화가 여전히 "작동"한다면, 그것은 기능 투어였습니다.
  • 특이성 테스트를 실행하십시오. 영화가 더 단순한 제품(예: 항목별 분할 대신 균등 분할, 또는 순위 목록 대신 일반 목록)에도 동등하게 적용될 수 있습니까? 그렇다면, 증명이 제품을 과소평가한 것입니다. 어려운 부분을 보여주십시오.
  • 기능 단어 테스트를 실행하십시오. 음소거 상태로 시청할 때, 낯선 사람이 브리핑의 기능 단어("스트릭", "분할")를 사용할 것입니까? 영리한 장치가 다르게 읽히게 한다면, 기능의 친숙한 형태를 유지하고 장치가 그것을 꾸미게 하십시오.
  • 게이트:
    • 로그라인은 15단어 이하;
    • 특이성 테스트 통과, 답변이 기록됨;
    • 단어 수가 §1 예산 내에 있음;
    • 어떤 줄도 5단어를 초과하지 않으며, 어떤 장면에도 2줄 이상 없음;
    • 장치가 모든 비트 행에 나타남.

단계 2: 브랜드 및 스타일 프레임 → src/brand/

references/brand-and-color.md와 references/copy-and-type.md의 타입 섹션을 읽으십시오.

  • 스타터의 팔레트, 글꼴, 마크 및 데모 이름은 // cinetic:placeholder로 표시된 임시 대용품이며, lint-film.mjs는 모든 표시가 사라질 때까지 오류를 보고합니다. 사용자의 브랜드를 적용하거나 이 영화를 위해 직접 만든 다음 표시를 삭제하십시오. 스타터의 모양을 유지하는 영화는 그것으로 만들어진 다른 모든 영화처럼 보입니다.

  • 성격이 먼저. 브랜드에 대한 세 가지 형용사를 쓴 다음, 그 선택을 도출하십시오. 이 매핑은 references/brand-and-color.md §2에 있습니다:

    • 서체: @fontsource-variable/*에서 이 브랜드를 위한 산세리프체를 선택하고 node scripts/add-font.mjs <name>으로 공급하십시오(공유 node_modules에서 안전함); Geist는 스타터의 임시 대용품일 뿐입니다;
    • 두께와 대소문자;
    • 스테이지(밝음 또는 어두움: 개발 도구 또는 불 관련 이름의 브랜드는 종종 어두움을 원함), 중립 또는 차가움, 그리고 허용된 계열에서 악센트의 색조;
    • 선명함에서 여유로움까지의 모션 특성.

    차분한 노트 앱과 빠른 CI 도구는 같은 모양을 공유해서는 안 됩니다.

  • src/brand/tokens.ts를 작성하십시오(python3 scripts/palette.py --accent '#…' --stage dark는 중립색을 구축하고, 대비를 확인하며 금지된 색조를 거부합니다):

    • 색상: 잉크, 종이, 2–4개의 중립색, 그리고 주석에 의미가 있는 하나의 악센트;
    • 타입: 2가지 두께의 한 패밀리, 필요한 경우 모노 패밀리 하나;
    • 타입 척도;
    • 역할당 하나의 트래킹 값.

  • 하나에 결정하기 전에 마크를 탐색하십시오.

    • 각각 다른 출처(이름의 의미, 문자 형태, 제품 자체의 객체, 아이디어의 은유, 순수 기하학적 구성)에서 6–10개의 방향을 스케치하십시오.
    • 하나의 시트에 함께 렌더링하고 살펴보십시오(MarkSheet는 여전히 references/brand-and-color.md §4에 있음).
    • 다른 10개의 스타트업에 속할 수 있는 방향은 거부하십시오. 여기에는 이 스킬의 예제 어휘인 "기하학적 블록 + 악센트 점" 계열도 포함됩니다.
    • 오독 테스트를 실행하십시오. 마크를 64px로 0.5초 동안 보여주십시오. 먼저 일반적인 기호(빼기, 이모티콘, 메뉴 또는 햄버거 아이콘, 자물쇠, 재생 버튼, 더하기)로 읽힌다면, 그렇지 않을 때까지 거부하거나 변경하십시오.
    • 승자를 100단위 그리드에 src/brand/Mark.tsx로 구축하되, 축소되어도 살아남을 수 있도록 최소 8단위의 간격을 두십시오.

  • 금지 사항 내에서 특성이 있는 팔레트. 프레임워크 기본값이 아닌 이름과 제품의 세계(언덕은 소나무, 이끼, 슬레이트를 제공합니다. 주조소는 숯, 그을음, 빛나는 빨간색을 제공합니다)에서 파생하십시오. 이름의 세계가 열 또는 불일 때, 주황색은 금지되므로, 빨갛게 달아오르게(진정한 숯 위에 빛나는 진한 빨간색) 또는 백열로 가고, 일반적인 개발 도구 파란색은 사용하지 마십시오. 색상은 이름을 전달해야 합니다. 청회색에 가까운 검정 스테이지는 일반적인 개발 도구 다크 테마입니다(palette.py가 언급함). 개발 도구에서 빨간색 UI 태그는 오류로 읽히므로, 빨간색을 브랜드 고유의 용도에 사용하십시오.

    • 프레임워크 블루( #3B82F6 / #2563EB 계열)와 플랫 순수 회색은 "기본값"으로 읽힙니다.
    • 중립색을 세계 쪽으로 착색시키고, 차가운 녹회색 또는 파란색 슬레이트를 사용하십시오. 어두운 스테이지는 #000보다는 소나무 검정 또는 잉크 네이비가 될 수 있습니다.
    • references/brand-and-color.md §8–10에는 작업된 팔레트가 있습니다.

  • 로고를 설계하고 구현하십시오.

(참고: 원본 SKILL.md의 전체 내용이 제공되지 않아 일부가 생략되었을 수 있으나, 제공된 내용을 기반으로 충실히 번역하였습니다. 누락된 부분이 있다면 원본 내용을 재확인하여 번역을 완료할 수 있습니다.)

Individual skills in this repo

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

johdav999/VideoAIAgent

Direct, author, score, render and critique Cinetic films on native Windows in VideoAIAgent. Use for product films, logo stings, loops, walkthroughs and motion graphics using the repository's Remotion or HyperFrames adapters.

관련 스킬

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community