state-ux-flow-builder

v2026.09.24

Standardizes UX states for data fetching flows (loading, error, empty, success) and complex multi-view UI patterns. Provides state machine approach recommendations, loading skeletons, error boundaries, and empty state components. Use when implementing "loading states", "error handling", "empty states", or "state machines".

GitHub
Install command
npx skhub add patricio0312rev/state-ux-flow-builder
Markdown
SKILL.md

State & 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.

Discovery
Tags

No tags published for this skill.

Version
Latest version metadata

Version

v2026.09.24

Published

Sep 24, 2026

Category

Uncategorized

License

MIT

Source path

frontend/state-ux-flow-builder

Default branch

main

Latest commit

79ea6af

Tree SHA

d2efd68