LottieFiles/motion-design-skill

어떤 프로젝트인가요?

핵심 기능

• 01구현 전에 타이밍, 이징, 연출, 감정적 의도를 다룹니다
• 02Disney의 애니메이션 12원칙을 UI 작업에 적용합니다
• 03진입·퇴장, 상태 피드백, 주변 모션, 여러 요소의 순차 애니메이션 레시피를 제공합니다
• 04지속 시간 및 이징 참고 표와 품질 체크리스트를 제공합니다
• 05특정 라이브러리에 종속되지 않으며 CSS, Framer Motion, GSAP, Lottie, 스프링 물리 기반 시스템에서 사용할 수 있습니다

활용 사례

• 웹 앱의 카드나 목록 컴포넌트에 진입 애니메이션 추가
• 폼 제출 버튼의 로딩·성공·오류 전환 디자인
• 대시보드 위젯이 표시되는 순서 연출
• 기존 애니메이션 코드를 모션 디자인 원칙에 따라 검토

빠른 시작

1. 1

   에이전트에 스킬 설치

   npx skills add LottieFiles/motion-design-skill

사용 전 알아둘 점

• !skills.sh를 통해 40개 이상의 에이전트를 지원하지만, README에는 설치 명령어 외의 설정 방법이 설명되어 있지 않습니다.

토픽

자주 묻는 질문

motion-design-skill은(는) 무엇인가요?

애니메이션 라이브러리와 관계없이 UI 모션 디자인 원칙을 AI 코딩 에이전트에 알려주는 스킬 Motion Design Skill은 애니메이션 코드를 작성하기 전에 AI 에이전트가 모션 디자이너의 관점으로 생각하도록 돕는 지침 모음입니다. 특정 라이브러리에 맞춰 코드만 생성하는 대신 타이밍, 이징, 연출, 그리고 모션에 담긴 감정적 의도를 다룹니다.

motion-design-skill은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

motion-design-skill은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

motion-design-skill은(는) 아직 유지보수되고 있나요?

6개월 이내 업데이트. motion-design-skill의 마지막 커밋은 2026년 5월 18일입니다.

motion-design-skill은(는) 어디에 사용할 수 있나요?

웹 앱의 카드나 목록 컴포넌트에 진입 애니메이션 추가 폼 제출 버튼의 로딩·성공·오류 전환 디자인 대시보드 위젯이 표시되는 순서 연출 기존 애니메이션 코드를 모션 디자인 원칙에 따라 검토

motion-design-skill는 어떻게 설치하나요?

에이전트에 스킬 설치: npx skills add LottieFiles/motion-design-skill

motion-design-skill은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/LottieFiles/motion-design-skill