What is the design-motion-principles skill?
The design-motion-principles skill is a motion and interaction design skill from kylezantos with two modes. Create builds components with purposeful motion, and Audit reviews existing animation and reports findings. Both weight three lenses, Emil Kowalski, Jakub Krehel and Jhey Tompkins, by project context, and both require reduced-motion handling.
Three questions drive this skill. Emil asks whether something should animate at all, Jakub asks whether it is subtle enough for production, and Jhey asks what it could become. The skill picks which voice leads for your project.
It is built from the published work of Emil Kowalski, Jakub Krehel and Jhey Tompkins. The three-lens framing is the skill's own synthesis, and the designers have not authored or endorsed it.
Two modes: create and audit
- Create mode runs a light discovery, then writes components in React, Framer Motion, CSS or HTML using recipes from a motion cookbook.
- Audit mode scans your project, looks for UI that should animate but does not, and checks code against an anti-slop checklist.
- The agent picks the mode from your wording: build, add animation or implement means Create, while audit, review or feedback means Audit.
- Ambiguous requests get a question about which mode you want.
What changes in your agent's output
- Animation frequency is checked first. Rare interactions can be expressive, daily ones subtle, and keyboard-initiated actions are never animated.
- Durations depend on context: under 300ms for productivity UI, 200 to 500ms for production polish, and whatever serves the effect for playful work.
- Every animation handles prefers-reduced-motion, in both modes.
- Audit results arrive as a branded HTML report with looping demos beside Critical and Important findings, or as terminal markdown with a flag.
Who the design-motion-principles skill is for
Best for
- Adding enter and exit motion to modals and toasts in React, Framer Motion, CSS or HTML.
- Reviewing a codebase for generic motion habits such as hover-scale on everything and stagger spam.
- Teams whose product type changes the right answer, such as a SaaS dashboard versus a kids app.
Not for
- Game engines, Lottie, Rive or video. The frequency rule carries over, but the designer techniques may not.
- A single fixed house style. The skill deliberately weights lenses that disagree.
- Dedicated performance fixes for dropped frames. Use fixing-motion-performance for that.
Use it with UiChemy
The skill writes and reviews motion code. When the page you animate lives in WordPress, UiChemy Composer can edit the result as real HTML, CSS and JS inside Elementor or Gutenberg. Click Get Started on uichemy.com. See also improve-animations.
How to install Design Motion Principles Skill: Build and Audit UI Motion
git clone https://github.com/kylezantos/design-motion-principles.gitClone the repository
Run
git clone https://github.com/kylezantos/design-motion-principles.git. The skill sits in skills/design-motion-principles, with workflows and references subfolders.Copy the skill folder for your agent
For Claude Code, the README gives
cp -r design-motion-principles/skills/design-motion-principles ~/.claude/skills/for all projects. For Cursor, it gives the same copy into ~/.cursor/skills/.Keep the whole folder
SKILL.md routes to workflows/create.md and workflows/audit.md and loads reference files such as the motion cookbook and accessibility notes, so copy every subfolder.
Ask in plain language
Use a build request such as add a polished enter and exit animation to this modal, or an audit request such as review the animations in this component.
Check that it loaded
Ask for an audit of one component. The agent should propose a lens weighting for your project type and ask you to confirm it before reporting findings.
Key features
- Mode detectionSKILL.md reads signals in your request to choose Create or Audit, then loads the matching workflow file and follows it exactly. Ambiguous requests trigger a question.
- Three designer lensesEmil Kowalski stands for restraint and speed, Jakub Krehel for production polish, and Jhey Tompkins for playful experimentation. Each has its own reference file.
- Context-to-lens weightingA table maps project types, from productivity tools and SaaS dashboards to kids apps, landing pages and e-commerce, to a primary, secondary and selective lens.
- Frequency gateBefore adding or approving any animation, the agent asks how often users trigger it. Frequent interactions get no animation or an instant transition.
- Motion gap analysisAudit mode searches for conditional renders without AnimatePresence, dynamic styles without transitions and instant state swaps that should be animated.
- Anti-slop checklistA quality gate flags pulsing indicators, blur-everywhere entrances, hover-scale-on-everything, stagger spam, bouncy springs on utility actions and uniform fade-ins.
- Motion cookbookOne recipe library covers enter and exit animation, easing, springs, clip-path, @property, shared-layout FLIP and scroll-driven animation.
- Creation gotchasA built-in self-check targets common failures in generated motion, including decorative-by-default animation, scale(0) starts, bare ease and missing reduced-motion handling.
- Branded HTML audit reportThe default audit output is a self-contained file written to a motion-audits folder, with auto-looping CSS demos. A terminal flag switches to inline markdown for headless use.
Frequently asked questions
What is the design-motion-principles skill?
It is a motion and interaction design skill with two modes, Create and Audit. It gives an AI coding agent guidance distilled from the published work of Emil Kowalski, Jakub Krehel and Jhey Tompkins, and it weights those lenses by your project type before building or reviewing anything.
How do I install the design-motion-principles skill?
Clone kylezantos/design-motion-principles and copy skills/design-motion-principles into your agent's skills directory. The README gives ~/.claude/skills/ for global use and ~/.cursor/skills/ for Cursor. Then ask the agent to build or audit motion in plain language, such as audit the motion design in this codebase.
Which AI coding agents work with design-motion-principles?
The README says it works with Claude Code, Cursor, Windsurf and other AI coding assistants, and it lists copy paths for Claude Code and Cursor. For any other agent that loads SKILL.md folders, copy the same folder to wherever that agent expects skills.
What does the audit mode produce?
By default it writes a self-contained HTML report to a motion-audits folder and opens it in your browser, with auto-looping CSS demos next to each Critical and Important finding. Passing the terminal flag returns the same findings as an inline markdown report, which suits headless or CI use.
What counts as AI slop motion in this skill?
The anti-checklist names pulsing indicators, blur-everywhere entrances, hover-scale-on-everything, stagger spam, bouncy springs on utility actions, uniform fade-ins and motion on mount for static content. Each category has a frequency heuristic, so a single intentional use does not trip the check.
Does it cap animation durations?
Not universally. SKILL.md says not to flag or cap durations without checking the context weighting first. Productivity UI aims under 300ms, with 180ms ideal, production polish sits at 200 to 500ms, and playful or kids work can use whatever serves the effect.
How does it relate to other motion skills?
This skill is a router that weighs three perspectives and offers both build and audit workflows, so one install covers writing motion and checking it. For another review pass, see review-animations, and for Framer Motion specifics, see motion-framer-motion.
What license does design-motion-principles use?
The repository is MIT licensed. The README states MIT at the end and GitHub reports the same license. The credits section also says the skill is an interpretation of the three designers' public work and is not authored or endorsed by them.