react-ui-patterns

用途：为 React 组件提供加载、错误、空数据与提交等 UI 状态的处理范式，适用于构建 UI 组件、处理异步数据或管理 UI 状态。核心原则：不展示过时 UI；仅在真正加载且无数据时显示加载指示；错误必须暴露给用户；支持乐观更新、渐进式展示与降级。加载状态：通过判断树决定——有错误则显示错误与重试；加载中且无数据才显示加载指示；有数据则展示数据或空状态。已知内容结构、列表卡片布局、初始加载用骨架屏；未知结构、弹窗操作、按钮提交、行内操作用加载指示。错误处理按层级：字段级内联错误、可重试的 Toast、页面级错误横幅、不可恢复的整屏错误。错误绝不静默吞掉，mutation 需配 onError 并给出用户反馈。按钮在异步操作期间必须禁用并显示加载状态，避免重复提交。每个列表/集合必须有空状态，并可按场景区分搜索无结果与尚未创建两种文案。表单提交需先校验，配合 loading 与 disabled。反模式包括：有数据时仍显示 spinner 导致闪烁、catch 后仅打印日志、提交时不禁用按钮。完成组件前的检查清单：错误已处理并展示、加载仅在无数据时显示、集合有空状态、异步期间按钮禁用、mutation 有 onError、用户操作有反馈。可与其他技能配合，如结合 graphql-schema 的 mutation 错误处理、testing-patterns 测试各 UI 状态、formik-patterns 的表单提交模式。限制：仅适用于上述范围明确匹配的任务；输出不能替代针对具体环境的验证、测试或专家评审；若缺少必要输入、权限、安全边界或成功标准，应停止并请求澄清。该技能未提供安装命令、收费或平台等其他信息。