关于 state-ux-flow-builder
用于设计应用在加载、错误、空内容和成功状态下保持一致体验的 Skill，提供数据获取、复杂状态流程和即时更新的实现模式。
主要功能
- 01加载骨架屏
- 02可重试的错误状态
- 03带操作的空状态
- 04错误边界
- 05状态管理模式
- 06乐观更新与渐进加载
适用场景
- 01设计完整的数据获取界面
- 02用 XState 处理多步骤流程
- 03为更新操作提供即时反馈
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/state-ux-flow-builder确认已加载。
详细介绍
状态与 UX 流程构建器
为应用的所有状态创建一致的 UX 流程：加载、错误、空内容和成功。
输出组件
每项实现都包含：(1) 加载骨架屏、(2) 带重试功能的错误状态、(3) 带操作项的空状态、(4) 成功视图、(5) 错误边界、(6) 状态管理模式（useState/XState/server）。
关键模式
数据获取流程：检查加载状态 → 处理错误 → 显示空内容 → 展示数据 状态机：对于包含多个状态和转换的复杂流程，使用 XState 乐观更新：即时提供 UI 反馈，出错时回滚 渐进式加载：随着内容加载逐步显示
最佳实践
始终处理所有状态，优先使用骨架屏而非加载旋转图标，提供重试机制，使用一致的错误/空状态 UI，添加 ARIA 实时区域，实施错误边界。
评论
支持 Markdown