Create rich, responsive interactive experiences that make applications a joy to use...
This skill guides creation of rich interactive experiences that feel alive, responsive, and delightful. While frontend-design focuses on visual aesthetics, this skill focuses on how interfaces behave, respond, and guide users through meaningful interactions.
The user provides interaction requirements: a component needing feedback patterns, a form requiring validation, a data-heavy interface needing loading states, or any feature requiring thoughtful user experience design.
Before implementing, understand the interaction context:
CRITICAL: Every interaction should answer three questions instantly: "What can I do?", "What just happened?", and "What's happening now?"
Users need instant acknowledgment that their action registered. Silence breeds uncertainty.
Implementation patterns:
/* Example: Satisfying button press */
.btn {
transition:
transform 0.1s ease,
box-shadow 0.1s ease;
}
.btn:active {
transform: scale(0.97);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
Never leave users wondering what's happening. Make every state explicit and informative.
Loading states (choose by duration):
Skeleton screen principles:
/* Example: Content-aware skeleton */
<div className="skeleton-card">
<div className="skeleton-avatar pulse" />
<div className="skeleton-lines">
<div
className="skeleton-line w-60 pulse"
style={{ animationDelay: '0.1s' }}
/>
<div
className="skeleton-line w-80 pulse"
style={{ animationDelay: '0.2s' }}
/>
<div
className="skeleton-line w-40 pulse"
style={{ animationDelay: '0.3s' }}
/>
</div>
</div>
Assume success and update immediately. Reconcile with server later.
When to use optimistic updates:
Implementation:
/* Example: Optimistic toggle */
const [isLiked, setIsLiked] = useState(false);
const handleLike = async () => {
setIsLiked((prev) => !prev); // Optimistic update
try {
await api.toggleLike(itemId);
} catch {
setIsLiked((prev) => !prev); // Revert on failure
toast.error("Couldn't save. Try again.");
}
};
Reveal complexity gradually. Start simple, unlock depth as needed.
Patterns:
Implementation guidelines:
Humans make mistakes. Great interfaces expect this and make recovery effortless.
Undo patterns:
Confirmation patterns:
Recovery patterns:
/* Example: Timed undo toast */
const handleDelete = (item) => {
const toastId = toast(
<span>
Deleted "{item.name}"
<button
onClick={() => {
restoreItem(item);
toast.dismiss(toastId);
}}
>
Undo
</button>
</span>,
{ duration: 5000 }
);
// Actually delete after toast expires
setTimeout(() => performDelete(item.id), 5000);
};
Forms are where users feel most vulnerable. Make them feel supported, not interrogated.
Validation timing:
Error presentation:
Success feedback:
/* Example: Inline validation with helpful errors */
<div className="field">
<input
type="email"
className={error ? 'input-error' : value && isValid ? 'input-valid' : ''}
onBlur={validateEmail}
/>
{error && (
<span className="error-message">
<ErrorIcon /> {error}
{suggestion && (
<button onClick={applySuggestion}>Use {suggestion}?</button>
)}
</span>
)}
</div>
Small moments of animation that make interfaces feel alive and responsive.
High-impact micro-interactions:
Dan Saffer's micro-interaction anatomy:
/* Example: Success checkmark draw-on */
@keyframes draw-check {
0% {
stroke-dashoffset: 50;
}
100% {
stroke-dashoffset: 0;
}
}
.success-check {
stroke-dasharray: 50;
stroke-dashoffset: 50;
animation: draw-check 0.4s ease-out forwards;
}
Power users love keyboard shortcuts. Assistive technology users require them.
Keyboard essentials:
Shortcut implementation:
/* Example: Keyboard-accessible modal */
useEffect(() => {
const handleKeyDown = (e) => {
if (e.key === 'Escape') onClose();
if (e.key === 'Tab') trapFocus(e, modalRef);
};
document.addEventListener('keydown', handleKeyDown);
firstFocusableElement.current?.focus(); // Move focus into modal
return () => document.removeEventListener('keydown', handleKeyDown);
}, []);
Direct manipulation that feels physical and intuitive.
Visual feedback requirements:
Accessibility companion:
/* Example: Polished drag states */
.draggable {
cursor: grab;
}
.draggable:active {
cursor: grabbing;
}
.dragging {
opacity: 0.8;
transform: scale(1.02) rotate(2deg);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.drop-zone.active {
background: var(--accent-light);
border: 2px dashed var(--accent);
}
Motion should feel natural, not mechanical or sluggish.
Duration guidelines:
Easing recommendations:
/* Example: Respecting motion preferences */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Apply these psychology principles:
| Law | Principle | Application |
|---|---|---|
| Hick's Law | More choices = slower decisions | Limit options, use progressive disclosure |
| Fitts's Law | Larger + closer = easier to click | Size important buttons, reduce travel distance |
| Jakob's Law | Users expect your site to work like others | Follow conventions unless improving on them |
| Miller's Law | ~7 items in working memory | Chunk information, limit visible options |
| Peak-End Rule | Remember peaks and endings | Nail the critical moments and final impression |
| Doherty Threshold | < 400ms keeps flow | Optimize response times, use perceived speed tricks |
| Aesthetic-Usability | Pretty = perceived as easier | Visual polish improves perceived usability |
Before shipping any interactive component:
This skill complements frontend-design:
| frontend-design | interaction-design |
|---|---|
| How it looks | How it behaves |
| Visual aesthetics | Behavioral patterns |
| Typography, color, layout | Feedback, timing, flow |
| Static beauty | Dynamic responsiveness |
Use both skills together: frontend-design for the visual direction, interaction-design for the experiential polish. The most delightful interfaces nail both — they're visually distinctive AND a joy to interact with.
Remember: Users don't separate "how it looks" from "how it feels." A beautiful interface that feels sluggish or confusing will disappoint. An ugly interface that's responsive and intuitive will frustrate differently. Excellence requires both.
