SuperAPI AI 工具集

ux-feedback

设计与创作

查看项目

更新于 10-16 09:35

技能介绍

用途:当需要为组件或页面添加加载、成功、错误、空状态四类用户反馈时使用。仅调整状态内文案应改用 /ss-copy;已有状态的无障碍问题用 /ss-a11y;全新组件创建用 /ss-component;仅做 UI 呈现,不涉及分析或错误日志上报。

主要能力与用法:先读取目标文件,识别所有依赖数据的区域,并读取 DESIGN-LANGUAGE.md 中关于加载状态(骨架)、空状态、错误状态的部分;然后为每个区域实现全部四种状态。

加载状态:骨架屏需匹配最终布局形状,最小显示 300ms 防止闪烁,延迟 300ms 显示以让快速加载跳过骨架,使用 animate-pulse(1.5s 周期),卡片内不得使用 spinner。

空状态:卡片内居中对齐,图标 32px、text-text-tertiary,标题 14px、text-text-secondary,始终建议下一步操作,零值显示为“0”。

错误状态:部分失败仅受影响卡片报错,整页失败显示全屏空状态并重试;文案用平实语言且归责于系统;始终提供重试按钮。

成功状态:信息 Toast 显示 3s,带撤销的操作 Toast 显示 5s,位置在 BottomNav 之上,一次仅显示一条。实现模式为先判 isLoading、error、空数据、最后渲染内容;并检查 prefers-reduced-motion,当用户偏好减少动效时禁用 animate-pulse。

限制:仅在任务明确匹配该技能来源与本地项目上下文时使用;应用前需自行验证命令、生成代码、依赖、凭据及外部服务行为;示例不能替代环境相关测试、安全审查,以及破坏性或高成本操作的用户批准。