skills.rest
Ssrrb
SsrrbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

onboard

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

Updated Mar 24, 2026
Search Tags:#onboarding#user experience#ux design#empty states#tooltips#product tour#first-time experience
One-click install
npx skills add https://github.com/Ssrrb/cerramos-codebase --skill onboard-ssrrb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: onboard
Source: https://github.com/Ssrrb/cerramos-codebase/tree/main/.codex/skills/onboard
Command: npx skills add https://github.com/Ssrrb/cerramos-codebase --skill onboard-ssrrb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? New users often abandon products before reaching their first moment of value because onboarding is confusing, too long, or teaches everything upfront. This Skill helps you design onboarding experiences that get users to their "aha moment" quickly. ## 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 redesign the empty state and first-run flow so users reach a real accomplishment within minutes. ## Quick Start Use the onboard skill to design an onboarding flow for our 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 you want users to reach, then design a welcome screen, minimal account setup, and a guided first success. Teach only the 20% of concepts that deliver 80% of value, and always provide 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 an illustration for visual interest and offer a template or example so users can act immediately instead of facing a blank page.

Which JavaScript libraries work for product tours and tooltips?▼

Tippy.js and Popper.js handle tooltips, while Intro.js, Shepherd.js, and React Joyride build guided tours. Keep tours to 3-7 steps, spotlight specific UI elements, and always include a skip option.

How do I prevent showing the same onboarding twice?▼

Track completion and dismissal states in localStorage, such as an onboarding-completed flag or per-feature tooltip-seen keys. Check these flags before rendering any tour or tooltip so returning users never see repeated prompts.

When should I not use a guided product tour?▼

Avoid tours for simple interfaces where contextual tooltips or empty states suffice, and never block the entire UI or force users through long walkthroughs before they can use the product. Tours fit complex interfaces or major redesigns only.

Related Skills

Explore More Design & Creative Skills→
billh93billh93

onboard

Designs onboarding strategies for SaaS products and mobile apps with measurable activation goals and user-flow mapping.

Community
Advanced
microlinkhqmicrolinkhq
142

onboard

Design onboarding flows with progressive disclosure and measurable success criteria.

Official
Intermediate
abhishekchoudhariabhishekchoudhari
1

funnel-analysis

Analyze conversion funnels to identify drop-off points and prioritize fixes.

Community
Advanced
Tea-4-LifeTea-4-Life

onboard

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

Official
Advanced