# 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

```bash
npx skills add LottieFiles/motion-design-skill
```

Supports [40+ agents](https://skills.sh) 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
│   ├── ambient-continuous.md         # Looping, breathing, parallax
│   └── multi-element.md             # Stagger + choreography recipes
└── reference/
    ├── timing-easing-tables.md       # Duration + easing lookups
    ├── property-selection.md         # Property communication guide
    ├── quality-checklist.md          # Evaluation criteria
    └── troubleshooting.md           # Animation smells + fixes
```

## License

MIT
