$npx -y skills add heyhank-app/heyhank --skill onboardDesign or improve onboarding flows, empty states, and first-time user experiences. Helps users get started successfully and understand value quickly.
| 1 | Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly. |
| 2 | |
| 3 | ## Assess Onboarding Needs |
| 4 | |
| 5 | Understand what users need to learn and why: |
| 6 | |
| 7 | 1. **Identify the challenge**: |
| 8 | - What are users trying to accomplish? |
| 9 | - What's confusing or unclear about current experience? |
| 10 | - Where do users get stuck or drop off? |
| 11 | - What's the "aha moment" we want users to reach? |
| 12 | |
| 13 | 2. **Understand the users**: |
| 14 | - What's their experience level? (Beginners, power users, mixed?) |
| 15 | - What's their motivation? (Excited and exploring? Required by work?) |
| 16 | - What's their time commitment? (5 minutes? 30 minutes?) |
| 17 | - What alternatives do they know? (Coming from competitor? New to category?) |
| 18 | |
| 19 | 3. **Define success**: |
| 20 | - What's the minimum users need to learn to be successful? |
| 21 | - What's the key action we want them to take? (First project? First invite?) |
| 22 | - How do we know onboarding worked? (Completion rate? Time to value?) |
| 23 | |
| 24 | **CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible. |
| 25 | |
| 26 | ## Onboarding Principles |
| 27 | |
| 28 | Follow these core principles: |
| 29 | |
| 30 | ### Show, Don't Tell |
| 31 | - Demonstrate with working examples, not just descriptions |
| 32 | - Provide real functionality in onboarding, not separate tutorial mode |
| 33 | - Use progressive disclosure - teach one thing at a time |
| 34 | |
| 35 | ### Make It Optional (When Possible) |
| 36 | - Let experienced users skip onboarding |
| 37 | - Don't block access to product |
| 38 | - Provide "Skip" or "I'll explore on my own" options |
| 39 | |
| 40 | ### Time to Value |
| 41 | - Get users to their "aha moment" ASAP |
| 42 | - Front-load most important concepts |
| 43 | - Teach 20% that delivers 80% of value |
| 44 | - Save advanced features for contextual discovery |
| 45 | |
| 46 | ### Context Over Ceremony |
| 47 | - Teach features when users need them, not upfront |
| 48 | - Empty states are onboarding opportunities |
| 49 | - Tooltips and hints at point of use |
| 50 | |
| 51 | ### Respect User Intelligence |
| 52 | - Don't patronize or over-explain |
| 53 | - Be concise and clear |
| 54 | - Assume users can figure out standard patterns |
| 55 | |
| 56 | ## Design Onboarding Experiences |
| 57 | |
| 58 | Create appropriate onboarding for the context: |
| 59 | |
| 60 | ### Initial Product Onboarding |
| 61 | |
| 62 | **Welcome Screen**: |
| 63 | - Clear value proposition (what is this product?) |
| 64 | - What users will learn/accomplish |
| 65 | - Time estimate (honest about commitment) |
| 66 | - Option to skip (for experienced users) |
| 67 | |
| 68 | **Account Setup**: |
| 69 | - Minimal required information (collect more later) |
| 70 | - Explain why you're asking for each piece of information |
| 71 | - Smart defaults where possible |
| 72 | - Social login when appropriate |
| 73 | |
| 74 | **Core Concept Introduction**: |
| 75 | - Introduce 1-3 core concepts (not everything) |
| 76 | - Use simple language and examples |
| 77 | - Interactive when possible (do, don't just read) |
| 78 | - Progress indication (step 1 of 3) |
| 79 | |
| 80 | **First Success**: |
| 81 | - Guide users to accomplish something real |
| 82 | - Pre-populated examples or templates |
| 83 | - Celebrate completion (but don't overdo it) |
| 84 | - Clear next steps |
| 85 | |
| 86 | ### Feature Discovery & Adoption |
| 87 | |
| 88 | **Empty States**: |
| 89 | Instead of blank space, show: |
| 90 | - What will appear here (description + screenshot/illustration) |
| 91 | - Why it's valuable |
| 92 | - Clear CTA to create first item |
| 93 | - Example or template option |
| 94 | |
| 95 | Example: |
| 96 | ``` |
| 97 | No projects yet |
| 98 | Projects help you organize your work and collaborate with your team. |
| 99 | [Create your first project] or [Start from template] |
| 100 | ``` |
| 101 | |
| 102 | **Contextual Tooltips**: |
| 103 | - Appear at relevant moment (first time user sees feature) |
| 104 | - Point directly at relevant UI element |
| 105 | - Brief explanation + benefit |
| 106 | - Dismissable (with "Don't show again" option) |
| 107 | - Optional "Learn more" link |
| 108 | |
| 109 | **Feature Announcements**: |
| 110 | - Highlight new features when they're released |
| 111 | - Show what's new and why it matters |
| 112 | - Let users try immediately |
| 113 | - Dismissable |
| 114 | |
| 115 | **Progressive Onboarding**: |
| 116 | - Teach features when users encounter them |
| 117 | - Badges or indicators on new/unused features |
| 118 | - Unlock complexity gradually (don't show all options immediately) |
| 119 | |
| 120 | ### Guided Tours & Walkthroughs |
| 121 | |
| 122 | **When to use**: |
| 123 | - Complex interfaces with many features |
| 124 | - Significant changes to existing product |
| 125 | - Industry-specific tools needing domain knowledge |
| 126 | |
| 127 | **How to design**: |
| 128 | - Spotlight specific UI elements (dim rest of page) |
| 129 | - Keep steps short (3-7 steps max per tour) |
| 130 | - Allow users to click through tour freely |
| 131 | - Include "Skip tour" option |
| 132 | - Make replayable (help menu) |
| 133 | |
| 134 | **Best practices**: |
| 135 | - Interactive > passive (let users click real buttons) |
| 136 | - Focus on workflow, not features ("Create a project" not "This is the project button") |
| 137 | - Provide sample data so actions work |
| 138 | |
| 139 | ### Interactive Tutorials |
| 140 | |
| 141 | **When to use**: |
| 142 | - Users need hands-on practice |
| 143 | - Concepts are complex or unfamiliar |
| 144 | - High stakes (better to practice in safe environment) |
| 145 | |
| 146 | **How to design**: |
| 147 | - Sandbox environment with sample data |
| 148 | - Clear objectives ("Create a chart showing sales by |