skills.rest
LinCie
LinCieCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

onboard

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

Updated Mar 20, 2026
Search Tags:#onboarding#user experience#empty states#tooltips#feature discovery#first-run experience#product tour
One-click install
npx skills add https://github.com/LinCie/bearuang --skill onboard-lincie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: onboard
Source: https://github.com/LinCie/bearuang/tree/main/.agents/skills/onboard
Command: npx skills add https://github.com/LinCie/bearuang --skill onboard-lincie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? New users often abandon products because they never reach the "aha moment" — confusing first-run experiences, blank empty states, and feature overload cause drop-off before users see any value. ## Core Features & Use Cases - Onboarding Flow Design: Create welcome screens, account setup flows, and guided first-success experiences that get users to value quickly. - Empty State Design: Turn blank screens into onboarding opportunities with clear value propositions, CTAs, and templates. - Feature Discovery Patterns: Implement contextual tooltips, guided tours, interactive tutorials, and progressive disclosure using libraries like Intro.js, Shepherd.js, and React Joyride. - Use Case: Your analytics show 60% of signups never create their first project. Use this Skill to redesign the empty state and first-run flow so new users complete a real task within minutes. ## Quick Start Use the onboard skill to 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 aha moment users must reach, then build a welcome screen with a clear value proposition, minimal account setup, and a guided first success using pre-populated templates. Keep it to 1-3 core concepts and always offer 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 like "Create your first project". Add an illustration or template option instead of leaving blank space, and include contextual help links.

Which JavaScript libraries work for product tours and tooltips?▼

Intro.js, Shepherd.js, and React Joyride handle guided tours with spotlight effects, while Tippy.js and Popper.js power contextual tooltips. Store dismissal state in localStorage so users never see the same tooltip twice.

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

Use guided tours for complex interfaces with many features or major redesigns, keeping them to 3-7 steps. Use contextual tooltips for individual feature discovery, triggered the first time a user encounters a specific UI element.

Why do users skip or abandon onboarding flows?▼

Users abandon onboarding when it is too long, blocks product access, or teaches everything upfront instead of the 20% that delivers 80% of value. Track completion rate, skip rate, and time to value to find and fix drop-off points.

Related Skills

Explore More Design & Creative Skills→
xbg-solutionsxbg-solutions

onboard

Design onboarding flows, empty states, and first-run experiences.

Official
Advanced
microlinkhqmicrolinkhq
142

onboard

Design onboarding flows with progressive disclosure and measurable success criteria.

Official
Intermediate
TimeKastTimeKast

frontend-design

Guide frontend UI design using UX psychology and structured layout principles.

Official
Intermediate
ricardocidalericardocidale

Help Page

Provide a web-based help page with role-based documentation and guided tours.

Community
Intermediate