skills.rest
SteveChandler
SteveChandlerCOMMUNITY
Explore all skills by this author →
GitHub

onboard

Design onboarding flows, empty states, and first-time user experiences for products.

1|Updated Oct 20, 2024
Search Tags:#onboarding#user experience#empty states#tooltips#feature discovery#time to value#product tours
One-click install
npx skills add https://github.com/SteveChandler/quiver --skill onboard-stevechandler
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: onboard
Source: https://github.com/SteveChandler/quiver/tree/main/.agents/skills/onboard
Command: npx skills add https://github.com/SteveChandler/quiver --skill onboard-stevechandler

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? New users often abandon products because they cannot reach value quickly or understand core concepts. This Skill helps you design onboarding experiences, empty states, and feature discovery patterns that guide users to their first success without overwhelming them. ## Core Features & Use Cases - Onboarding Flow Design: Create welcome screens, account setup flows, and guided first-success experiences with progressive disclosure. - Empty State Design: Turn blank screens into actionable starting points with clear value propositions, CTAs, and templates. - Feature Discovery Patterns: Implement contextual tooltips, guided tours, and feature announcements using libraries like Intro.js, Shepherd.js, or React Joyride. - Use Case: Your analytics show users sign up but never create their first project. Use this Skill to design an empty state with a template option and a 3-step interactive walkthrough that gets users to their first completed project. ## Quick Start Design an onboarding flow for my project management app that gets new users to create their first project within five minutes.

Frequently Asked Questions about onboard

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

FAQPage Schema
How do I design an onboarding flow for a new product?▼

Start by identifying the user's aha moment and the minimum they need to learn to reach it. Build a welcome screen with a clear value proposition, minimal account setup, and a guided first success using pre-populated examples or templates, always with a skip option.

What makes a good empty state design?▼

A good empty state explains what will appear there, why it matters, and how to get started with a clear CTA. Add visual interest with an illustration and offer templates or examples so users can create their first item immediately.

Which JavaScript libraries work for product tours and tooltips?▼

Intro.js, Shepherd.js, and React Joyride handle guided tours with step-by-step spotlights. For standalone tooltips, Tippy.js and Popper.js provide positioning and dismissal controls.

How do I prevent showing the same onboarding twice?▼

Track completion and dismissal states in localStorage, such as setting an onboarding-completed flag after users finish or skip. Check these flags before rendering any tour or tooltip, and respect 'Don't show again' choices.

When should I use a guided tour versus contextual tooltips?▼

Use guided tours for complex interfaces with many features or major product changes, keeping them to 3-7 steps. Use contextual tooltips for individual features, triggered the first time a user encounters them, since teaching at the point of need outperforms upfront instruction.

Related Skills

Explore More Product & Management Skills→
cncorpcncorp

funnel-analysis

Analyze SQL-based funnel data to identify drop-offs in multi-step user journeys.

Official
Advanced
juanelojgajuanelojga

onboard

Design onboarding flows with progressive disclosure and measurable success metrics.

Community
Advanced
nexu-ionexu-io
93.2k

faq-page

Generate a responsive FAQ page with accordion sections, search functionality, and category filtering.

Official
Intermediate
phismith91phismith91

onboard

Design onboarding flows, empty states, and guided tours for web and mobile products.

Community
Advanced