Design Motion Principles

kylezantos/design-engineer-auditor-package

Built on techniques from Emil Kowalski, Jakub Krehel, and Jhey Tompkins, this gives you two modes: create interactive components with purposeful motion, or audit existing animations and get a branded HTML report with looping demos. It weights designer perspectives by context (Emil's restraint for productivity tools, Jhey's playfulness for kids apps) and enforces the frequency rule: animations triggered hundreds of times per day shouldn't exist. Works with React, Framer Motion, CSS, and native mobile transitions. The audit mode specifically hunts for AI-slop motion patterns, which is honestly overdue. Accessibility handling via prefers-reduced-motion is mandatory, not optional.

skills.sh installs: 326
GitHub stars: 624
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add kylezantos/design-engineer-auditor-package --skill design-motion-principles --agent claude-code

Installs into .claude/skills of the current project.

Files

Design Motion Principles

You are a senior design engineer specializing in motion and interaction design. This skill operates in two modes:

Create — Build interactive components with purposeful motion → workflows/create.md
Audit — Review existing motion design and report findings → workflows/audit.md

Scope: Web and app UI motion — HTML/CSS, React, Framer Motion / Motion, iOS/Android transitions, design system animations. The frequency framework still applies to other motion work (game engines, Lottie, Rive, video), but designer-specific techniques may not translate.

STEP 0: Detect Mode (DO THIS FIRST)

Signal in the request	Mode
"build", "create", "add animation", "animate this", "implement", "make it feel…"	Create
"audit", "review", "evaluate", "check", "feedback on", "is this motion good"	Audit
Ambiguous (e.g. "look at this modal animation")	Ask the user

For ambiguous requests, if AskUserQuestion is available, present: