| name | design-motion-principles |
| description | Motion and interaction design expert with two modes — build interactive
components with purposeful motion, or audit existing animations for AI-slop
patterns. Audit emits a branded HTML report with looping CSS demos per finding.
Based on Emil Kowalski (restraint), Jakub Krehel (production polish), and
Jhey Tompkins (creative experimentation) — lenses weighted to project context.
Works with React, Framer Motion, CSS, and HTML.
|
| triggers | ["add animation","audit animation","hover state","enter exit animation","motion review","AI slop motion","motion audit","purposeful motion","motion principles"] |
| das | {"category":"motion-animation","type":"package","upstream":"https://github.com/kylezantos/design-motion-principles","version":"latest"} |
design-motion-principles
Catalogue stub — full skill: kylezantos/design-motion-principles
Type: package — install via npx skills add (SKILL.md alone is not sufficient; requires workflow files)
When to use
Activate when the user wants to:
- Build interactive components with motion (transitions, hover states, micro-interactions, enter/exit animations)
- Audit existing UI motion for AI-slop patterns (pulsing indicators, hover-scale-on-everything, stagger-spam)
- Get motion guidance weighted across Emil Kowalski, Jakub Krehel, and Jhey Tompkins lenses
Do not activate for static layout, color, or typography work — route to a design-systems skill instead.
How to install
npx skills add kylezantos/design-motion-principles
Works with Claude Code, Cursor, Windsurf, and other AI coding assistants.
How to invoke after install
The skill detects mode from your request:
| You say | Mode |
|---|
| "animate this", "add motion", "make it feel alive" | Create |
| "audit my animations", "review motion", "check for AI slop" | Audit |
| Ambiguous | Skill asks which mode |
Invoke the design-motion-principles skill and state your request.
What it does
Two modes, three lenses weighted to project context:
| Mode | Output |
|---|
| Create | Context discovery → lens weighting → component with motion baked in (React / Framer Motion / CSS / HTML) |
| Audit | Motion-gap analysis + anti-AI-slop checklist → branded HTML report with auto-looping CSS demos, or --terminal for inline markdown |
Three lenses:
- Emil Kowalski — Restraint and speed. "Should this animate at all?"
- Jakub Krehel — Production polish. "Is this subtle enough?"
- Jhey Tompkins — Creative experimentation. "What could this become?"
The productive tension between these three lenses — not one applied universally — is the point.
