design-motion-principles

Audit UI motion patterns across dashboards, sites, and mobile apps.

11|4|Updated Jan 30, 2026
One-click install
npx skills add https://github.com/leadgenjay/claude-skills --skill design-motion-principles-leadgenjay
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-motion-principles
Source: https://github.com/leadgenjay/claude-skills/tree/main/skills/design-motion-principles
Command: npx skills add https://github.com/leadgenjay/claude-skills --skill design-motion-principles-leadgenjay

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a structured framework to audit UI motion, ensuring animations serve purpose, provide polish, and avoid disruption.

Core Features & Use Cases

  • Apply three designer perspectives (Emil, Jakub, Jhey) to review motion, hover states, transitions, and micro-interactions.
  • Generate context-aware recommendations, accessibility checks, and performance considerations for production-ready interfaces.
  • Suitable for design reviews, design systems, marketing pages, and product dashboards.

Quick Start

Audit a sample UI by applying the three designer perspectives to assess motion patterns.

Frequently Asked Questions about design-motion-principles

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit UI motion patterns for accessibility and performance issues?

You can audit UI motion by applying structured designer perspectives to review animations, transitions, hover states, and micro-interactions, while explicitly checking accessibility and performance constraints to produce an action-oriented report.

What is the best way to review micro-interactions and hover states across a production dashboard?

Reviewing micro-interactions and hover states across production dashboards requires context reconnaissance and applying multiple designer perspectives to ensure motion provides polish without disrupting the user experience.

How do you balance animation restraint and subtle delight in UX design?

Balancing animation restraint and subtle delight involves auditing motion patterns to ensure animations serve a clear purpose, provide polish, and avoid disruption across marketing sites, product dashboards, and mobile apps.

Can I use a motion audit to check transitions on marketing pages and mobile apps?

Yes, a motion audit evaluates transitions, hover states, and micro-interactions across marketing pages and mobile apps, generating context-aware recommendations and accessibility checks for production-ready interfaces.

What are the limitations of auditing UI motion without structured designer perspectives?

Auditing UI motion without structured perspectives risks missing context reconnaissance, accessibility considerations, and performance checks, leading to animations that disrupt rather than polish the user experience.

Why does my UI animation disrupt the user experience instead of providing polish?

UI animation disrupts the experience when it lacks restraint and purpose, requiring a structured motion audit to evaluate performance impacts and accessibility to ensure interactions provide subtle delight.