home / skills / secondsky / claude-skills / interaction-design
This skill helps you design intuitive user experiences with loading, error, empty states and accessible microinteractions.
npx playbooks add skill secondsky/claude-skills --skill interaction-designReview the files below or copy the command above to add this skill to your agents.
---
name: interaction-design
description: Creates intuitive user experiences through feedback patterns, microinteractions, and accessible interaction design. Use when designing loading states, error handling UX, animation guidelines, or touch interactions.
license: MIT
---
# Interaction Design
Create intuitive user experiences through thoughtful feedback and interaction patterns.
## Interaction Patterns
| Pattern | Duration | Use Case |
|---------|----------|----------|
| Microinteraction | 100-200ms | Button press, toggle |
| Transition | 200-400ms | Page change, modal |
| Entrance | 300-500ms | List items appearing |
## Loading States
```css
/* Skeleton loader */
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
```
```jsx
function LoadingState({ isLoading, children }) {
if (isLoading) {
return <div className="skeleton" style={{ height: 200 }} />;
}
return children;
}
```
## Error States
```jsx
function ErrorState({ error, onRetry }) {
return (
<div className="error-container" role="alert">
<Icon name="warning" />
<h3>Something went wrong</h3>
<p>{error.message}</p>
<button onClick={onRetry}>Try Again</button>
</div>
);
}
```
## Empty States
```jsx
function EmptyState({ title, description, action }) {
return (
<div className="empty-state">
<Illustration name="empty-inbox" />
<h3>{title}</h3>
<p>{description}</p>
{action && <button onClick={action.onClick}>{action.label}</button>}
</div>
);
}
```
## Accessibility
```jsx
// Announce state changes to screen readers
function StatusAnnouncer({ message }) {
return (
<div aria-live="polite" aria-atomic="true" className="sr-only">
{message}
</div>
);
}
// Respect motion preferences
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
```
## Animation Guidelines
- Keep animations under 500ms (longer feels sluggish)
- Use ease-out for entering, ease-in for exiting
- Respect `prefers-reduced-motion`
- Ensure focus indicators are always visible
- Test with keyboard navigation
## Best Practices
- Provide immediate feedback for all actions
- Show loading states for waits >0.5s
- Include clear error messages with recovery options
- Design meaningful empty states
- Support keyboard navigation
This skill helps designers and developers create intuitive, accessible interaction experiences by prescribing feedback patterns, microinteractions, loading and error state treatments, and animation guidelines. It packages practical, production-ready patterns for web apps using modern stacks like React and Tailwind. Use it to standardize how UI responds to user input and system state across your product.
The skill inspects common interaction scenarios—button presses, loading flows, errors, empty states, and screen-reader announcements—and provides concrete implementations and timing guidance. It recommends durations for microinteractions and transitions, accessible ARIA patterns, skeleton loaders, error layouts with retry actions, and motion-respecting animation rules. Code snippets and rules-of-thumb make integration into React and TypeScript projects straightforward.
What durations should I use for different interaction types?
Use 100–200ms for microinteractions, 200–400ms for transitions, and 300–500ms for entrances; keep most animations under 500ms.
How do I handle users who prefer reduced motion?
Detect prefers-reduced-motion and disable or simplify nonessential animations, while preserving meaningful state changes and focus outlines.