mcpField
E
empty-state-and-loading-review

empty-state-and-loading-review

github.com/sylphxai设计与 UI153 次安装今天更新
代码仓库

关于 empty-state-and-loading-review

empty-state-and-loading-review 是用于审查空状态、加载状态及其他异常路径界面的技能。它帮助团队识别产品状态问题,并产出文案、布局、埋点和验收检查项。

主要功能

  1. 01分类空状态与加载状态
  2. 02检查说明内容和后续操作
  3. 03区分产品修复与视觉润色
  4. 04提供文案和布局建议
  5. 05制定埋点与验收检查项

适用场景

  1. 01审查首次使用或无结果页面
  2. 02改进离线和错误状态
  3. 03检查部分内容加载行为

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/sylphxai/skills --skill empty-state-and-loading-review

安装后在 Claude Code 中输入/empty-state-and-loading-review确认已加载。

附带文件agents/openai.yamlreferences/empty-loading-patterns.md

详细介绍

空状态与加载状态审查

使用此技能,让非理想路径下的 UI 也显得周到、实用且响应迅速。

工作流

  1. 确定状态类型:首次使用时的空状态、无结果、权限受限、加载中、部分加载、离线、错误或已完成。
  2. 阅读 references/empty-loading-patterns.md。
  3. 检查该状态是否说明了发生了什么、为何重要,以及用户接下来可以做什么。
  4. 将产品状态修复与视觉润色分开处理。
  5. 输出文案、布局、埋点和验收检查项。

不适用场景

  • 如果基础模型无需此技能特有的产出规范,就能处理一般性建议,请勿使用此技能。

注意事项

  • 用户丢失了工作内容、金钱或访问权限时,不要使用俏皮的空状态文案。
  • 不要用虚假的精确度掩盖加载状态的不确定性。
  • 保持无障碍支持、减少动态效果选项和布局稳定性。

输出格式

Surface:
State type:

Findings/spec:
- <rule id> <issue or decision> -> <fix>

Copy and action:
- Message:
- Primary action:
- Secondary action:

Acceptance checks:
- <check>

评论

支持 Markdown