Delight Skill

Add micro-interactions so interfaces respond like physical things.

→ See guides/ANIMATIONS-GUIDE.md for animation principles and types. → See guides/IMPLEMENTATION-GUIDE.md for code examples and patterns.

Micro-interactions are the difference between a UI that feels alive and one that feels like a PDF. Every interaction should leave a trace.

When to Use

• Interface feels stiff or lifeless
• No feedback on hover, tap, or action completion
• User says "make it feel more responsive"
• Transitions feel jarring or instant (no duration)
• Loading states are blank or flicker
• After functionality is complete, before polish

When NOT to Use

• Performance optimization (use optimize — then delight on top)
• Structural changes (use build skills)
• Replacing missing states (use harden first)

Output Contract

Process

1. Identify Touchpoints

Every user interaction is a delight opportunity:

2. Fix by Category

Hover & Focus

Tap & Click

State Transitions

Loading & Feedback

3. Performance Rules

• Animate ONLY transform and opacity — never width, height, top, left
• Keep durations between 150ms-400ms (below 150ms is instant, above 400ms is slow)
• Use will-change: transform on animated elements
• Respect prefers-reduced-motion (use harden to add it)
• Avoid animating 10+ elements simultaneously

4. Output Format

/delight the product card

Fix 1: Hover state
  - Before: no hover effect
  - After: transform: scale(1.02), box-shadow: 0 4px 12px, transition: 200ms

Fix 2: Add to cart button
  - Before: text changes instantly
  - After: icon morphs from "+" to checkmark (200ms), button pulses green

Fix 3: Card enter animation
  - Before: all cards appear at once
  - After: stagger in by index, translateY(20px) → translateY(0), 250ms each

Fix 4: Loading skeleton
  - Before: loading text
  - After: card-shaped skeleton with shimmer animation

5. Escalation Rules

Pitfalls

• Over-delighting — Not every pixel needs to animate. Animate interactions, not eye candy.
• Accessibility first — Always test with prefers-reduced-motion. Delight must degrade gracefully.
• Duration drift — Keep all micro-interactions within 150-400ms. Faster than conscious thought.
• Animation without purpose — Every animation should communicate: this changed, this is interactive, this is happening.

QA Gates

• All interactive elements have hover/focus feedback
• All state changes have transitions (not instant)
• All durations within 150-400ms
• Only transform and opacity animated
• prefers-reduced-motion respected
• Loading states have animation (not blank)
• Success/error feedback is animated
• Page enters have subtle transition
• No animation for animation's sake