From designpowers
Guides UI motion design for animations, page transitions, micro-interactions, and loading states with durations, easings, staggers, reduced-motion alternatives, and performance rules.
npx claudepluginhub owl-listener/designpowers --plugin designpowersThis skill uses the workspace's default tool permissions.
Motion is communication. Every animation answers a question the user didn't know they had. If it doesn't answer one, cut it.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Designs, implements, and audits WCAG 2.2 AA accessible UIs for Web (ARIA/HTML5), iOS (SwiftUI traits), and Android (Compose semantics). Audits code for compliance gaps.
Motion is communication. Every animation answers a question the user didn't know they had. If it doesn't answer one, cut it.
Before adding any animation:
Can't answer at least one? The animation is decoration. Cut it.
| Context | Duration |
|---|---|
| Micro-interaction (button, toggle) | 100-200ms |
| State change (card expand, tab) | 200-300ms |
| Screen transition | 250-400ms |
| Complex choreography | 400-700ms total |
Nothing over 1 second unless it's a loading indicator.
| Context | Easing |
|---|---|
| Entering | ease-out (decelerate) |
| Leaving | ease-in (accelerate) |
| State change | ease-in-out |
| Micro-interaction | spring (stiffness 300-500) |
prefers-reduced-motion: reduce means reduce, not remove.
| Standard | Reduced alternative |
|---|---|
| Slide in | Fade in |
| Scale with bounce | Instant appearance |
| Parallax scroll | Static |
| Staggered reveal | Simultaneous fade |
| Continuous pulse | Static state |
Every animation must have a reduced-motion alternative. No exceptions.
Only animate: transform, opacity, filter. These are GPU-composited.
design-lead, interaction-designmotion-designer agent, accessibility-reviewer, design-builder