# Design Motion Principles

> A motion skill with modes for creating and auditing interface animations

- Category: Agent skills (`skills`)
- Tags: `open-source`, `free`
- Official: https://github.com/kylezantos/design-motion-principles
- Wunderlust: https://wunderlust.xyz/r/design-motion-principles
- Image: https://wunderlust.xyz/media/design-motion-principles-poster.jpg
- Video preview: https://wunderlust.xyz/media/design-motion-principles.webm
- Added: 2026-11-05

## What it is

An agent skill with two modes: creating components with motion and auditing existing animations, drawing on approaches from Emil Kowalski, Jakub Krehel and Jhey Tompkins.

## What it’s for

Use it to generate more careful UI animations or to review those an agent has already produced.

## Benefits

- Create mode generates components in React, Framer Motion, CSS or HTML
- Audit mode flags missing motion and typical generic AI animation patterns, with an HTML report
- Includes a motion cookbook and accessibility and performance guides

## Caveats

- MIT license, no pricing
- The README says the skill is not created or endorsed by the three designers

## Similar on Wunderlust

- [Emil Kowalski Design Skill](https://wunderlust.xyz/r/emil-kowalski-skills.md): Emil Kowalski's skills for animation and interface design with agents
- [Interface Skills](https://wunderlust.xyz/r/interface-skills.md): Jakub Krehel's set of 14 skills for building and reviewing interfaces
- [Impeccable](https://wunderlust.xyz/r/impeccable.md): Design vocabulary and commands for agents to review and refine interfaces
- [Apple Design Skill](https://wunderlust.xyz/r/apple-design-skill.md): Agent skill with Apple-style interface design guidelines
- [Anatomy](https://wunderlust.xyz/r/anatomy.md): Skill that creates interactive isometric machine illustrations to explain technical ideas
- [Diagram Design](https://wunderlust.xyz/r/diagram-design.md): A skill that generates editorial diagrams in a single HTML file with SVG