i-delight_skill

Overview

This skill helps teams add moments of joy, personality, and unexpected polish that turn functional interfaces into memorable, enjoyable experiences. It provides a practical checklist of delight opportunities, techniques, and implementation patterns while enforcing the Context Gathering Protocol from i-frontend-design. Use it to plan small, appropriate, and testable micro-interactions without hurting usability or performance.

How this skill works

The skill inspects UI touchpoints (success states, empty states, loading, errors, interactions, achievements, and easter eggs) and maps them to appropriate delight strategies based on brand personality and user context. It requires running the Context Gathering Protocol (and teach-impeccable if no context exists) to determine what level of playfulness or elegance is appropriate. The output is a prioritized list of low-risk delight enhancements, implementation notes (animations, sound, assets), and verification checks for performance and accessibility.

When to use it

• When onboarding or first-time user flows feel dry and could benefit from encouragement.
• When success and achievement moments should feel rewarding (publishes, milestones, streaks).
• When loading or waiting periods are long enough that small distractions improve perceived speed.
• When error messages frustrate users and need empathy or softening.
• When brand personality needs clearer expression through micro-interactions.

Best practices

• Always run the Context Gathering Protocol first to match delight to brand and audience.
• Keep delight quick (<1s), skippable, and never blocking core tasks.
• Optimize assets: compress images, lazy-load large animations, and prefer vector/Lottie where possible.
• Respect accessibility: honor reduced motion, provide alternatives for audio, and ensure screen-reader friendly copy.
• Vary delight over time and make it discoverable without announcing every moment.

Example use cases

• Add a subtle checkmark draw and brief celebration on successful form submission.
• Replace a spinner with a brand-themed skeleton and rotating helpful tips during long loads.
• Design a friendly empty-state illustration and encouraging copy for new users.
• Soften error states with empathetic copy and a small retry animation.
• Introduce seasonal theme variants and a hidden easter egg reachable via keyboard shortcut.