用途:当需要为组件或页面添加加载、成功、错误、空状态四类用户反馈时使用。仅调整状态内文案应改用 /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。
限制:仅在任务明确匹配该技能来源与本地项目上下文时使用;应用前需自行验证命令、生成代码、依赖、凭据及外部服务行为;示例不能替代环境相关测试、安全审查,以及破坏性或高成本操作的用户批准。