Add refined micro-interactions and animations to React interfaces. Use when implementing transitions, loading states, hover effects, or page animations with performance in mind.
View on GitHubExpanly/expanly-claude-code-agents
ui-designer
plugins/ui-designer/skills/motion-design/SKILL.md
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/Expanly/expanly-claude-code-agents/blob/main/plugins/ui-designer/skills/motion-design/SKILL.md -a claude-code --skill motion-designInstallation paths:
.claude/skills/motion-design/Guide creation of subtle, purposeful motion using React and Tailwind. Focus on animations that enhance usability without distraction.
## Motion Philosophy
- **Purposeful**: Every animation should communicate something
- **Subtle**: Motion should feel natural, not theatrical
- **Fast**: Most transitions under 200ms; complex sequences under 500ms
- **Consistent**: Same timing functions throughout the interface
## Tailwind Transitions
Use built-in transition utilities for simple effects:
```tsx
// Hover states
<button className="transition-colors duration-150 hover:bg-slate-100">
Hover me
</button>
// Scale on hover
<div className="transition-transform duration-200 hover:scale-[1.02]">
Card content
</div>
// Opacity fade
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
Revealed content
</div>
```
## Timing & Easing
Match timing to the action:
```tsx
// Quick feedback (buttons, toggles)
className="duration-150 ease-out"
// Smooth transitions (modals, panels)
className="duration-300 ease-in-out"
// Entrance animations
className="duration-500 ease-out"
```
## Entrance Animations
Stagger elements for polished page loads:
```tsx
// Staggered list with Tailwind
{items.map((item, i) => (
<div
key={item.id}
className="animate-in fade-in slide-in-from-bottom-2"
style={{ animationDelay: `${i * 50}ms` }}
>
{item.content}
</div>
))}
// Using Framer Motion
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3, delay: index * 0.05 }}
>
{content}
</motion.div>
```
## Loading States
Provide visual feedback during async operations:
```tsx
// Skeleton loading
<div className="h-4 w-3/4 animate-pulse rounded bg-slate-200" />
// Spinner
<svg className="h-5 w-5 animate-spin text-primary">
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" opacity="0.25" />
<path fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z