01
It starts by itself
PR touches UI motion. Runs in GitHub Actions or Claude Code routine.
- ↻ PR touches UI motion
pull_request.opened or synchronize, paths: CSS, React or Framer Motion files
kylezantos · 12K installsDesign Motion Principles skill
Runs by itself, every time you change animations.
Every animation change gets a review.
Install the Design Motion Principles skill and make it a habit: follow https://gethabit.dev/skills/kylezantos/design-motion-principles.md
- 1Copy
- 2Paste into Claude Code, Codex or Cursor
- 3It runs by itself
12K installs1K starsMIT licenceSource on GitHub ↗
Design Motion Principles
by kylezantos · 12K installs
The skill
Checks if screen animations feel right.
Only when you ask.
Smoother apps
Every animation change gets a review. Smoother, calmer motion in your app.
↻ Runs by itselfevery time you change animations
How the habit works.
You don't have to.
When does it start? How does it check its work? What does it remember?
One run, step by step.
Then it stops.
Stops after one pull request per run, with at most 20 animations reviewed.
- 01
Pick up change
A pull request that changes animations starts the run, so the mode is Audit.
- 02
Weight the lenses
The agent reads the project type and picks primary, secondary and selective lenses from the mapping table.
- 03
Apply frequency gate
Each animation is judged by how often a user triggers it, and keyboard actions should not animate.
- 04
Run the checklists
The agent follows workflows/audit.md with the audit checklist, the anti-checklist and the accessibility reference.
- 05
Write the report
Findings go into the HTML report with demo cards, as the output format reference describes.
- 06
Log the run
Lens weights and open findings go into the log for the next audit.
What it may do.
Nothing more.
It writes only in its own folder and asks you before anything goes out.
- Writes only inloops/motion-audit-loop/**
- Talks tono outside service
- Sendsnothing
- Your OKNothing goes out, so it needs no OK.
Is it for you?
Use it when it fits.
Read both lists. If the left one sounds like you, the Design Motion Principles skill helps.
Use it when
- ✓ You add transitions or hover states
- ✓ You review animations in a pull request
- ✓ Motion feels generic or too loud
Skip it when
- – Your project has no UI motion
- – You need game engine or video animation
Design Motion Principles skill, answered.
Does the loop change my animations?
No. It runs only in Audit mode and writes a report. Use Create mode by hand when you want new motion.
Will it flag every long duration?
No. The skill weights each lens by project context first, so a playful app gets different advice than a productivity tool.
What is always checked?
Support for prefers-reduced-motion. The skill treats it as mandatory in both modes.
How do I install the Design Motion Principles skill?
Copy the prompt at the top into your agent. It installs the skill from kylezantos/design-motion-principles and sets up the habit. Or run npx skills add kylezantos/design-motion-principles --skill design-motion-principles.
Is the Design Motion Principles skill free?
Yes. It is published under MIT. Habit is free too.
Design Motion Principles. Now as a habit.
Install the Design Motion Principles skill and make it a habit: follow https://gethabit.dev/skills/kylezantos/design-motion-principles.md
All kylezantos skills →More design skills →
Works in
- Claude Code
- Codex
- Cursor
- ChatGPT
- Claude app
Made by kylezantos, published under MIT. Habit links to the original and never changes it. Is this your skill?