Onboarding Ux
Browse a live web app, find where first-time users stall, and generate onboarding flows, empty states, tours, and inline help code.
Overview
Onboarding UX is an agent skill most often used in Build (also Ship launch and Grow lifecycle) that audits first-run friction in a web app and generates onboarding flows, empty states, and in-app help code.
Install
npx skills add https://github.com/jezweb/claude-skills --skill onboarding-uxWhat is this skill?
- Audits first-run experience: blank tables, cryptic nav labels, missing start-here cues
- Generates onboarding flows, empty states, tooltips, feature tours, and inline hints—not just a problem list
- Detects Chrome MCP, Playwright MCP, or playwright-cli for real browser passes like ux-audit
- Prefers deployed URLs over localhost via wrangler.jsonc, CLAUDE.md, or dev-server discovery
- Designed to pair with ux-audit: audit finds friction, this skill ships the fixes
Adoption & trust: 629 installs on skills.sh; 841 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
New users log in to a working app but hit empty screens and unlabeled navigation with no clear first action.
Who is it for?
Solo founders with a deployed or staging web SaaS who can run browser MCP tools and want ship-ready onboarding artifacts, not generic UX theory.
Skip if: Backend-only services, mobile-native apps outside the skill’s web browsing workflow, or teams without any runnable URL for agent inspection.
When should I use this skill?
Triggers include onboarding, empty states, user guidance, first run experience, feature tour, new user experience, or when the app feels confusing to newcomers.
What do I get? / Deliverables
You get prioritized onboarding gaps plus generated copy and UI patterns so first-time users know where to start and how to reach key features.
- Onboarding gap report mapped to screens observed in the browser
- Copy and component-level guidance for empty states, tours, tooltips, and defaults
- Implementation notes aligned to the project’s frontend stack
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical Build shelf because deliverables are in-app UI guidance and frontend copy that ship inside the product surface. Frontend subphase covers empty states, tooltips, feature tours, defaults, and contextual hints rendered in the client.
Where it fits
Replace a blank projects table with an empty state CTA and a three-step onboarding checklist tied to real routes.
Add a lightweight feature tour before marketing pushes traffic so launch-week signups complete setup.
Introduce contextual tooltips on advanced sidebar items to improve activation for users who stall after day one.
How it compares
Solution-building companion to ux-audit—generates welcoming first-run UI instead of only scoring usability issues.
Common Questions / FAQ
Who is onboarding-ux for?
Indie web app builders on Claude Code who need browser-backed audits turned into onboarding flows, empty states, tours, and contextual help.
When should I use onboarding-ux?
Use it in Build frontend while implementing UI polish; in Ship launch prep before exposing signup to strangers; and in Grow lifecycle when activation drops because users never complete first value steps.
Is onboarding-ux safe to install?
Browser automation may hit production or staging URLs—scope credentials and data carefully; review the Security Audits panel on this Prism page before granting filesystem or browser permissions.
Workflow Chain
Requires first: ux audit
SKILL.md
READMESKILL.md - Onboarding Ux
# Onboarding UX Audit a web app for onboarding gaps, then generate the in-app guidance to fix them. The goal: a new user should never stare at a blank screen wondering what to do. ## The Problem This Solves You've built the features. They work. But when a new user logs in for the first time, they see: - Empty tables with column headers and nothing else - Sidebars full of labels that mean nothing to them yet - No indication of where to start or what the app is for - Features they don't know exist because nothing points to them This skill finds those gaps and produces the content and code to fill them. ## Browser Tool Detection Same as ux-audit — detect Chrome MCP, Playwright MCP, or playwright-cli. See ux-audit's browser-tools.md reference if needed. ## URL Resolution Same as ux-audit — prefer deployed/live URL over localhost. Check wrangler.jsonc, CLAUDE.md, or running dev server. ## Workflow ### Phase 1: Audit — Find the Gaps Browse the app as a brand new user. On every page, evaluate: #### Empty States Navigate to every list/table/collection page. For each: | Check | Good | Bad | |-------|------|-----| | What does a zero-data page show? | "No clients yet. Add your first client to get started." + CTA button | Empty table with column headers, or blank white space | | Is there a clear action? | Button: "Add your first [thing]" | Nothing — user has to find the action in the nav or a menu | | Does it explain the feature? | "Clients are the people and businesses you work with. Add one to start tracking your relationships." | Just an empty container | | Is the empty state designed? | Illustration or icon, helpful copy, prominent CTA | Identical to the populated state minus the data | #### First Impression Log in as a new user (or clear state to simulate). Evaluate: | Check | What to look for | |-------|-----------------| | **Landing page** | Does the dashboard/home show something useful or is it empty? | | **Orientation** | Within 10 seconds, do I know what this app does and where to start? | | **First action** | Is the #1 thing I should do obvious and prominent? | | **Cognitive load** | How many menu items, buttons, and options compete for attention? | | **Welcome content** | Is there a welcome message, tour, or getting-started guide? Or just the raw app? | #### Feature Discoverability For each feature in the app: | Check | What to look for | |-------|-----------------| | **Can I find it?** | Is it visible in the nav, or buried in a menu/submenu? | | **Do I know what it does?** | Does the label explain it, or do I need to click to find out? | | **Keyboard shortcuts** | Are there shortcuts? Are they discoverable (tooltip, help panel)? | | **Advanced features** | Filters, bulk actions, search — are these visible or hidden? | | **Settings and configuration** | Can I find the settings? Do I know what each setting does? | #### Contextual Help Gaps On each page: | Check | What to look for | |-------|-----------------| | **Form fields** | Do complex fields have help text or tooltips? | | **Jargon** | Any labels that a non-expert wouldn't understand? | | **Consequences** | Do destructive or irreversible actions explain what will happen? | | **Validation** | When I make a mistake, does the error message tell me how to fix it? | #### Produce an Audit Report Write to `.jez/artifacts/onboarding/audit.md`: ```markdown # Onboarding Audit: [App Na