Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.
MANDATORY PREPARATION
Context Gathering (Do This First)
You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality (playful vs professional vs quirky vs elegant), and what's appropriate for the domain.
Attempt to gather these from the current thread or codebase.
- If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and {{ask_instruction}} whether you got it right.
- Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST {{ask_instruction}} clarifying questions first to complete your context.
Do NOT proceed until you have answers. Delight that's wrong for the context is worse than no delight at all.
Use frontend-design skill
Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
Assess Delight Opportunities
Identify where delight would enhance (not distract from) the experience:
- Find natural delight moments:
- Success states: Completed actions (save, send, publish) - Empty states: First-time experiences, onboarding - Loading states: Waiting periods that could be entertaining - Achievements: Milestones, streaks, completions - Interactions: Hover states, clicks, drags - Errors: Softening frustrating moments - Easter eggs: Hidden discoveries for curious users
- Understand the context:
- What's the brand personality? (Playful? Professional? Quirky? Elegant?) - Who's the audience? (Tech-savvy? Creative? Corporate?) - What's the emotional context? (Accomplishment? Exploration? Frustration?) - What's appropriate? (Banking app ≠ gaming app)
- Define delight strategy:
- Subtle sophistication: Refined micro-interactions (luxury brands) - Playful personality: Whimsical illustrations and copy (consumer apps) - Helpful surprises: Anticipating needs before users ask (productivity tools) - Sensory richness: Satisfying sounds, smooth animations (creative tools)
If any of these are unclear from the codebase, {{ask_instruction}}
CRITICAL: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far.
Delight Principles
Follow these guidelines:
Delight Amplifies, Never Blocks
- Delight moments should be quick (< 1 second)
- Never delay core functionality for delight
- Make delight skippable or subtle
- Respect user's time and task focus
Surprise and Discovery
- Hide delightful details for users to discover
- Reward exploration and curiosity
- Don't announce every delight moment
- Let users share discoveries with others
Appropriate to Context
- Match delight to emotional moment (celebrate success, empathize with errors)
- Respect the user's state (don't be playful during critical errors)
- Match brand personality and audience expectations
- Cultural sensitivity (what's delightful varies by culture)
Compound Over Time
- Delight should remain fresh with repeated use
- Vary responses (not same animation every time)
- Reveal deeper layers with continued use
- Build anticipation through patterns
Delight Techniques
Add personality and joy through these methods:
Micro-interactions & Animation
Button delight:
/* Satisfying button press */
.button {
transition: transform 0.1s, box-shadow 0.1s;
}
.button:active {
transform: translateY(2px);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Ripple effect on click */
/* Smooth lift on hover */
.button:hover {
transform: translateY(-2px);
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
}Loading delight:
- Playful loading animations (not just spinners)
- Personality in loading messages ("Herding pixels..." "Teaching robots to dance...")
- Progress indication with encouraging messages
- Skeleton screens with subtle animations
Success animations:
- Checkmark draw animation
- Confetti burst for major achievements
- Gentle scale + fade for confirmation
- Satisfying sound effects (subtle)
Hover surprises:
- Icons that animate on hover
- Color shifts or glow effects
- Tooltip reveals with personality
- Cursor changes (custom cursors for branded experiences)
Personality in Copy
Playful error messages:
"Error 404"
"This page is playing hide and seek. (And winning)"
"Connection failed"
"Looks like the internet took a coffee break. Want to retry?"Encouraging empty states:
"No projects"
"Your canvas awaits. Create something amazing."
"No messages"
"Inbox zero! You're crushing it today."Playful labels & tooltips:
"Delete"
"Send to void" (for playful brand)
"Help"
"Rescue me" (tooltip)IMPORTANT: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm.
Illustrations & Visual Personality
Custom illustrations:
- Empty state illustrations (not stock icons)
- Error state illustrations (friendly monsters, quirky characters)
- Loading state illustrations (animated characters)
- Success state illustrations (celebrations)
Icon personality:
- Custom icon set matching brand personality
- Animated icons (subtle motion on hover/click)
- Illustrative icons (more detailed than generic)
- Consistent style across all icons
Background effects:
- Subtle particle effects
- Gradient mesh backgrounds
- Geometric patterns
- Parallax depth
- Time-of-day themes (morning vs night)
Satisfying Interactions
Drag and drop delight:
- Lift effect on drag (shadow, scale)
- Snap animation when dropped
- Satisfying placement sound
- Undo toast ("Dropped in wrong place? [Undo]")
Toggle switches:
- Smooth slide with spring physics
- Color transition
- Haptic feedback on mobile
- Optional sound effect
Progress & achievements:
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
- Playful stats ("You're on fire! 5 days in a row")
Form interactions:
- Input fields that animate on focus
- Checkboxes that bounce when checked
- Success state that celebrates valid input
- Auto-grow textareas
Sound Design
Subtle audio cues (when appropriate):
- Notification sounds (distinctive but not annoying)
- Success sounds (satisfying "ding")
- Error sounds (empathetic, not harsh)
- Typing sounds for chat/messaging
- Ambient background audio (very subtle)
IMPORTANT:
- Respect system sound settings
- Provide mute option
- Keep volumes quiet (subtle cues, not alarms)
- Don't play on every interaction (sound fatigue is real)
Easter Eggs & Hidden Delights
Discovery rewards:
- Konami code unlocks special theme
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
- Console messages for developers ("Like what you see? We're hiring!")
Seasonal touches:
- Holiday themes (subtle, tasteful)
- Seasonal color shifts
- Weather-based variations
- Time-based changes (dark at night, light during day)
Contextual personality:
- Different messages based on time of day
- Responses to specific user actions
- Randomized variations (not same every time)
- Progressive reveals with continued use
Loading & Waiting States
Make waiting engaging:
- Interesting loading messages that rotate
- Progress bars with personality
- Mini-games during long loads
- Fun facts or tips while waiting
- Countdown with encouraging messages
Loading messages rotation:
- "Waking up the servers..."
- "Teaching robots to dance..."
- "Consulting the magic 8-ball..."
- "Counting backwards from infinity..."Celebration Moments
Success celebrations:
- Confetti for major milestones
- Animated checkmarks for completions
- Progress bar celebrations at 100%
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
Milestone recognition:
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
- Anniversary celebrations
Implementation Patterns
Animation libraries:
- Framer Motion (React)
- GSAP (universal)
- Lottie (After Effects animations)
- Canvas confetti (party effects)
Sound libraries:
- Howler.js (audio management)
- Use-sound (React hook)
Physics libraries:
- React Spring (spring physics)
- Popmotion (animation primitives)
IMPORTANT: File size matters. Compress images, optimize animations, lazy load delight features.
NEVER:
- Delay core functionality for delight
- Force users through delightful moments (make skippable)
- Use delight to hide poor UX
- Overdo it (less is more)
- Ignore accessibility (animate responsibly, provide alternatives)
- Make every interaction delightful (special moments should be special)
- Sacrifice performance for delight
- Be inappropriate for context (read the room)
Verify Delight Quality
Test that delight actually delights:
- User reactions: Do users smile? Share screenshots?
- Doesn't annoy: Still pleasant after 100th time?
- Doesn't block: Can users opt out or skip?
- Performant: No jank, no slowdown
- Appropriate: Matches brand and context
- Accessible: Works with reduced motion, screen readers
Remember: 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.