delight

Adds micro-interactions, animations, and personality to user interfaces for memorable experiences.

1|Updated Oct 20, 2024
One-click install
npx skills add https://github.com/SteveChandler/quiver --skill delight-stevechandler
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: delight
Source: https://github.com/SteveChandler/quiver/tree/main/.agents/skills/delight
Command: npx skills add https://github.com/SteveChandler/quiver --skill delight-stevechandler

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Functional interfaces often feel sterile and forgettable, missing opportunities to engage users emotionally during success states, loading periods, empty states, and everyday interactions. ## Core Features & Use Cases - Delight Opportunity Assessment: Identifies natural moments for delight including success states, empty states, loading periods, achievements, hover interactions, and error softening. - Implementation Techniques: Provides concrete patterns for micro-interactions, playful copy, custom illustrations, satisfying drag-and-drop, sound design, easter eggs, and celebration moments. - Quality Guardrails: Enforces principles that delight must never block usability, delay core functionality, or ignore accessibility requirements like reduced motion. - Use Case: When building a surf session logging flow, use this Skill to add a celebratory animation when a user logs their first session, playful loading messages while forecasts load, and an encouraging empty state for new users. ## Quick Start Review my interface and suggest specific delight enhancements for the success, loading, and empty states that match our brand personality.

Frequently Asked Questions about delight

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add delight to a user interface without hurting usability?▼

Keep delight moments under one second, make them skippable or subtle, and never delay core functionality. Delight should amplify the experience, so if users notice the animation more than accomplishing their goal, reduce its intensity.

What are good micro-interaction examples for buttons and forms?▼

Effective micro-interactions include button press transforms with shadow changes, hover lift effects using ease-out-quart timing, checkboxes that bounce when checked, and input fields that animate on focus. Use CSS transitions or libraries like Framer Motion.

Which animation libraries work for adding delight in React?▼

Framer Motion handles React animations, React Spring provides spring physics, Lottie renders After Effects animations, and canvas-confetti creates celebration effects. For sound, use Howler.js or the use-sound React hook.

Does adding animations and delight affect accessibility?▼

Yes, animations must respect reduced motion preferences and work with screen readers. Provide alternatives for animated content, keep sound cues optional with mute controls, and never use delight to obscure essential information.

When should I avoid adding playful personality to an interface?▼

Avoid playfulness during critical errors, in serious domains like banking or healthcare where tone must stay professional, and when it would delay task completion. Match the emotional context and brand personality before adding whimsy.