317 lines
10 KiB
Markdown
317 lines
10 KiB
Markdown
---
|
|
name: delight
|
|
description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful.
|
|
user-invokable: true
|
|
args:
|
|
- name: target
|
|
description: The feature or area to add delight to (optional)
|
|
required: false
|
|
---
|
|
|
|
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.
|
|
|
|
1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and STOP and call the AskUserQuestionTool to clarify. whether you got it right.
|
|
2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST STOP and call the AskUserQuestionTool to clarify. 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:
|
|
|
|
1. **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
|
|
|
|
2. **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)
|
|
|
|
3. **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, STOP and call the AskUserQuestionTool to clarify.
|
|
|
|
**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**:
|
|
```css
|
|
/* 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. |