AgentAlley

Skills · Design & UI

Interaction Design

Unverified●31/40

Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.

Originally by wshobson · MIT

Claude Code◐PartialHas SKILL.md but declares no allowed-tools — Claude Code will ask for permission each time
Cursor◐PartialPlain prose you can paste in — but no Cursor rules file
Codex◐PartialPlain prose you can paste in — but no AGENTS.md
Gemini CLI◐PartialPlain prose you can paste in
Copilot◐PartialPlain prose you can paste in — but no Copilot instructions file
npx agentalley add interaction-design

This command does not work yet — the CLI is still being built. Until then, use Raw in the reader below to take the file.

Who is stuck, and on what

Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.

The whole source

No sign-in, no blur, nothing truncated
interaction-design/SKILL.md321 lines7.4 KBRawView on GitHub
Frontmatter — 2 properties
nameinteraction-design
descriptionDesign and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
1---
2name: interaction-design
3description: Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
4---A5 — No allowed-tools declared — no way to tell what this skill may touch
5 
6# Interaction Design
7 
8Create engaging, intuitive interactions through motion, feedback, and thoughtful state transitions that enhance usability and delight users.
9 
10## When to Use This Skill
11 
12- Adding microinteractions to enhance user feedback
13- Implementing smooth page and component transitions
14- Designing loading states and skeleton screens
15- Creating gesture-based interactions
16- Building notification and toast systems
17- Implementing drag-and-drop interfaces
18- Adding scroll-triggered animations
19- Designing hover and focus states
20 
21## Core Principles
22 
23### 1. Purposeful Motion
24 
25Motion should communicate, not decorate:
26 
27- **Feedback**: Confirm user actions occurred
28- **Orientation**: Show where elements come from/go to
29- **Focus**: Direct attention to important changes
30- **Continuity**: Maintain context during transitions
31 
32### 2. Timing Guidelines
33 
34| Duration | Use Case |
35| --------- | ----------------------------------------- |
36| 100-150ms | Micro-feedback (hovers, clicks) |
37| 200-300ms | Small transitions (toggles, dropdowns) |
38| 300-500ms | Medium transitions (modals, page changes) |
39| 500ms+ | Complex choreographed animations |
40 
41### 3. Easing Functions
42 
43```css
44/* Common easings */
45--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Decelerate - entering */
46--ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* Accelerate - exiting */
47--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Both - moving between */
48--spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot - playful */
49```
50 
51## Quick Start: Button Microinteraction
52 
53```tsx
54import { motion } from "framer-motion";
55 
56export function InteractiveButton({ children, onClick }) {
57 return (
58 <motion.button
59 onClick={onClick}
60 whileHover={{ scale: 1.02 }}
61 whileTap={{ scale: 0.98 }}
62 transition={{ type: "spring", stiffness: 400, damping: 17 }}
63 className="px-4 py-2 bg-blue-600 text-white rounded-lg"
64 >
65 {children}
66 </motion.button>
67 );
68}
69```
70 
71## Interaction Patterns
72 
73### 1. Loading States
74 
75**Skeleton Screens**: Preserve layout while loading
76 
77```tsx
78function CardSkeleton() {
79 return (
80 <div className="animate-pulse">
81 <div className="h-48 bg-gray-200 rounded-lg" />
82 <div className="mt-4 h-4 bg-gray-200 rounded w-3/4" />
83 <div className="mt-2 h-4 bg-gray-200 rounded w-1/2" />
84 </div>
85 );
86}
87```
88 
89**Progress Indicators**: Show determinate progress
90 
91```tsx
92function ProgressBar({ progress }: { progress: number }) {
93 return (
94 <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
95 <motion.div
96 className="h-full bg-blue-600"
97 initial={{ width: 0 }}
98 animate={{ width: `${progress}%` }}
99 transition={{ ease: "easeOut" }}
100 />
101 </div>
102 );
103}
104```
105 
106### 2. State Transitions
107 
108**Toggle with smooth transition**:
109 
110```tsx
111function Toggle({ checked, onChange }) {
112 return (
113 <button
114 role="switch"
115 aria-checked={checked}
116 onClick={() => onChange(!checked)}
117 className={`
118 relative w-12 h-6 rounded-full transition-colors duration-200
119 ${checked ? "bg-blue-600" : "bg-gray-300"}
120 `}
121 >
122 <motion.span
123 className="absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow"
124 animate={{ x: checked ? 24 : 0 }}
125 transition={{ type: "spring", stiffness: 500, damping: 30 }}
126 />
127 </button>
128 );
129}
130```
131 
132### 3. Page Transitions
133 
134**Framer Motion layout animations**:
135 
136```tsx
137import { AnimatePresence, motion } from "framer-motion";
138 
139function PageTransition({ children, key }) {
140 return (
141 <AnimatePresence mode="wait">
142 <motion.div
143 key={key}
144 initial={{ opacity: 0, y: 20 }}
145 animate={{ opacity: 1, y: 0 }}
146 exit={{ opacity: 0, y: -20 }}
147 transition={{ duration: 0.3 }}
148 >
149 {children}
150 </motion.div>
151 </AnimatePresence>
152 );
153}
154```
155 
156### 4. Feedback Patterns
157 
158**Ripple effect on click**:
159 
160```tsx
161function RippleButton({ children, onClick }) {
162 const [ripples, setRipples] = useState([]);
163 
164 const handleClick = (e) => {
165 const rect = e.currentTarget.getBoundingClientRect();
166 const ripple = {
167 x: e.clientX - rect.left,
168 y: e.clientY - rect.top,
169 id: Date.now(),
170 };
171 setRipples((prev) => [...prev, ripple]);
172 setTimeout(() => {
173 setRipples((prev) => prev.filter((r) => r.id !== ripple.id));
174 }, 600);
175 onClick?.(e);
176 };
177 
178 return (
179 <button onClick={handleClick} className="relative overflow-hidden">
180 {children}
181 {ripples.map((ripple) => (
182 <span
183 key={ripple.id}
184 className="absolute bg-white/30 rounded-full animate-ripple"
185 style={{ left: ripple.x, top: ripple.y }}
186 />
187 ))}
188 </button>
189 );
190}
191```
192 
193### 5. Gesture Interactions
194 
195**Swipe to dismiss**:
196 
197```tsx
198function SwipeCard({ children, onDismiss }) {
199 return (
200 <motion.div
201 drag="x"
202 dragConstraints={{ left: 0, right: 0 }}
203 onDragEnd={(_, info) => {
204 if (Math.abs(info.offset.x) > 100) {
205 onDismiss();
206 }
207 }}
208 className="cursor-grab active:cursor-grabbing"
209 >
210 {children}
211 </motion.div>
212 );
213}
214```
215 
216## CSS Animation Patterns
217 
218### Keyframe Animations
219 
220```css
221@keyframes fadeIn {
222 from {
223 opacity: 0;
224 transform: translateY(10px);
225 }
226 to {
227 opacity: 1;
228 transform: translateY(0);
229 }
230}
231 
232@keyframes pulse {
233 0%,
234 100% {
235 opacity: 1;
236 }
237 50% {
238 opacity: 0.5;
239 }
240}
241 
242@keyframes spin {
243 to {
244 transform: rotate(360deg);
245 }
246}
247 
248.animate-fadeIn {
249 animation: fadeIn 0.3s ease-out;
250}
251.animate-pulse {
252 animation: pulse 2s ease-in-out infinite;
253}
254.animate-spin {
255 animation: spin 1s linear infinite;
256}
257```
258 
259### CSS Transitions
260 
261```css
262.card {
263 transition:
264 transform 0.2s ease-out,
265 box-shadow 0.2s ease-out;
266}
267 
268.card:hover {
269 transform: translateY(-4px);
270 box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
271}
272```
273 
274## Accessibility Considerations
275 
276```css
277/* Respect user motion preferences */
278@media (prefers-reduced-motion: reduce) {
279 *,
280 *::before,
281 *::after {
282 animation-duration: 0.01ms !important;
283 animation-iteration-count: 1 !important;
284 transition-duration: 0.01ms !important;
285 }
286}
287```
288 
289```tsx
290function AnimatedComponent() {
291 const prefersReducedMotion = window.matchMedia(
292 "(prefers-reduced-motion: reduce)",
293 ).matches;
294 
295 return (
296 <motion.div
297 animate={{ opacity: 1 }}
298 transition={{ duration: prefersReducedMotion ? 0 : 0.3 }}
299 />
300 );
301}
302```
303 
304## Best Practices
305 
3061. **Performance First**: Use `transform` and `opacity` for smooth 60fps
3072. **Reduce Motion Support**: Always respect `prefers-reduced-motion`
3083. **Consistent Timing**: Use a timing scale across the app
3094. **Natural Physics**: Prefer spring animations over linear
3105. **Interruptible**: Allow users to cancel long animations
3116. **Progressive Enhancement**: Work without JS animations
3127. **Test on Devices**: Performance varies significantly
313 
314## Common Issues
315 
316- **Janky Animations**: Avoid animating `width`, `height`, `top`, `left`
317- **Over-animation**: Too much motion causes fatigue
318- **Blocking Interactions**: Never prevent user input during animations
319- **Memory Leaks**: Clean up animation listeners on unmount
320- **Flash of Content**: Use `will-change` sparingly for optimization
321 

Reviews

Installed this one?Write the first review and take the Trailblazer badge.

Reviews only open after a real install, so this is empty — and we leave it empty rather than invent one.

Alternatives

Also in Design & UI
Brand Protection — Amazon 🛡️Amazon brand protection toolkit. Detect hijackers, counterfeits, and unauthorized sellers. Includes MAP violation monitoring, trademark abuse detection, complaint templates for Brand Registry, and test buy evidence collection guides. No API key required.Design & UI · MIT◐····●35/40Brand Protection — eBay 🛡️eBay brand protection toolkit. Detect unauthorized sellers, counterfeits, and VeRO violations. Includes price monitoring, trademark abuse detection, VeRO complaint templates, and enforcement guides. No API key required.Design & UI · MIT◐····●35/40Brand Protection — Shopify/DTC 🛡️Shopify/DTC brand protection toolkit. Detect counterfeit stores, unauthorized resellers, and trademark violations. Includes DMCA takedown templates, domain monitoring, and social media infringement detection. No API key required.Design & UI · MIT◐····●35/40Brand Protection — TikTok Shop 🛡️TikTok Shop brand protection toolkit. Detect unauthorized sellers, counterfeit products, and affiliate abuse. Includes TikTok IP Protection reporting, influencer misuse detection, and complaint templates. No API key required.Design & UI · MIT◐····●35/40