design-motion-principlesby Kyle Zantos

Design Motion Principles Skill.

A Claude Code and Codex skill for motion and video: purposeful interaction motion, or a review of existing animation, after Kowalski, Krehel, and Tompkins.

Motion & Video

Download OpenDesign View usage guide

kylezantos/design-motion-principles · skills/design-motion-principles/SKILL.mdSKILL.md

--- name: design-motion-principles description: 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 … --- ## STEP 0: Detect Mode (DO THIS FIRST) ## The Three Designers ## Context-to-Perspective Mapping ## Core Principles (Both Modes) ## Reference Index ## Workflow Index

Front matter and section headings read from the upstream file on 2026-09-14 · 6,794 characters in full

01 What it does

What the design-motion-principles Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

An interaction and motion design skill for coding agents, working in two modes. Create builds interactive components with purposeful motion; Audit reviews existing motion and reports per-designer findings, including AI-slop patterns, in a branded HTML report with looping demos.

It organizes its advice around three lenses — Emil Kowalski on restraint and speed, Jakub Krehel on production polish, Jhey Tompkins on playful experimentation — weighted by project type rather than applied universally. Coverage is web and app UI motion: HTML/CSS, React, Framer Motion, iOS/Android transitions and design system animations. The frequency gate, context-dependent durations and mandatory prefers-reduced-motion handling run in both modes.

What it produces

Interactive components built with purposeful motion in Create mode.
A per-designer review report in Audit mode.
A branded HTML report containing looping demos of the findings.
An audit report template rendered as HTML by default, with a terminal mode available as a flag.

See the example prompt ↗

How It Works

01
Detect the Mode from the Request
Build-flavoured wording selects Create; audit, review, evaluate, feedback or 'is this motion good' selects Audit.
02
Read the Matching Workflow File
Mode detection is step 0 and gates everything else — the workflow file for that mode is followed as written.
03
Weight the Three Designers by Context
Emil, Jakub and Jhey are treated as context-dependent perspectives, never as universal rules.
04
Apply Frequency and Duration Guidance
How often the interaction fires comes first, then duration targets drawn from the relevant lens.
05
Emit the Artefact for the Mode
Create returns components; Audit returns a per-designer report whose findings each get a demo card built from a visual container template.

02 Find your fit

When to Use the design-motion-principles Skill

Use the design-motion-principles skill in Claude Code or Codex when the job is motion and video of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Productivity tools such as Linear or Raycast, where Emil's restraint and speed rules lead and Jhey is used only for onboarding.
Kids apps and educational products, where polish and delight outrank productivity speed rules, with Emil reserved for high-frequency game interactions.
Creative portfolios, led by Jakub for refinement and Jhey for invention, with Emil limited to high-frequency interactions.
Mobile apps, where Jakub leads, Emil supports and Jhey supplies delighters.

Know the Boundaries

Motion work outside web and app UI — game engines, Lottie, Rive or video — where the frequency framework still applies but the designer-specific techniques may not translate.
Judging durations by one universal number; flagging or capping durations without checking the context weighting is explicitly ruled out.
Keyboard-initiated interactions are excluded from animation entirely, whatever the project type.

What to Provide

The project typeIt drives the primary, secondary and selective weighting, so a SaaS dashboard points at Emil first rather than Jakub.
How often the interaction is triggeredThe frequency gate is applied before anything is added or approved, so the answer changes what is even eligible to animate.
The motion itself and its stackTransitions, hover states, micro-interactions and enter/exit animations, in React, Framer Motion, CSS or HTML.

03 Inside the skill

Rules the design-motion-principles Skill Gives Claude Code and Codex

6 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Let Trigger Frequency Decide Whether It Animates
Frequent interactions hit hundreds of times a day get no animation or an instant transition; rare ones may be expressive.
Handle prefers-reduced-motion, Always
The requirement is stated as covering anything generated in Create mode or reviewed in Audit mode, with no exceptions.
Ask When the Request Is Ambiguous
A vague request such as 'look at this modal animation' does not get guessed at — the user is asked to pick Create or Audit.
Re-weight the Designers per Project Type
The mapping table changes primary, secondary and selective lenses; a landing page is Jakub primary, Jhey secondary, Emil only for forms and nav.
Use Visibility as the Quality Test
Motion that draws a compliment on every single interaction is treated as too prominent for production.
Load the References the Mode Mandates
Create mode always loads the Motion Cookbook (recipes for enter/exit, easing, springs, clip-path, @property, FLIP, scroll-driven); Audit mode loads its own always-on files.

04 Put it to work

Install design-motion-principles in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add design-motion-principles to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

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

Generic skills CLI form for skills/design-motion-principles/SKILL.md; the repository may document its own path.

Give the Skill a First Motion and Video Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Audit the [command palette] open and close transition in our [React] app before it ships, and flag anything that reads as AI-slop motion. People use it hundreds of times a day, so tell me what should not animate at all and what should sit under 300ms. Then build the corrected version with Framer Motion and make sure it respects prefers-reduced-motion.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Confirm the motion's weight matches how often the interaction actually fires, not how good it looks.
Measure production polish work against the Jakub band of 200-500ms rather than a single global duration.
In Audit mode, work through the systematic audit checklist rather than eyeballing the animation.
Run findings through the anti-checklist quality gate that names the AI-slop motion categories and anti-patterns.
For complex animations, check GPU optimisation, will-change usage and layout thrash.

In OpenDesign import design-motion-principles from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Kyle Zantos
Repository: github.com/kylezantos/design-motion-principles Branch main
Skill file: skills/design-motion-principles/SKILL.md Content checksum recorded at verification; commit 4a9ca87
License: MIT From LICENSE.
Repository stars: 1,048 GitHub snapshot taken 2026-09-14 for the whole kylezantos/design-motion-principles repository. Not a rating or usage count for design-motion-principles.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

STEP 0: Detect Mode (DO THIS FIRST)Maps request wording to Create or Audit and asks when it is ambiguous.
The Three DesignersWho Emil, Jakub and Jhey are, the question each answers, and the tribute disclaimer.
Context-to-Perspective MappingSeven project types mapped to primary, secondary and selective designer weighting.
Core Principles (Both Modes)Frequency gate, duration guidelines, the golden rule and non-optional accessibility.
Reference IndexEach reference file paired with the conditions under which to load it.
Workflow IndexThe two workflow files: build components, or review motion and report.

The Skill's Own Description

“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.”

Front-matter description from SKILL.md. The full file is about 6,794 characters. Read the full file on GitHub.

06 Before you install

Questions About the design-motion-principles Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Do I need React, or does it work with plain CSS and HTML?

Both are in scope. The skill covers web and app UI motion across HTML/CSS, React, Framer Motion or Motion, iOS/Android transitions and design system animations.

How does it decide whether to build something or review it?

It reads the request for Create or Audit signals, and when those are ambiguous it asks. If AskUserQuestion is not available it falls back to a plain-text question offering the two modes.

Will a kids app get the same fast, restrained motion as a dashboard?

No. Weighting is context-dependent, so a kids' app prioritises Jakub and Jhey for polish and delight rather than Emil's productivity-focused speed rules — delight is treated as the goal in that context.

Are the three designers behind this skill?

No. The lenses distill their publicly published courses, articles, talks and open-source projects, and the weighting framework is the skill's own interpretation named in tribute.

Design Motion Principles

Run design-motion-principles on a Real Motion and Video Task.

Download OpenDesign, import design-motion-principles from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills