1---
2name: delight
3description: "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable."
4argument-hint: "[target]"
5user-invocable: true
6---
7
8Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.
9
10## MANDATORY PREPARATION
11
12Invoke {{command_prefix}}impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run {{command_prefix}}impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant).
13
14---
15
16## Assess Delight Opportunities
17
18Identify where delight would enhance (not distract from) the experience:
19
201. **Find natural delight moments**:
21 - **Success states**: Completed actions (save, send, publish)
22 - **Empty states**: First-time experiences, onboarding
23 - **Loading states**: Waiting periods that could be entertaining
24 - **Achievements**: Milestones, streaks, completions
25 - **Interactions**: Hover states, clicks, drags
26 - **Errors**: Softening frustrating moments
27 - **Easter eggs**: Hidden discoveries for curious users
28
292. **Understand the context**:
30 - What's the brand personality? (Playful? Professional? Quirky? Elegant?)
31 - Who's the audience? (Tech-savvy? Creative? Corporate?)
32 - What's the emotional context? (Accomplishment? Exploration? Frustration?)
33 - What's appropriate? (Banking app ≠ gaming app)
34
353. **Define delight strategy**:
36 - **Subtle sophistication**: Refined micro-interactions (luxury brands)
37 - **Playful personality**: Whimsical illustrations and copy (consumer apps)
38 - **Helpful surprises**: Anticipating needs before users ask (productivity tools)
39 - **Sensory richness**: Satisfying sounds, smooth animations (creative tools)
40
41If any of these are unclear from the codebase, {{ask_instruction}}
42
43**CRITICAL**: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far.
44
45## Delight Principles
46
47Follow these guidelines:
48
49### Delight Amplifies, Never Blocks
50- Delight moments should be quick (< 1 second)
51- Never delay core functionality for delight
52- Make delight skippable or subtle
53- Respect user's time and task focus
54
55### Surprise and Discovery
56- Hide delightful details for users to discover
57- Reward exploration and curiosity
58- Don't announce every delight moment
59- Let users share discoveries with others
60
61### Appropriate to Context
62- Match delight to emotional moment (celebrate success, empathize with errors)
63- Respect the user's state (don't be playful during critical errors)
64- Match brand personality and audience expectations
65- Cultural sensitivity (what's delightful varies by culture)
66
67### Compound Over Time
68- Delight should remain fresh with repeated use
69- Vary responses (not same animation every time)
70- Reveal deeper layers with continued use
71- Build anticipation through patterns
72
73## Delight Techniques
74
75Add personality and joy through these methods:
76
77### Micro-interactions & Animation
78
79**Button delight**:
80```css
81/* Satisfying button press */
82.button {
83 transition: transform 0.1s, box-shadow 0.1s;
84}
85.button:active {
86 transform: translateY(2px);
87 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
88}
89
90/* Ripple effect on click */
91/* Smooth lift on hover */
92.button:hover {
93 transform: translateY(-2px);
94 transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
95}
96```
97
98**Loading delight**:
99- Playful loading animations (not just spinners)
100- Personality in loading messages (write product-specific ones, not generic AI filler)
101- Progress indication with encouraging messages
102- Skeleton screens with subtle animations
103
104**Success animations**:
105- Checkmark draw animation
106- Confetti burst for major achievements
107- Gentle scale + fade for confirmation
108- Satisfying sound effects (subtle)
109
110**Hover surprises**:
111- Icons that animate on hover
112- Color shifts or glow effects
113- Tooltip reveals with personality
114- Cursor changes (custom cursors for branded experiences)
115
116### Personality in Copy
117
118**Playful error messages**:
119```
120"Error 404"
121"This page is playing hide and seek. (And winning)"
122
123"Connection failed"
124"Looks like the internet took a coffee break. Want to retry?"
125```
126
127**Encouraging empty states**:
128```
129"No projects"
130"Your canvas awaits. Create something amazing."
131
132"No messages"
133"Inbox zero! You're crushing it today."
134```
135
136**Playful labels & tooltips**:
137```
138"Delete"
139"Send to void" (for playful brand)
140
141"Help"
142"Rescue me" (tooltip)
143```
144
145**IMPORTANT**: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm.
146
147### Illustrations & Visual Personality
148
149**Custom illustrations**:
150- Empty state illustrations (not stock icons)
151- Error state illustrations (friendly monsters, quirky characters)
152- Loading state illustrations (animated characters)
153- Success state illustrations (celebrations)
154
155**Icon personality**:
156- Custom icon set matching brand personality
157- Animated icons (subtle motion on hover/click)
158- Illustrative icons (more detailed than generic)
159- Consistent style across all icons
160
161**Background effects**:
162- Subtle particle effects
163- Gradient mesh backgrounds
164- Geometric patterns
165- Parallax depth
166- Time-of-day themes (morning vs night)
167
168### Satisfying Interactions
169
170**Drag and drop delight**:
171- Lift effect on drag (shadow, scale)
172- Snap animation when dropped
173- Satisfying placement sound
174- Undo toast ("Dropped in wrong place? [Undo]")
175
176**Toggle switches**:
177- Smooth slide with spring physics
178- Color transition
179- Haptic feedback on mobile
180- Optional sound effect
181
182**Progress & achievements**:
183- Streak counters with celebratory milestones
184- Progress bars that "celebrate" at 100%
185- Badge unlocks with animation
186- Playful stats ("You're on fire! 5 days in a row")
187
188**Form interactions**:
189- Input fields that animate on focus
190- Checkboxes with a satisfying scale pulse when checked
191- Success state that celebrates valid input
192- Auto-grow textareas
193
194### Sound Design
195
196**Subtle audio cues** (when appropriate):
197- Notification sounds (distinctive but not annoying)
198- Success sounds (satisfying "ding")
199- Error sounds (empathetic, not harsh)
200- Typing sounds for chat/messaging
201- Ambient background audio (very subtle)
202
203**IMPORTANT**:
204- Respect system sound settings
205- Provide mute option
206- Keep volumes quiet (subtle cues, not alarms)
207- Don't play on every interaction (sound fatigue is real)
208
209### Easter Eggs & Hidden Delights
210
211**Discovery rewards**:
212- Konami code unlocks special theme
213- Hidden keyboard shortcuts (Cmd+K for special features)
214- Hover reveals on logos or illustrations
215- Alt text jokes on images (for screen reader users too!)
216- Console messages for developers ("Like what you see? We're hiring!")
217
218**Seasonal touches**:
219- Holiday themes (subtle, tasteful)
220- Seasonal color shifts
221- Weather-based variations
222- Time-based changes (dark at night, light during day)
223
224**Contextual personality**:
225- Different messages based on time of day
226- Responses to specific user actions
227- Randomized variations (not same every time)
228- Progressive reveals with continued use
229
230### Loading & Waiting States
231
232**Make waiting engaging**:
233- Interesting loading messages that rotate
234- Progress bars with personality
235- Mini-games during long loads
236- Fun facts or tips while waiting
237- Countdown with encouraging messages
238
239```
240Loading messages — write ones specific to your product, not generic AI filler:
241- "Crunching your latest numbers..."
242- "Syncing with your team's changes..."
243- "Preparing your dashboard..."
244- "Checking for updates since yesterday..."
245```
246
247**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy — instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
248
249### Celebration Moments
250
251**Success celebrations**:
252- Confetti for major milestones
253- Animated checkmarks for completions
254- Progress bar celebrations at 100%
255- "Achievement unlocked" style notifications
256- Personalized messages ("You published your 10th article!")
257
258**Milestone recognition**:
259- First-time actions get special treatment
260- Streak tracking and celebration
261- Progress toward goals
262- Anniversary celebrations
263
264## Implementation Patterns
265
266**Animation libraries**:
267- Framer Motion (React)
268- GSAP (universal)
269- Lottie (After Effects animations)
270- Canvas confetti (party effects)
271
272**Sound libraries**:
273- Howler.js (audio management)
274- Use-sound (React hook)
275
276**Physics libraries**:
277- React Spring (spring physics)
278- Popmotion (animation primitives)
279
280**IMPORTANT**: File size matters. Compress images, optimize animations, lazy load delight features.
281
282**NEVER**:
283- Delay core functionality for delight
284- Force users through delightful moments (make skippable)
285- Use delight to hide poor UX
286- Overdo it (less is more)
287- Ignore accessibility (animate responsibly, provide alternatives)
288- Make every interaction delightful (special moments should be special)
289- Sacrifice performance for delight
290- Be inappropriate for context (read the room)
291
292## Verify Delight Quality
293
294Test that delight actually delights:
295
296- **User reactions**: Do users smile? Share screenshots?
297- **Doesn't annoy**: Still pleasant after 100th time?
298- **Doesn't block**: Can users opt out or skip?
299- **Performant**: No jank, no slowdown
300- **Appropriate**: Matches brand and context
301- **Accessible**: Works with reduced motion, screen readers
302
303Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct.