AI 에이전트를 위한 보편적 모션 설계 원칙. 철학 우선, 구현 중립.

에이전트에게 모션 디렉터처럼 생각하도록 가르쳐 — 애니메이션 코드 한 줄을 쓰기 전에 적절한 타이밍, 이완, 안무, 감정적 의도를 선택하는 법. CSS, Framer Motion, GSAP, Lottie, Spring 등 모든 애니메이션 시스템과 호환됩니다.

설치

Claude Code, Cursor, Codex, GitHub Copilot 등 40+ 에이전트를 지원합니다.

포함된 내용

코어 (SKILL.md) — 8단계 체크리스트, 모션 성격 원형, 기간/완화 표, 속성 선택 가이드, 공통 패턴, 품질 규칙 등 빠른 참조.

철학 (director/) — 세 가지 기둥, UI에 맞게 적용된 디즈니의 12가지 원칙, 감정 투 동작 매핑, 안무, 내러티브 구조, 맥락 적응에 대해 깊이 탐구합니다.

패턴 (patterns/) — 입구/퇴장 애니메이션, 상태 피드백(성공, 오류, 로딩, 호버), 주변 및 연속 동작, 다중 요소 안무에 대한 즉시 사용 가능한 레시피.

참고문헌 (reference/) — 타이밍과 이완, 속성 선택 가이드, 품질 체크리스트, 일반적인 애니메이션 문제 해결에 대한 조회 테이블.

Motion Design Skill

Universal motion design principles for AI agents. Philosophy-first, implementation-agnostic.

Teaches agents to think like motion directors — choosing the right timing, easing, choreography, and emotional intent before writing a single line of animation code. Works with any animation system (CSS, Framer Motion, GSAP, Lottie, Spring, etc.).

Install

npx skills add LottieFiles/motion-design-skill

Supports 40+ agents including Claude Code, Cursor, Codex, GitHub Copilot, and more.

What’s included

Core (SKILL.md) — Quick reference with the 8-step checklist, motion personality archetypes, duration/easing tables, property selection guide, common patterns, and quality rules.

Philosophy (director/) — Deep dives into the three pillars, Disney’s 12 principles adapted for UI, emotion-to-motion mapping, choreography, narrative structure, and context adaptation.

Patterns (patterns/) — Ready-to-use recipes for entrance/exit animations, state feedback (success, error, loading, hover), ambient/continuous motion, and multi-element choreography.

Reference (reference/) — Lookup tables for timing and easing, property selection guide, quality checklist, and troubleshooting common animation problems.

When it activates

The skill activates when you’re working on:

• UI animations (buttons, cards, modals, page transitions)
• Micro-interactions and feedback animations
• Loading, success, or error states
• Scroll-triggered or progress-based animations
• Establishing brand motion identity
• Multi-element choreography and sequencing

Example prompts

Add a playful entrance animation to these card components

Create a loading → success → error state transition for this form submit button

Choreograph the entrance sequence for this dashboard — hero chart first, then stats cards, then sidebar

Review my animation code and suggest improvements based on motion design principles

Skill structure

skills/motion-design/
├── SKILL.md                          # Main skill instructions (< 500 lines)
├── director/
│   ├── core-philosophy.md            # Three Pillars deep dive
│   ├── decision-framework.md         # Full decision pipeline
│   ├── disney-principles.md          # 12 principles, UI-adapted
│   ├── motion-personality.md         # 4 archetypes + brand identity
│   ├── emotion-mapping.md            # Emotion → motion translation
│   ├── choreography.md              # Multi-element coordination
│   ├── narrative-structure.md        # Micro-story framework
│   └── context-adaptation.md         # Platform, a11y, performance
├── patterns/
│   ├── entrance-exit.md              # Entrance/exit recipes
│   ├── state-feedback.md             # Success, error, loading, hover