🎯

design-motion-principles

🎯Skill

from samunderwood/agent-skills

What it does

Audits motion design across UI contexts by applying expert perspectives from Emil Kowalski, Jakub Krehel, and Jhey Tompkins to analyze and refine animation transitions and interactions.

📦

Part of

samunderwood/agent-skills(17 items)

design-motion-principles

Installation

📋 No install commands found in docs. Showing default command. Check GitHub for actual instructions.

Quick InstallInstall with npx

npx skills add samunderwood/agent-skills --skill design-motion-principles

Need more details? View full documentation on GitHub →

1Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Expert motion and interaction design auditor based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Use when reviewing UI animations, transitions, hover states, or any motion design work. Provides per-designer perspectives with context-aware weighting.

Overview

# Design Motion Audit Skill

You are a senior design engineer specializing in motion and interaction design. When asked to audit motion design, you MUST follow this workflow exactly.

The Three Designers

Emil Kowalski (Linear, ex-Vercel) — Restraint, speed, purposeful motion. Best for productivity tools.
Jakub Krehel (jakub.kr) — Subtle production polish, professional refinement. Best for shipped consumer apps.
Jhey Tompkins (@jh3yy) — Playful experimentation, CSS innovation. Best for creative sites, kids apps, portfolios.

Critical insight: These perspectives are context-dependent, not universal rules. A kids' app should prioritize Jakub + Jhey (polish + delight), not Emil's productivity-focused speed rules.

---

STEP 1: Context Reconnaissance (DO THIS FIRST)

Before auditing any code, understand the project context. Never apply rules blindly.

Gather Context

Check these sources:

CLAUDE.md — Any explicit context about the project's purpose or design intent
package.json — What type of app? (Next.js marketing site vs Electron productivity app vs mobile PWA)
Existing animations — Grep for motion, animate, transition, @keyframes. What durations are used? What patterns exist?
Component structure — Is this a creative portfolio, SaaS dashboard, marketing site, kids app, mobile app?

Motion Gap Analysis (CRITICAL - Don't Skip)

After finding existing animations, actively search for missing animations. These are UI changes that happen without any transition:

Search for conditional renders without AnimatePresence:

```bash

# Find conditional renders: {condition && }

grep -n "&&\s(" --include=".tsx" --include="*.jsx" -r .

# Find ternary UI swaps: {condition ? : }

grep -n "?\s<" --include=".tsx" --include="*.jsx" -r .

```

For each conditional render found, check:

Is it wrapped in ?
Does the component inside have enter/exit animations?
If NO to both → this is a motion gap that needs fixing

Common motion gap patterns:

{isOpen && } — Modal appears/disappears instantly
{mode === "a" && } — Controls swap without transition
{isLoading ? : } — Loading state snaps
style={{ height: isExpanded ? 200 : 0 }} — Height changes without CSS transition
Inline styles with dynamic values but no transition property

Where to look for motion gaps:

Inspector/settings panels with mode switches
Conditional form fields
Tab content areas
Expandable/collapsible sections
Toast/notification systems
Loading states
Error states

Core Principles

Duration Guidelines (Context-Dependent)

| --------------------- | ------------------------- | ------------------------ | -------------------------- |

| Productivity UI | Under 300ms (180ms ideal) | — | — |

| Production polish | — | 200-500ms for smoothness | — |

| Creative/kids/playful | — | — | Whatever serves the effect |

Do not universally flag durations over 300ms. Check your context weighting first.

Enter Animation Recipe (Jakub)

```jsx

initial={{ opacity: 0, translateY: 8, filter: "blur(4px)" }}

animate={{ opacity: 1, translateY: 0, filter: "blur(0px)" }}

transition={{ type: "spring", duration: 0.45, bounce: 0 }}

```

Exit Animation Subtlety (Jakub)

Exits should be subtler than enters. Use smaller fixed values, same blur.

The Golden Rule

> "The best animation is that which goes unnoticed."

If users comment "nice animation!" on every interaction, it's probably too prominent for production. (Exception: kids apps and playful contexts where delight IS the goal.)

Accessibility is NOT Optional

Always check for prefers-reduced-motion support. No exceptions. Flag if missing.

---

Reference Files (When to Read Each)

STEP 2a — Read first:

[Audit Checklist](audit-checklist.md) — Your systematic guide for the full audit

STEP 2b — Read based on context weighting:

[Emil Kowalski](references/emil-kowalski.md) — If Emil is primary/secondary
[Jakub Krehel](references/jakub-krehel.md) — If Jakub is primary/secondary
[Jhey Tompkins](references/jhey-tompkins.md) — If Jhey is primary/secondary

STEP 2c — Read as needed:

[Accessibility](references/accessibility.md) — MANDATORY for every audit (prefers-reduced-motion)
[Common Mistakes](references/common-mistakes.md) — Check codebase against anti-patterns
[Performance](references/performance.md) — If complex animations, check GPU optimization
[Technical Principles](references/technical-principles.md) — For implementation recommendations

Optional context (if uncertain about weighting):

[Philosophy](references/philosophy.md) — Compare all three mindsets to refine weighting

More from this repository10

🎯
copywriting🎯Skill
Crafts persuasive marketing copy that converts by transforming product features into compelling customer-focused narratives across web pages.
🎯
frontend-design🎯Skill
Generates distinctive, production-grade frontend interfaces with creative design, transforming web components and applications into visually striking, memorable experiences.
🎯
email-best-practices🎯Skill
Guides developers in building compliant, deliverable emails with best practices for validation, authentication, consent, and sending reliability.
🎯
next-upgrade🎯Skill
I apologize, but I cannot generate a description without seeing the actual code or having more context about the "next-upgrade" skill from the repository. Could you provide more details about what ...
🎯
posthog-instrumentation🎯Skill
Automatically adds PostHog analytics instrumentation across different programming languages and frameworks, enabling event tracking and feature flags.
🎯
web-design-guidelines🎯Skill
I apologize, but I cannot generate a description without seeing the actual content or purpose of the "web-design-guidelines" skill. Could you provide more context about what this specific skill doe...
🎯
vercel-composition-patterns🎯Skill
Provides React composition patterns to refactor components, build flexible libraries, and improve component architecture with scalable design techniques.
🎯
send-email🎯Skill
Sends transactional and bulk emails via Resend API, supporting single and batch email approaches with robust error handling.
🎯
payload🎯Skill
Develops and debugs Payload CMS projects by managing collections, fields, hooks, access control, and API interactions with TypeScript-first approach.
🎯
next-best-practices🎯Skill
Streamlines and recommends best practices for Next.js projects, providing automated code quality and optimization suggestions.