12-principles-of-animation

Files (1)

• SKILL.md

SKILL.md (first lines)

# 12 Principles of Animation

Review animation code for compliance with Disney's 12 principles adapted for web interfaces.

## How It Works

1. Read the specified files (or prompt user for files/pattern)
2. Check against all rules below
3. Output findings in `file:line` format

## Rule Categories

| Priority | Category | Prefix     |
| -------- | -------- | ---------- |
| 1        | Timing   | `timing-`  |
| 2        | Easing   | `easing-`  |
| 3        | Physics  | `physics-` |
| 4        | Staging  | `staging-` |

## Rules

### Timing Rules

#### `timing-under-300ms`

User-initiated animations must complete within 300ms.

**Fail:**

```css
.button {
  transition: transform 400ms;
}
```

**Pass:**

```css
.button {
  transition: transform 200ms;
}
```

#### `timing-consistent`

Similar elements must use identical timing values.

**Fail:**

```css
.button-primary {
  transition: 200ms;
}
.button-secondary {
  transition: 150ms;
}
```

**Pass:**

```css
.button-primary {
  transition: 200ms;
}
.button-secondary {
  transition: 200ms;
}
```

#### `timing-no-entrance-context-menu`

Context menus should not animate on entrance (exit only).

**Fail:**

```tsx
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />
```

**Pass:**

```tsx
<motion.div exit={{ opacity: 0 }} />
```

### Easing Rules

#### `easing-entrance-ease-out`

Entrances must use `ease-out` (arrive fast, settle gently).

**Fail:**

```css
.modal-enter {
  animation-timing-function: ease-in;
}
```

**Pass:**

```css
.modal-enter {
  animation-timing-function: ease-out;
}
```

#### `easing-exit-ease-in`

Exits must use `ease-in` (build momentum before departure).

**Fail:**

```css
.modal-exit {
  animation-timing-function: ease-out;
}
```

From aniruddha-chaudhari/skill-vs-mcp-benchmarks, MIT.

More from aniruddha-chaudhari/skill-vs-mcp-benchmarks