애니메이션을 «왜 움직이는지»부터, Design Motion Principles

design-motion-principles 설치를 부탁해.

원본: https://github.com/kylezantos/design-motion-principles
설명: https://ddalkkak.ssemgong.com/p/design-motion-principles/raw

설치 명령:
```
npx skills add kylezantos/design-motion-principles
```

순서
1. 원본 저장소의 README를 먼저 읽고, 위 명령이 지금도 맞는지 확인해.
2. 위 명령을 터미널에서 실행해. 내 운영체제에 맞지 않으면 README에 있는 방법으로 바꿔서 해.
3. 끝나면 설치됐는지 확인하는 명령(버전 확인 등)을 실행해 결과를 알려 줘.
4. API 키·로그인·유료 결제가 필요하면 멈추고 나에게 물어봐. 키를 만들거나 추측하지 마.

이런 걸 해요

• 만들기 모드 — 버튼·메뉴·창 같은 부품에 목적이 있는 모션을 넣어요. 세 디자이너(Emil Kowalski·Jakub Krehel·Jhey Tompkins)의 공개 글에서 뽑은 기준을 화면 성격에 맞게 섞어 써요.
• 점검 모드 — 움직여야 하는데 안 움직이는 곳을 찾고, 깜빡이는 표시·모든 곳에 커지는 효과·줄줄이 등장 같은 «AI 티 나는 모션»을 골라내요. 결과는 움직이는 예시가 붙은 HTML 보고서로 나와요(--terminal이면 글로만).

이렇게 쓰세요

• «이 코드의 모션 디자인을 점검해 줘»처럼 말로 부르면 돼요.
• 마감 단계에서 한 번 돌려 보는 게 좋아요. 처음부터 모션을 많이 넣지 마세요.
• 움직임 줄이기 설정(prefers-reduced-motion)을 쓰는 사람을 위한 기준도 들어 있어요.

꼭 알아 둘 점

• npx skills 없이 쓰려면 저장소를 받아 skills/design-motion-principles 폴더를 ~/.claude/skills/에 복사해도 돼요.