onboard

Design onboarding flows with welcome screens, empty states, and guided tours.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/BilsoNyuMNAM/hypertrophy-project --skill onboard-bilsonyumnam
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: onboard
Source: https://github.com/BilsoNyuMNAM/hypertrophy-project/tree/main/.gemini/skills/onboard
Command: npx skills add https://github.com/BilsoNyuMNAM/hypertrophy-project --skill onboard-bilsonyumnam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Onboarding experiences often fail to communicate value quickly, leading to user confusion and low activation; this Skill guides teams to design or improve onboarding flows, empty states, and first-time user experiences so users understand value fast.

Core Features & Use Cases

  • Initial Product Onboarding: Welcome screens, account setup, core concept introduction, and a first success path to orient new users.
  • Feature Discovery & Adoption: Empty states, contextual tooltips, feature announcements, and progressive onboarding to reveal capability as users need it.
  • Guided Tours & Walkthroughs: Short, replayable tours focusing on workflows and real tasks rather than feature lists.
  • Interactive Tutorials: Hands-on practice in a safe environment with guided steps and validation.
  • Documentation & Help: In-product help, searchable knowledge base, and quick access to learn more.
  • Empty State Design: Clear messaging, visuals, and CTAs when no data exists to guide next steps.
  • Implementation Patterns: Technical patterns for tooltips, tours, localStorage tracking, and basic analytics.
  • Verify Onboarding Quality: Metrics for time-to-value, completion rates, and skip rates to improve effectiveness.

Quick Start

Draft a complete onboarding flow for a new product, including a welcome screen, progressive hints, and an empty-state example.

Frequently Asked Questions about onboard

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

FAQPage Schema
What is onboarding design and how does it drive user activation?

Onboarding design standardizes welcome experiences, empty states, and contextual tips to help new users understand product value quickly. By guiding users to their first success path, it directly increases activation rates and reduces early drop-off.

How do I design an empty state that encourages users to take action?

To design effective empty states, include clear messaging, relevant visuals, and strong calls to action that guide users on their next steps. This approach turns a zero-data screen into an educational moment that drives feature discovery and progressive onboarding.

What are the best practices for creating guided tours and interactive walkthroughs?

The best guided tours are short, replayable, and focus on real tasks and workflows rather than mere feature lists. Interactive walkthroughs should provide hands-on practice in a safe environment with guided steps and validation to ensure user comprehension.

Does this onboarding design approach work for both web and mobile apps?

Yes, this onboarding design approach applies to product teams building both web and mobile apps. It standardizes welcome experiences, feature discovery, and empty states across platforms to consistently drive user activation and education.

How do I measure the effectiveness of a new user onboarding flow?

Measure onboarding effectiveness by tracking time-to-value, completion rates, and skip rates. These metrics reveal how quickly users reach core product value, whether they finish the guided tours, and if the contextual tips are engaging or being ignored.

What technical patterns are needed to implement contextual tooltips and progressive onboarding?

Implementing progressive onboarding requires technical patterns for tooltips, tours, and localStorage tracking to manage user state. It also requires basic analytics integration to monitor feature adoption and how users interact with in-product help and announcements.