Claude Code와 Codex에서 AI 생성 모션을 입력에 반응하는 웹 애니메이션으로 변환하는 에이전트 스킬
frankxai/awesome-motion-design-agent-skills
GSAP, Motion, Remotion, Lottie, Rive 리소스와 설치 가능한 에이전트 스킬 5종 모음
- 스타
- 69
- 포크
- 20
- 열린 이슈
- 5
- 마지막 커밋
- 6일 전
어떤 프로젝트인가요?
AI 코딩 에이전트를 위한 모션 디자인 자료 모음입니다. GSAP, Motion, Anime.js, React Three Fiber 같은 웹 애니메이션 라이브러리와 Remotion 같은 동영상 도구, Lottie 및 Rive 런타임을 정리하고, 같은 기술 스택을 위한 서드파티 에이전트 스킬 팩도 함께 소개합니다.
저장소에는 SKILL.md 형식의 자체 제작 스킬 5종도 포함되어 있습니다. 제품 UI 모션과 기술 스택 선택, 시네마틱한 웹사이트 연출, React 기반 결정론적 동영상 제작, 생성형 미디어 라우팅, 웹 애니메이션을 검토하고 캡처하는 모션 QA를 다룹니다. reduced-motion 경로와 실제 기기에서의 검증도 가이드라인에 포함되어 있습니다.
npx skills add를 사용해 다양한 에이전트에 스킬을 설치할 수 있으며, Claude Code 플러그인 마켓플레이스를 이용하거나 zip 파일을 Claude.ai에 업로드해 설치할 수도 있습니다. 프로젝트는 CC0-1.0 라이선스로 공개되어 있습니다.
핵심 기능
- 01GSAP, Motion, Remotion, Lottie, Rive 관련 자료를 선별해 정리
- 02UI 모션, 웹사이트 연출, React 동영상, 모션 QA를 다루는 SKILL.md 스킬 5종
- 03npx skills add, Claude Code 플러그인 마켓플레이스 또는 zip 업로드로 설치 가능
- 04모션 품질 평가 기준과 사이트 모션 명세 포함
- 05설치 명령어와 함께 서드파티 에이전트 스킬 팩 소개
활용 사례
- 애니메이션이 있는 제품 인터페이스를 만들 때 코딩 에이전트에 지침 제공
- Remotion으로 React 코드에서 프로그래밍 방식으로 동영상 생성
- 출시 전 웹 애니메이션의 모션 품질 검토
- 모션 기술 스택에 적합한 유지 관리 중인 애니메이션 라이브러리와 스킬 팩 찾기
빠른 시작
- 1
명령어 하나로 다섯 가지 스킬을 모두 에이전트에 설치하기
npx skills add frankxai/awesome-motion-design-agent-skills - 2
설치된 스킬 확인하기
npx skills list
사용 전 알아둘 점
- 이 저장소는 주로 엄선된 링크 목록이며, 항목 중 상당수는 별도로 검토해야 하는 서드파티 프로젝트를 가리킵니다.
- 스킬을 설치하면 에이전트 내부에서 지침이 실행되므로, README에서는 사용 전에 서드파티 팩을 살펴보도록 안내합니다.
토픽
자주 묻는 질문
- awesome-motion-design-agent-skills은(는) 무엇인가요?
- GSAP, Motion, Remotion, Lottie, Rive 리소스와 설치 가능한 에이전트 스킬 5종 모음 AI 코딩 에이전트를 위한 모션 디자인 자료 모음입니다. GSAP, Motion, Anime.js, React Three Fiber 같은 웹 애니메이션 라이브러리와 Remotion 같은 동영상 도구, Lottie 및 Rive 런타임을 정리하고, 같은 기술 스택을 위한 서드파티 에이전트 스킬 팩도 함께 소개합니다.
- awesome-motion-design-agent-skills은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- awesome-motion-design-agent-skills은(는) CC0-1.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- awesome-motion-design-agent-skills은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. awesome-motion-design-agent-skills의 마지막 커밋은 2026년 10월 14일입니다.
- awesome-motion-design-agent-skills은(는) 어디에 사용할 수 있나요?
- 애니메이션이 있는 제품 인터페이스를 만들 때 코딩 에이전트에 지침 제공 Remotion으로 React 코드에서 프로그래밍 방식으로 동영상 생성 출시 전 웹 애니메이션의 모션 품질 검토 모션 기술 스택에 적합한 유지 관리 중인 애니메이션 라이브러리와 스킬 팩 찾기
- awesome-motion-design-agent-skills는 어떻게 설치하나요?
- 명령어 하나로 다섯 가지 스킬을 모두 에이전트에 설치하기: npx skills add frankxai/awesome-motion-design-agent-skills 설치된 스킬 확인하기: npx skills list
- awesome-motion-design-agent-skills은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/frankxai/awesome-motion-design-agent-skills
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
AI 코딩 에이전트에 모션 디자인, After Effects, Remotion 영상, 로고 애니메이션, 모션 배경 지침을 제공하는 설치형 스킬 모음입니다.
애니메이션 라이브러리와 관계없이 UI 모션 디자인 원칙을 AI 코딩 에이전트에 알려주는 스킬
생성형 AI 대신 Remotion 코드로 제품 페이지를 시네마틱 홍보 영상으로 만드는 Claude Code 및 Codex용 에이전트 스킬입니다.
Claude Code, Codex, Cursor 같은 AI 코딩 에이전트에 Remotion 영상 제작 모범 사례를 알려주는 Agent Skills 모음입니다.
영상 생성 모델 없이 51가지 스타일로 단편 영화를 연출하는 Claude Code 스킬