# Uiux Audit Motion Design

> UI/UX review with motion design specifications. Covers animation principles, easing tokens, duration guidelines, WordPress Design System (WPDS) patterns, and interaction audit methodology. Use when this capability is needed.

- Skill: `tomevault-io/uiux-audit-motion-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/uiux-audit-motion-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/uiux-audit-motion-design/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/uiux-audit-motion-design

---


# UI/UX Audit & Motion Design

UI/UX evaluation with motion design specifications for product interfaces. Covers animation principles, easing tokens, and the WordPress Design System.

## Motion Design Principles

Every animation needs a job. If it has no job, don't animate.

### Purpose Categories

- **Responsiveness** — acknowledge user input (< 100ms)
- **Spatial continuity** — show where things go (120-200ms)
- **Understanding** — reveal structure/hierarchy (200-300ms)
- **Delight** — intentional moments of joy (use sparingly)

### Duration Guidelines

| Frequency | Duration | Example |
|---|---|---|
| High (repeated) | < 100ms | Button press, checkbox toggle |
| Medium | 120-240ms | Dropdown open, panel slide |
| Low (rare) | 200-300ms | Modal entrance, page transition |

Never exceed 300ms for UI animations. Users perceive anything longer as sluggish.

### Easing Selection

| Pattern | Easing | When |
|---|---|---|
| Enter | ease-out | Elements appearing |
| Exit | ease-in | Elements leaving |
| Move | ease-in-out | Elements changing position |
| Micro | linear or ease-out | Tiny feedback (hover, press) |

### CSS Implementation

```css
/* Standard tokens */
--ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0);
--ease-in: cubic-bezier(0.4, 0.0, 1.0, 1.0);
--ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1.0);
--duration-fast: 100ms;
--duration-normal: 200ms;
--duration-slow: 300ms;

/* Usage */
.panel {
    transition: transform var(--duration-normal) var(--ease-out);
}
```

## UI Audit Checklist

### Visual Consistency

- [ ] Typography scale follows design system
- [ ] Color usage matches brand tokens
- [ ] Spacing follows 4px/8px grid
- [ ] Icons are consistent style and size
- [ ] Border radius follows design tokens

### Interaction Patterns

- [ ] Interactive elements have hover/focus/active states
- [ ] Loading states are present for async operations
- [ ] Error states provide clear guidance
- [ ] Empty states are designed (not just blank)
- [ ] Destructive actions require confirmation

### Responsive Behavior

- [ ] Layout adapts to mobile, tablet, desktop
- [ ] Touch targets are at least 44x44px on mobile
- [ ] Text remains readable at all breakpoints
- [ ] Images scale appropriately

### WordPress Admin Consistency

- [ ] Uses WordPress admin color scheme variables
- [ ] Matches WordPress admin UI patterns
- [ ] Admin notices use proper classes (`notice-success`, `notice-error`)
- [ ] Settings pages follow WordPress Settings API layout

## WordPress Design System (WPDS)

### Component Usage

Use `@wordpress/components` for admin interfaces:

```javascript
import {
    Button,
    TextControl,
    ToggleControl,
    PanelBody,
    Notice,
} from '@wordpress/components';
```

### Admin Color Variables

```css
/* Use WordPress admin CSS variables */
.my-admin-panel {
    color: var(--wp-admin-theme-color);
    background: #f0f0f1;
}
```

## References

- [WordPress Design System](https://make.wordpress.org/design/)
- [richtabor/agent-skills](https://github.com/richtabor/agent-skills)
- [Material Design Motion](https://m3.material.io/styles/motion/overview)

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/courtneyr-dev) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->