About state-ux-flow-builder
A skill for designing consistent application UX across loading, error, empty, and success states. It provides implementation patterns for data fetching, complex state flows, and responsive updates.
Key features
- 01Loading skeletons
- 02Retryable error states
- 03Actionable empty states
- 04Error boundaries
- 05State management patterns
- 06Optimistic and progressive loading
Use cases
- 01Designing complete data-fetching interfaces
- 02Handling multi-step flows with XState
- 03Providing immediate feedback for updates
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/state-ux-flow-builderin Claude Code to confirm it loaded.
Details
From the project READMEState & UX Flow Builder
Create consistent UX flows for all application states: loading, error, empty, and success.
Output Components
Every implementation includes: (1) Loading skeletons, (2) Error state with retry, (3) Empty state with action, (4) Success view, (5) Error boundary, (6) State management pattern (useState/XState/server).
Key Patterns
Data Fetching Flow: Check loading → Handle error → Show empty → Display data State Machine: XState for complex flows with multiple states and transitions Optimistic Updates: Instant UI feedback with rollback on error Progressive Loading: Show content incrementally as it loads
Best Practices
Always handle all states, prefer skeletons over spinners, provide retry mechanisms, use consistent error/empty UI, add ARIA live regions, implement error boundaries.