PlugWiki

Design Motion Principles Skill for Claude: Build or Audit UI Animation

Makes Claude build UI animation or audit existing motion through three designer lenses, weighted for your kind of product.

Installs
13.2K
on skills.sh
Stars
1.5K
on GitHub
Files
14
besides SKILL.md
Updated
May 2026
last repo commit

design-motion-principles has two modes. In Create mode Claude builds components with purposeful motion in React, Framer Motion, CSS or HTML. In Audit mode it studies your project, finds UI that should animate but does not, checks for generic motion patterns, and writes an HTML report with looping demos beside each major finding.

Both modes first weigh three lenses by your project type: Emil Kowalski for restraint and speed, Jakub Krehel for production polish, and Jhey Tompkins for playful experiments. SKILL.md says these lenses are the skill's own reading of their public work, not endorsed by them. It bundles no scripts. Audit mode writes a file into your project and opens it in your browser.

Good for

  • Front-end developers adding transitions, hover states or enter and exit animations
  • Design engineers who want an audit of motion that feels generic or AI-made
  • Teams shipping products as different as a dashboard and a kids app

Install design-motion-principles

Claude Code

  1. 1

    Copy this prompt.

    Install the design-motion-principles skill in Claude Code. Run this command:

npx skills add https://github.com/kylezantos/design-motion-principles --skill design-motion-principles

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposeful motion, or audit existing animations to catch AI-slop motion patterns (audit emits a branded HTML report with looping demos). Use when creating, adding, animating, or reviewing UI motion: transitions, hover states, micro-interactions, enter/exit animations, or any motion design work in React, Framer Motion, CSS, or HTML. Provides per-designer perspectives with context-aware weighting.

Sections in SKILL.md

  1. STEP 0: Detect Mode (DO THIS FIRST)
  2. The Three Designers
  3. Context-to-Perspective Mapping
  4. Core Principles (Both Modes)
  5. The Frequency Gate
  6. Duration Guidelines (Context-Dependent)
  7. The Golden Rule
  8. Accessibility is NOT Optional
  9. Reference Index
  10. Workflow Index

Key facts

Author
kylezantos (repo owner)
License
MIT
Installs on skills.sh
13,191 as of 2026-11-02
GitHub stars
1,476 for the whole repo
Last commit to the repo
2026-05-30
Files in the skill
15 files including SKILL.md: 2 workflows and 12 references
skills.sh audits
Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

  • Chooses Create or Audit from your wording, and asks if it is unclear.

    Words like build or animate mean Create. Words like audit, review or check mean Audit.

    Try: “Audit the motion design in this codebase.”

    Read · Step 0: detect mode

  • Light discovery, then builds components with weighted motion and a self-check.

    Proposes your project context and lens weighting, waits for your OK, loads the recipes, generates the component and checks it against known failure modes.

    Try: “Add a polished enter and exit animation to this modal.”

    Write · Create mode

  • Reads the project, finds missing animation, and proposes a lens weighting.

    Searches for conditional renders and ternary swaps with no animation, then waits for you to confirm before the full audit.

    Runs code · Audit mode: reconnaissance

  • Writes motion-audits/<project>-<date>.html and opens it in your browser.

    Each Critical and Important finding gets a looping CSS demo. It will not edit .gitignore. Say "--terminal" to get the report inline instead.

    Runs code · Audit mode: HTML report

  • Asks how often users trigger an animation before adding or approving it.

    Rare actions can be expressive, frequent ones get no animation, and keyboard-initiated ones are never animated.

    Read · Frequency gate

  • Flags generic motion: pulsing indicators, hover-scale on everything, stagger-spam.

    Used in Audit mode, with a frequency heuristic so one intentional use does not trip it.

    Read · Anti-checklist

  • Every animation must handle prefers-reduced-motion.

    SKILL.md states no exceptions.

    Read · Accessibility rule

From the official docs

Permissions

Low risk

The skill bundles no scripts. Audit mode writes an HTML report into your project and opens it in your browser, and Create mode writes component code.

What it can do

  • Read your data
  • Create and change things
  • Delete things
  • Read-only mode

Watch out for

  • Audit mode writes a file and opens your browser

    The report goes to motion-audits/ at the project root and is opened with your system command. Say "--terminal" to get the report inline instead; the workflow then skips the file and the browser. Add the folder to .gitignore yourself if you do not want it committed; the skill never edits that file. github.com

  • Create mode writes component code

    Create mode generates components in your project, so review the diff like any other generated code. github.com

Technical details
Talks tofonts.googleapis.com and fonts.gstatic.com (the report template loads fonts)
Scopes

  • Searches your source files during Audit mode

  • Writes motion-audits/<project>-<date>.html in the project root

  • Opens the report with open, xdg-open or start, depending on your system

Questions

What does design-motion-principles do?

It makes Claude either build UI animations or audit existing ones, using three motion-design lenses weighted to your project type. The audit produces an HTML report with looping demos.

How do I install design-motion-principles?

Use the install box above. The README also shows a manual install: clone the repo and copy the skill folder into ~/.claude/skills/ (or ~/.cursor/skills/ for Cursor).

Does it need an API key?

SKILL.md and the README name none.

Is design-motion-principles safe?

It bundles no scripts. In Audit mode it searches your code, writes a report into a motion-audits folder in your project and opens it in your browser. The report page loads Google Fonts. The Permissions section lists the details.

Where does the audit report go?

To motion-audits/ in the git root of the audited project, named with the project and date. It does not modify .gitignore, so decide yourself whether to ignore that folder. If the browser cannot open, it prints the path.

Does it work outside React?

SKILL.md covers HTML/CSS, React, Framer Motion, and iOS and Android transitions. For game engines, Lottie, Rive and video, it says the frequency framework still applies but the designer-specific techniques may not translate.

Information

updated Nov 2, 2026

Repository
kylezantos/design-motion-principles
Folder
skills/design-motion-principles

kylezantos/design-motion-principlesskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5
  1. SKILL.md · github.com
  2. audit.md · github.com
  3. README · github.com
  4. create.md · github.com
  5. output-format.md · github.com

Updated Nov 2, 2026.