skills.rest
bfree-trainer
bfree-trainerOFFICIAL
Explore all skills by this author →
WebsiteGitHub

onboard

Design onboarding flows with progressive disclosure and analytics tracking.

60|7|Updated Oct 18, 2020
Search Tags:#onboarding#progressive-disclosure#user-activation#empty-states#guided-tours#first-time-user
One-click install
npx skills add https://github.com/bfree-trainer/bfree --skill onboard-bfree-trainer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: onboard
Source: https://github.com/bfree-trainer/bfree/tree/main/.claude/skills/onboard
Command: npx skills add https://github.com/bfree-trainer/bfree --skill onboard-bfree-trainer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many products fail to convert new users because first-run experiences are confusing, overwhelming, or disconnected from real value; this Skill helps design onboarding, empty states, and first-success flows that get users to the product's "aha" moment quickly while respecting their time and intelligence.

Core Features & Use Cases

  • Design Principles & Patterns: Emphasizes "show, don't tell", progressive disclosure, optional onboarding, time-to-value, and respect for user intelligence.
  • Onboarding Elements: Guidance for welcome screens, minimal account setup, core concept introduction, first-success flows, contextual tooltips, guided tours, interactive tutorials, and empty states.
  • Implementation Guidance: Recommends technical patterns such as localStorage for seen states, analytics to track completion and drop-offs, non-blocking modals, and popular libraries for tooltips and tours.
  • Use Case: Introduce a new user to a web app by pre-populating sample data, guiding them through one small real task, and surfacing clear next steps to ensure they experience value quickly.

Quick Start

Ask the onboard skill to design an onboarding flow that guides novice users to create their first project with a single interactive step and a clear empty-state CTA.

Frequently Asked Questions about onboard

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

FAQPage Schema
How do I design a first-run onboarding flow that gets users to the product's core value quickly?▼

A first-run onboarding flow should apply progressive disclosure and guided tours to lead users directly to the product's aha moment. Pre-populating sample data and guiding users through one small real task ensures they experience value quickly.

What is progressive disclosure in user activation and when should I use it?▼

Progressive disclosure in user activation is a design pattern that reveals features gradually to avoid overwhelming new users. It should be used in first-run experiences and empty states to respect user intelligence while guiding them to core product value.

How do I implement interactive tutorials and guided tours without blocking the user interface?▼

Interactive tutorials and guided tours should be implemented using non-blocking modals and contextual tooltips. Utilizing popular libraries for tooltips alongside localStorage for tracking seen states prevents the interface from disrupting returning users.

What's the best way to track user onboarding completion rates and drop-off points?▼

The best way to track onboarding completion and drop-off points is by integrating analytics directly into the first-success flow. Monitoring interactions with empty states and guided tours identifies where users disengage before reaching the aha moment.

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

Yes, this onboarding design approach applies to both web and mobile onboarding flows. It accommodates platform-specific first-time activation scenarios by adapting welcome screens, minimal account setup, and contextual tooltips for each environment.

Why do I need an empty state CTA for first-time users?▼

An empty state CTA is needed for first-time users to provide clear next steps when no data exists yet. It guides users toward their first success by prompting an immediate action rather than leaving them confused by a blank screen.

Related Skills

Explore More Design & Creative Skills→
OlatisunkanmiOlatisunkanmi
8

i-onboard

Design onboarding flows with prioritized UI changes and verification plans.

Community
Intermediate
mohamednegm0mohamednegm0

form-cro

Audit non-signup forms and recommend field, layout, and A/B test improvements.

Community
Intermediate
stevengonsalvezstevengonsalvez

onboard

Design onboarding experiences with empty states, guided tours, and tooltips.

Community
Advanced
TheWayWithinTheWayWithin
13

saas-onboarding

Design and automate multi-step SaaS user onboarding flows with activation milestones.

Community
Intermediate