Original skill document
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
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
