Improve product care, anticipation, and useful feedback when the user asks for delight or polish.
Real-world examples not captured yet
This skill shows a gallery of live HTML demos (CDN libraries welcome — GSAP, Three.js, etc.) rendered inline via srcdoc.
Skill markdown
# Product Delight Delight is anticipation, reliability, and care. Animation can support those qualities. Animation is not the definition of them. ## Principles 1. Give people what they need before they know to ask. 2. Arrive early with useful defaults and prefilled context. 3. Show care in the smallest details. 4. Make the product feel attentive to the person using it. 5. Work as expected every time. 6. Meet the expected path, then offer the extra mile. 7. Prefer tiny details with outsized clarity over spectacle. 8. Treat delight as icing, not the cake. 9. Stay between excess and restriction. 10. Leave no important question unanswered in the journey. ## Defaults - Identify the user need before adding motion; infer it from the task and ask only if the missing context changes the design. - Invest first in reliability, latency, empty states, and clarity. - Use motion to explain cause and effect, not to decorate. - Remove novelty that competes with the task. ## Prefer / Reject | Prefer | Reject | | --- | --- | | Anticipatory defaults | Confetti on every success | | Reliable interactions | Delight that fails under slow networks | | Quiet craft details | "Make it pop" with no problem statement | | One meaningful moment | Many competing flourishes | ## Review checklist - [ ] What human need does this delight anticipate? - [ ] Does the base task already work reliably? - [ ] Would removing the flourish make the product worse or merely quieter? - [ ] Does motion clarify state, hierarchy, or feedback? - [ ] Is there a reduced-motion equivalent that keeps the meaning? - [ ] Would this still feel considerate on a second and tenth use? ## Source essays - Ten principles for product delight - On overdoing delight - On adding homepage delight
More from kemiljk
- Ai Output JudgementCritique generated UI, copy, or code when the user requests a quality review of AI output.
- Android Native UIBuild or review Android interfaces in Compose or Views, including Material conventions, accessibility, adaptive layout, and state.
- Apple Native UIBuild or review native Apple interfaces, including platform controls, accessibility, state, navigation, and macOS window behavior.
- Design EngineeringTranslate design intent into production components or improve collaboration between design and engineering.
- Design For RepetitionImprove workflows used repeatedly by examining recurring effort, waiting, setup, interruption, context retention, and expert paths. Use when an experience works once but may become tiring or inefficient in regular use.
- Design System EvolutionDecide how an existing design system should evolve: reuse a component, add a variant, change its API, or introduce a new pattern. Use when real design or code consumers expose a mismatch and a bounded compatibility or migration decision is needed.