state-ux-flow-builder
Builds consistent UX flows for data-heavy applications using state management best practices.
Install
mkdir -p .claude/skills/state-ux-flow-builder && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/9748" && unzip -o skill.zip -d .claude/skills/state-ux-flow-builder && rm skill.zipInstalls to .claude/skills/state-ux-flow-builder
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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".Key capabilities
- →Standardize loading states
- →Implement error boundaries
- →Create empty state components
- →Manage complex UI flows
How it works
It provides standardized patterns and components for handling loading, error, empty, and success states.
Inputs & outputs
When to use state-ux-flow-builder
- →Implementing data loading states
- →Creating error boundaries
- →Building empty state components
- →Designing complex UI flows
About this skill
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.
When not to use it
- →When state machines are overkill
Prerequisites
Limitations
- →Requires consistent error/empty UI
- →Must implement error boundaries
How it compares
It enforces a consistent state-machine approach rather than ad-hoc state handling.
Compared to similar skills
state-ux-flow-builder side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| state-ux-flow-builder (this skill) | 0 | 6mo | No flags | Intermediate |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| design-context | 1 | 7mo | No flags | Intermediate |
| userinterface-wiki | 0 | 4mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by lichunboa
View all by lichunboa →You might also like
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
design-context
WellApp-ai
Refresh UI/UX context from design system, Storybook, and codebase
userinterface-wiki
raphaelsalaja
UI/UX best practices for web interfaces. Use when reviewing animations, CSS, audio, typography, UX patterns, prefetching, or icon implementations. Covers 11 categories from animation principles to typography. Outputs file:line findings.
frontend-design
darthlinuxer
Design thinking and decision-making for web UI. Use when designing components,
front-design
WBInCode
**DESIGN SKILL** — Tworzenie ultrazawansowanych, autorskich interfejsów UI/UX o jakości Awwwards SOTD/Site of the Year, łączących produkcyjną solidność (business CRM, dashboardy, panele) z efektem "wow" (showcase, landing, prezentacje dla klienta). USE FOR: projektowanie i implementacja stron, dashb
Onboarding Flow Optimizer
jamiojala
Reshape onboarding sequences around progressive disclosure and measurable activation rather than generic first-run screens.