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