onboarding-ux

1# Onboarding UX
2 
3Audit 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.
4 
5## The Problem This Solves
6 
7You've built the features. They work. But when a new user logs in for the first time, they see:
8- Empty tables with column headers and nothing else
9- Sidebars full of labels that mean nothing to them yet
10- No indication of where to start or what the app is for
11- Features they don't know exist because nothing points to them
12 
13This skill finds those gaps and produces the content and code to fill them.
14 
15## Browser Tool Detection
16 
17Same as ux-audit — detect Chrome MCP, Playwright MCP, or playwright-cli. See ux-audit's browser-tools.md reference if needed.
18 
19## URL Resolution
20 
21Same as ux-audit — prefer deployed/live URL over localhost. Check wrangler.jsonc, CLAUDE.md, or running dev server.
22 
23## Workflow
24 
25### Phase 1: Audit — Find the Gaps
26 
27Browse the app as a brand new user. On every page, evaluate:
28 
29#### Empty States
30Navigate to every list/table/collection page. For each:
31 
32| Check | Good | Bad |
33|-------|------|-----|
34| 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 |
35| Is there a clear action? | Button: "Add your first [thing]" | Nothing — user has to find the action in the nav or a menu |
36…