motionlisted
Install: claude install-skill woogi-kang/woogi-harness
# Motion Skill
프로젝트의 애니메이션 시스템과 모션 언어를 구성합니다.
## Triggers
- "모션", "애니메이션", "motion", "animation", "트랜지션", "transition", "인터랙션"
---
## Input
| 항목 | 필수 | 설명 |
|------|------|------|
| `aestheticDirection` | ✅ | 디자인 방향 (minimal, bold, playful 등) |
| `motionIntensity` | ❌ | 모션 강도 (subtle, moderate, expressive) - 기본값: moderate |
| `reducedMotionSupport` | ❌ | prefers-reduced-motion 지원 여부 - 기본값: true |
---
## Output
| 산출물 | 설명 |
|--------|------|
| `motion-tokens.css` | CSS 변수로 정의된 모션 토큰 |
| `motion-variants.ts` | Framer Motion variants 프리셋 |
| `globals.css` 업데이트 | Tailwind @theme 및 tw-animate-css 통합 |
---
## Workflow
### Step 1: 모션 원칙 정립
**디자인 방향별 모션 성격:**
| Direction | 모션 성격 | Duration | Easing | 특징 |
|-----------|----------|----------|--------|------|
| **Minimal** | 절제된 | Short (150-200ms) | ease-out | 미세한 피드백 |
| **Elegant** | 우아한 | Medium (300-400ms) | ease-in-out | 부드러운 흐름 |
| **Bold** | 역동적 | Short (100-150ms) | ease-out | 즉각적, 강렬함 |
| **Playful** | 활발한 | Variable | spring | 튀는 느낌 |
| **Technical** | 정밀한 | Short (100-200ms) | linear/ease-out | 기계적, 정확함 |
| **Luxury** | 고급스러운 | Long (400-600ms) | cubic-bezier | 여유로운 전환 |
| **Organic** | 자연스러운 | Medium (250-350ms) | spring | 물리적 느낌 |
---
### Step 2: Duration 토큰 정의
```css
/* app/globals.css - Motion tokens */
:root {
/* =========================================
* Duration Scale
* ========================================= */
/* Instant - No perception of delay */
--duration-instant: 0ms;
/* Fast