delight
starsforks
How to install delight?
heyhank-app/heyhank/delight
$npx -y skills add heyhank-app/heyhank --skill delightAdd moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful.
SKILL.md
| 1 | Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. |
| 2 | |
| 3 | ## MANDATORY PREPARATION |
| 4 | |
| 5 | ### Context Gathering (Do This First) |
| 6 | |
| 7 | 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. |
| 8 | |
| 9 | Attempt to gather these from the current thread or codebase. |
| 10 | |
| 11 | 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. |
| 12 | 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. |
| 13 | |
| 14 | Do NOT proceed until you have answers. Delight that's wrong for the context is worse than no delight at all. |
| 15 | |
| 16 | ### Use frontend-design skill |
| 17 | |
| 18 | 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. |
| 19 | |
| 20 | --- |
| 21 | |
| 22 | ## Assess Delight Opportunities |
| 23 | |
| 24 | Identify where delight would enhance (not distract from) the experience: |
| 25 | |
| 26 | 1. **Find natural delight moments**: |
| 27 | - **Success states**: Completed actions (save, send, publish) |
| 28 | - **Empty states**: First-time experiences, onboarding |
| 29 | - **Loading states**: Waiting periods that could be entertaining |
| 30 | - **Achievements**: Milestones, streaks, completions |
| 31 | - **Interactions**: Hover states, clicks, drags |
| 32 | - **Errors**: Softening frustrating moments |
| 33 | - **Easter eggs**: Hidden discoveries for curious users |
| 34 | |
| 35 | 2. **Understand the context**: |
| 36 | - What's the brand personality? (Playful? Professional? Quirky? Elegant?) |
| 37 | - Who's the audience? (Tech-savvy? Creative? Corporate?) |
| 38 | - What's the emotional context? (Accomplishment? Exploration? Frustration?) |
| 39 | - What's appropriate? (Banking app ≠ gaming app) |
| 40 | |
| 41 | 3. **Define delight strategy**: |
| 42 | - **Subtle sophistication**: Refined micro-interactions (luxury brands) |
| 43 | - **Playful personality**: Whimsical illustrations and copy (consumer apps) |
| 44 | - **Helpful surprises**: Anticipating needs before users ask (productivity tools) |
| 45 | - **Sensory richness**: Satisfying sounds, smooth animations (creative tools) |
| 46 | |
| 47 | If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify. |
| 48 | |
| 49 | **CRITICAL**: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far. |
| 50 | |
| 51 | ## Delight Principles |
| 52 | |
| 53 | Follow these guidelines: |
| 54 | |
| 55 | ### Delight Amplifies, Never Blocks |
| 56 | - Delight moments should be quick (< 1 second) |
| 57 | - Never delay core functionality for delight |
| 58 | - Make delight skippable or subtle |
| 59 | - Respect user's time and task focus |
| 60 | |
| 61 | ### Surprise and Discovery |
| 62 | - Hide delightful details for users to discover |
| 63 | - Reward exploration and curiosity |
| 64 | - Don't announce every delight moment |
| 65 | - Let users share discoveries with others |
| 66 | |
| 67 | ### Appropriate to Context |
| 68 | - Match delight to emotional moment (celebrate success, empathize with errors) |
| 69 | - Respect the user's state (don't be playful during critical errors) |
| 70 | - Match brand personality and audience expectations |
| 71 | - Cultural sensitivity (what's delightful varies by culture) |
| 72 | |
| 73 | ### Compound Over Time |
| 74 | - Delight should remain fresh with repeated use |
| 75 | - Vary responses (not same animation every time) |
| 76 | - Reveal deeper layers with continued use |
| 77 | - Build anticipation through patterns |
| 78 | |
| 79 | ## Delight Techniques |
| 80 | |
| 81 | Add personality and joy through these methods: |
| 82 | |
| 83 | ### Micro-interactions & Animation |
| 84 | |
| 85 | **Button delight**: |
| 86 | ```css |
| 87 | /* Satisfying button press */ |
| 88 | .button { |
| 89 | transition: transform 0.1s, box-shadow 0.1s; |
| 90 | } |
| 91 | .button:active { |
| 92 | transform: translateY(2px); |
| 93 | box-shadow: 0 2px 4px rgba(0,0,0,0.2); |
| 94 | } |
| 95 | |
| 96 | /* Ripple effect on click */ |
| 97 | /* Smooth lift on hover */ |
| 98 | .button:hover { |
| 99 | transform: translateY(-2px); |
| 100 | transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */ |
| 101 | } |
| 102 | ``` |
| 103 | |
| 104 | **Loading delight**: |
| 105 | - Playful loading animations (not just spinners) |
| 106 | - Personality in loading messages ("Herding pixels..." "Teaching robots to dance...") |
| 107 | - Progress indication with encouraging messages |
| 108 | - Skeleton screens with subtle animations |
| 109 | |
| 110 | **Success animations**: |
| 111 | - Checkmark draw animation |
| 112 | - Confetti burst for major achievements |
| 113 | - Gentle scale + fade for confirmation |
| 114 | - Satisfying sound effects (subtle) |
| 115 | |
| 116 | **Hover surprises**: |
| 117 | - Icons that animate on hover |
| 118 | - Color shifts or glow effects |
| 119 | - Tooltip reveals with personality |
| 120 | - Cursor changes (custom cursors for branded experiences) |
| 121 | |
| 122 | ### Personality in Copy |
People who liked this also viewed
6 picksType
- lark-openapi-explorer飞书/Lark 原生 OpenAPI 探索：从官方文档库中挖掘未经 CLI 封装的原生 OpenAPI 接口。当用户的需求无法被现有 lark-* skill 或 lark-cli 已注册命令满足，需要查找并调用原生飞书 OpenAPI 时使用。SkillsJul 2026
- lark-skill-maker创建 lark-cli 的自定义 Skill。当用户需要把飞书 API 操作封装成可复用的 Skill（包装原子 API 或编排多步流程）时使用。SkillsJul 2026
- azure-cost-optimizationOfficial agent plugin providing skills and MCP server configurations for Azure scenarios.SkillsJul 2026
- vercel-react-native-skillsVercel's official collection of agent skillsSkillsJul 2026
- mcp-builderGuide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate externaSkillsJul 2026
- gws-sharedgws CLI: Shared patterns for authentication, global flags, and output formatting.SkillsJul 2026
