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.