Repolode
제출하기
Liamrjohnston

Liamrjohnston/remotion-motion-graphics-skill

AI 코딩 에이전트가 Remotion으로 방송 스타일 모션 그래픽을 만들도록 안내하는 Agent Skills 4종입니다.

GitHub에서 보기
스타
119
포크
9
열린 이슈
0
마지막 커밋
3개월 전

어떤 프로젝트인가요?

이 저장소는 Claude Code, Codex, Cursor 같은 AI 코딩 에이전트를 위한 Agent Skills 4종을 제공합니다. 각 스킬은 키네틱 타이포그래피와 워크플로 다이어그램부터 카메라 이동, 터미널 데모, 에디토리얼 하이라이트 카드까지 완성도 높은 Remotion 모션 그래픽 클립을 만드는 과정을 안내합니다. 코드를 작성하기 전에 에이전트는 출력 형식(4:3 또는 9:16)과 배경 스타일을 확인한 뒤, 이름이 명시된 제품을 조사하고 로고를 확인합니다.

스킬은 네 가지 영역을 다룹니다. 리서치, 에셋 확인, 결과물 검토를 맡는 gate 스킬, 하나의 연속된 장면에서 키프레임 카메라를 이동시키는 cinematic-camera 스킬, 실제 CLI 데모를 위한 terminal-inserts 스킬, 하이라이터 효과가 적용된 뉴스 스타일 카드를 만드는 article-highlights 스킬입니다. gate에는 출처를 검증하고 에셋의 해시를 계산하며, 클립을 납품 가능 상태로 표시하기 전에 독립적인 검토를 요구하는 스크립트가 포함됩니다. 또한 네온, 글로우, 그라데이션 구체 스타일을 금지하는 엄격한 시각적 정책을 적용합니다.

스킬은 Agent Skills 형식의 일반 Markdown 파일이며, npx 명령어 하나로 설치할 수 있습니다. API 사용의 정확성을 담당하는 공식 Remotion skill과 함께 사용하도록 만들어졌습니다.

핵심 기능

  • 01모션 그래픽, 카메라 이동, 터미널 데모, 에디토리얼 하이라이트를 다루는 Agent Skills 4종을 제공합니다.
  • 02제작을 시작하기 전에 출력 형식(4:3 또는 9:16)과 배경을 확인합니다.
  • 03이름이 명시된 제품을 조사하고 실제 로고와 제품 화면을 사용합니다.
  • 04출처를 검증하고 에셋의 해시를 계산하며 납품을 확인하는 스크립트가 포함됩니다.
  • 05네온과 글로우를 전혀 사용하지 않는 시각적 정책을 적용합니다.

활용 사례

  • AI 에이전트로 대본의 한 줄을 짧은 세로형 Reels 또는 TikTok 클립으로 제작하기.
  • 제품 영상에 사용할 CLI 도구나 코딩 에이전트의 실제 터미널 데모 만들기.
  • 릴리스 발표에 쓸 하이라이트 문구가 들어간 에디토리얼 뉴스 스타일 카드 제작하기.
  • AI 어시스턴트로 만든 Remotion 프로젝트에 일관된 카메라 기반 모션 추가하기.

빠른 시작

  1. 1

    Remotion 프로젝트를 만들고 skills를 설치합니다

    npx create-video@latest my-graphics
  2. 2

    프로젝트 폴더로 이동합니다

    cd my-graphics
  3. 3

    이 저장소의 skills를 프로젝트에 설치합니다

    npx skills add liamrjohnston/remotion-motion-graphics-skill -y
  4. 4

    Remotion Studio에서 그래픽을 미리 봅니다

    npx remotion studio

사용 전 알아둘 점

  • skills는 AI 코딩 에이전트를 위한 지침이므로, 사용하려면 Claude Code나 Codex 같은 에이전트와 Remotion 프로젝트가 필요합니다.
  • 빌드할 때마다 먼저 형식과 배경에 관한 질문에 답해야 하므로 요청마다 단계가 하나 추가됩니다.

토픽

#remotion#motion-graphics#agent-skills#video#claude-code#react#video-generation

자주 묻는 질문

remotion-motion-graphics-skill은(는) 무엇인가요?
AI 코딩 에이전트가 Remotion으로 방송 스타일 모션 그래픽을 만들도록 안내하는 Agent Skills 4종입니다. 이 저장소는 Claude Code, Codex, Cursor 같은 AI 코딩 에이전트를 위한 Agent Skills 4종을 제공합니다. 각 스킬은 키네틱 타이포그래피와 워크플로 다이어그램부터 카메라 이동, 터미널 데모, 에디토리얼 하이라이트 카드까지 완성도 높은 Remotion 모션 그래픽 클립을 만드는 과정을 안내합니다. 코드를 작성하기 전에 에이전트는 출력 형식(4:3 또는 9:16)과 배경 스타일을 확인한 뒤, 이름이 명시된 제품을 조사하고 로고를 확인합니다.
remotion-motion-graphics-skill은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
remotion-motion-graphics-skill은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
remotion-motion-graphics-skill은(는) 아직 유지보수되고 있나요?
6개월 이내 업데이트. remotion-motion-graphics-skill의 마지막 커밋은 2026년 7월 24일입니다.
remotion-motion-graphics-skill은(는) 어디에 사용할 수 있나요?
AI 에이전트로 대본의 한 줄을 짧은 세로형 Reels 또는 TikTok 클립으로 제작하기. 제품 영상에 사용할 CLI 도구나 코딩 에이전트의 실제 터미널 데모 만들기. 릴리스 발표에 쓸 하이라이트 문구가 들어간 에디토리얼 뉴스 스타일 카드 제작하기. AI 어시스턴트로 만든 Remotion 프로젝트에 일관된 카메라 기반 모션 추가하기.
remotion-motion-graphics-skill는 어떻게 설치하나요?
Remotion 프로젝트를 만들고 skills를 설치합니다: npx create-video@latest my-graphics 프로젝트 폴더로 이동합니다: cd my-graphics 이 저장소의 skills를 프로젝트에 설치합니다: npx skills add liamrjohnston/remotion-motion-graphics-skill -y Remotion Studio에서 그래픽을 미리 봅니다: npx remotion studio
remotion-motion-graphics-skill은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/Liamrjohnston/remotion-motion-graphics-skill

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트