Add LottieFiles motion-design skill

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0119deVM65AKpJiLTLhEdDg9

.agents/skills/motion-design/patterns/state-feedback.md

@@ -0,0 +1,96 @@
+# State & Feedback Patterns
+
+## Button Press
+
+### Playful
+- Press: scale 0.95 (60ms, ease-out); Release: overshoot 1.05 (80ms); Settle: 1.0 (120ms, spring)
+- Secondary: shadow shrinks/grows; color darkens/brightens. Total ~260ms
+
+### Premium
+- Press: scale 0.98 (80ms); Release: 1.0 (150ms, no overshoot)
+- Opacity dims to 90% on press. Total ~230ms
+
+### Corporate
+- Press: scale 0.97 (60ms); Release: 1.0 (100ms); overshoot 0-2%
+- Background darkens 10%. Total ~160ms
+
+## Hover States
+
+| Element | Effect | Duration |
+|---------|--------|----------|
+| Button | Scale 1.02-1.05 | <100ms |
+| Card | Scale 1.01-1.02 + shadow lift | <100ms |
+| Link | Color change + underline | <100ms |
+| Icon | Scale 1.1 + rotation 2-5° | <100ms |
+| Image | Scale 1.03 (overflow hidden) | 150ms |
+
+Hover enter <100ms; hover exit 150-200ms (slower = polished).
+
+## Toggle / Switch
+- Thumb slides (120-180ms, ease-in-out); track color transitions simultaneously
+- Slight squash in movement direction
+- Playful: bounce at destination; Premium: smooth, no overshoot
+
+## Success State
+
+### Checkmark Success
+1. Container: scale 0.9→1.0 (200ms, ease-out-back, 5-10% overshoot)
+2. Checkmark: stroke draw (150ms, ease-out, 100ms delay)
+3. Color: to green (200ms); ambient glow/particles (300ms)
+4. Total: 400-500ms
+
+### Confirmation Badge
+1. Badge scales from 0 (200ms, ease-out-back)
+2. Text fades in (150ms, 50ms delay)
+3. Background pulse (300ms, sine)
+
+### Payment Success
+1. Spinner → checkmark crossfade (200ms)
+2. Checkmark draws (200ms); container → success color (200ms)
+3. Text fades in (200ms, 100ms delay); optional confetti (300-500ms)
+
+## Error State
+
+### Error Shake
+- Horizontal oscillation ±10-15px, 2-3 cycles decreasing amplitude
+- ease-in-out, 300-400ms total; red tint; no overshoot; settles at origin
+
+### Inline Validation
+1. Error text slides down + fades in (200ms)
+2. Border → red (150ms); icon scales in (150ms, 50ms delay)
+3. Optional single shake (200ms)
+
+### Form Submission Error
+1. Button returns to normal (200ms)
+2. Error message slides in (250ms)
+3. Affected fields highlight red (150ms, staggered 30ms)
+4. Smooth scroll to first error (300ms, ease-in-out)
+
+## Loading States
+
+### Spinner
+- Continuous 360°, linear, 1000-1500ms/rev; optional breathing pulse (2-3s)
+
+### Skeleton
+- Gradient sweep L→R, 1500-2000ms; base 10-20% opacity, peak 30-40%
+
+### Progress Bar
+- Width/transform, ease-in-out; optional color milestones + shimmer
+
+### Indeterminate
+- Oscillating position/width, 1500-2500ms, ease-in-out; continuous, never frantic
+
+## Warning State
+1. Yellow/amber border (150ms)
+2. Warning icon scales in (150ms, subtle overshoot)
+3. Optional icon pulse (2-3s, sine); text fades in (200ms, 50ms delay)
+
+## Disabled / Enabled
+
+- **Disabling**: opacity to 50-60% (200ms); optional scale to 98%
+- **Enabling**: opacity to 100% (200ms); optional scale pulse 98%→100%
+
+## Focus States
+- Focus ring: scale 95%→100% + opacity (150ms)
+- Card focus: scale 1.01, shadow increase (150ms)
+- Tab nav focus: <100ms; must work with reduced-motion