Design Motion Principles
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
Install
$ npx -y skills add kylezantos/design-engineer-auditor-package --skill design-motion-principles --agent claude-codeInstalls 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:
- Create — Build or improve the component's motion
- Audit — Review existing motion and report findings
Sponsors
Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthly
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any language
Agent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/kylezantos/design-engineer-auditor-package
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
