ux-flow-skills

Use when designing, building, or reviewing any AI chat, assistant, copilot, or agent interface — composer, streaming responses, tool-use display, citations, regenerate/edit, or AI empty states. Also fires when users report the AI feeling frozen or opaque about what it's doing or can see, or when wiring confirmations before an agent takes consequential actions.

Use when designing, building, or reviewing any authentication surface — signup, login, logout, magic links, passkeys, OAuth/SSO buttons, password reset, 2FA/MFA, email verification, or session-expiry handling. Also use when users report being locked out, duplicate accounts from mixed auth methods, confusing reset emails, or drop-off on the signup/login screen.

Use when designing, building, or reviewing any checkout, cart, payment, or purchase flow — e-commerce carts, one-off purchases, donation forms, in-app buying. Also use when users report cart abandonment, payment errors losing form state, forced account creation complaints, or confusion about order status after paying.

Use when designing or reviewing any screen that can show no data or is waiting on data — first-use empty states, cleared/zero-result states, error states, loading indicators, skeleton screens, spinners, or optimistic updates. Also use when users report the app 'feels slow', a screen appears blank or janky before content arrives, or a list/search/inbox has nothing to show.

Use when designing or reviewing error states, failure recovery, offline behavior, destructive-action protection, or 404/500 pages — or when users report lost work, confusing error messages, accidental deletions, or dead-end failures. Also fires when choosing between toast, banner, inline, or full-page error display, or wiring retry logic the user can see.

Use when designing, building, or reviewing any form, signup, checkout, settings page, or multi-step wizard — or when users abandon forms, report confusing errors, or lose data navigating back. Also fires when deciding field count, label placement, validation timing, required-field marking, or whether to split a form into steps.

Use when designing or reviewing an app's navigation architecture — choosing between tab bar, sidebar, top nav, or command palette; deciding menu depth vs breadth; or when users report getting lost, can't find features, or the back button behaves unexpectedly. Also applies when adding breadcrumbs, deep links, or restructuring an information hierarchy.

Use when designing, building, or reviewing pricing pages, paywalls, free trials, subscription upgrade/downgrade flows, cancellation flows, or win-back campaigns. Also use when users report trial-to-paid conversion problems, surprise-charge complaints, App Store subscription rejections, or when auditing for dark patterns and ROSCA and state click-to-cancel compliance.

Use when designing or reviewing search or filtering — placing a search box, building typeahead/autocomplete, faceted filters with chips, a results page, or scoped/command-palette search. Also applies when users report zero-result dead ends, can't find items they know exist, filters that reset unexpectedly, or a catalog/list too large to browse.

Use when designing, building, or reviewing settings screens, account management, preferences, profile pages, or any destructive account action — delete account, change email/password, data export, session management. Also use when users report being unable to find a setting, accidental destructive actions, or when auditing danger-zone and confirmation patterns.

Use when designing, building, or reviewing sharing, invite, or collaboration features — share dialogs, permission levels, link sharing, team invites, access requests, or presence indicators. Also use when users report confusion about who can see what, invite recipients landing in the wrong place, permission-denied dead ends, or when reviewing growth loops for spam risk.

Use when designing or reviewing any data table, list, or feed — choosing table vs list vs cards, adding sorting/filtering/bulk actions/pagination, or handling empty, loading, and error states. Also applies when users report tables being unusable on mobile, losing their place on refresh, or when a screen must display more than ~10 structured records.

Use when the user invokes /userflow, asks which UX flow or layout patterns apply to what they're building, or describes an app, feature, or screen to build or review and wants the right proven flow guidance pulled in automatically. Also use at the start of any UI build when it's unclear which flow-* skills are relevant.

Use when designing or reviewing an application's overall layout shell — deciding between sidebar+main, top-nav, three-pane, master-detail, dashboard grid, or mobile tab shell; sizing panels and content widths; or choosing what stays fixed vs scrolls. Also applies when a layout breaks on resize, content lines run too long, or the responsive collapse order is unclear.

Use when designing or reviewing onboarding, first-run, welcome, setup-wizard, or activation flows — new-user signup-to-first-value paths, personalization quizzes, product tours, or getting-started checklists. Also use when metrics show drop-off between signup and first key action, users report 'I signed up but didn't know what to do', or an app opens to a blank screen for new users.

Use when designing or reviewing OS permission requests (notifications, location, camera, contacts, photos, tracking) or notification strategy — priming screens, request timing, denial recovery, frequency controls, digests, or re-engagement pushes. Also use when analytics show high permission-denial rates, users report notification spam or are disabling notifications, or an app requests permissions on first launch.