mcpField
S
ss-feedback

ss-feedback

github.com/bitjaru设计与 UI993852 次安装1 天前更新
代码仓库

关于 ss-feedback

ss-feedback 是用于实现数据相关 UI 反馈状态的 StyleSeed 技能。它指导 UI 开发者设计加载、空、错误和成功状态，并涵盖动效与重试行为。

主要功能

  1. 01加载骨架屏规范
  2. 02空状态内容与后续操作
  3. 03带重试的错误呈现
  4. 04成功及撤销 Toast 模式
  5. 05考虑减少动态效果设置

适用场景

  1. 01为数据卡片补充状态
  2. 02处理局部和整页加载失败
  3. 03通过 Toast 确认操作

安装

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

$npx skills add https://github.com/bitjaru/styleseed --skill ss-feedback

安装后在 Claude Code 中输入/ss-feedback确认已加载。

详细介绍

在此工作流开始前，请遵循每个会话仅需执行一次的 更新预检。

UX 反馈状态生成器

以注册表为先的工件边界

当 .styleseed/project.json 和 .styleseed/artifacts/index.json 存在时，请先解析请求的工件 ID，然后只读取 .styleseed/bundles/<artifact-id>.md 和 .styleseed/manifests/<artifact-id>.json。对于注册表项目，绝不要回退到全局旧版工件包。只有在不存在注册表时，旧版项目才可以使用 .styleseed/effective-rules.md。

不适用场景

  • 只需处理状态中的文字 → 使用 /ss-copy
  • 处理现有状态的无障碍问题 → 使用 /ss-a11y
  • 创建全新组件 → 使用 /ss-component
  • 处理分析或错误日志相关机制——仅限 UI 呈现

目标：$ARGUMENTS

说明

  1. 阅读目标文件并找出所有依赖数据的区域。

  2. 阅读设计语言参考：

    • DESIGN-LANGUAGE.md 中关于加载状态（骨架屏）、空状态和错误状态的部分

  3. 为每个依赖数据的区域实现全部 4 种状态：

状态 1：加载中（骨架屏）
// Skeleton must match the final layout shape
<div className="bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]">
  <div className="flex items-center gap-2 mb-3">
    <div className="size-7 bg-surface-muted rounded-lg animate-pulse" />
    <div className="h-3 w-16 bg-surface-muted rounded animate-pulse" />
  </div>
  <div className="h-9 w-24 bg-surface-muted rounded-lg animate-pulse mb-3" />
  <div className="h-3 w-12 bg-surface-muted rounded animate-pulse" />
</div>

规则：

  • 骨架屏至少显示 300ms（避免闪现）
  • 延迟 300ms 后显示骨架屏（快速加载时完全跳过骨架屏）
  • 使用 animate-pulse（1.5s 周期）
  • 骨架屏形状应与实际内容尺寸相符
  • 卡片内绝不使用加载指示器
状态 2：空状态（无数据）
<EmptyState
  icon={PackageIcon}
  title="No activity yet"
  description="Create your first project to get started."
  action={<Button>Create Project</Button>}
/>

规则：

  • 在卡片内居中对齐
  • 图标：32px，text-text-tertiary
  • 标题：14px，text-text-secondary
  • 始终建议下一步操作
  • 零值显示为 "0"（不要隐藏或显示为短横线）
状态 3：错误（加载失败）
<div className="flex flex-col items-center justify-center py-8 text-center">
  <AlertCircle className="size-8 text-destructive mb-3" />
  <p className="text-[14px] text-text-secondary mb-4">Couldn't load the data</p>
  <Button variant="brandGhost" size="sm" onClick={retry}>Try again</Button>
</div>

规则：

  • 部分失败：仅受影响的卡片显示错误，其余部分正常加载
  • 整页失败：显示带重试功能的全屏 EmptyState
  • 错误消息：使用通俗易懂的语言，并将责任归于系统
  • 始终提供重试按钮
状态 4：成功（操作反馈）
// Toast notification for action confirmations
toast("Changes saved")

// With undo for destructive actions
toast("Item deleted", { action: { label: "Undo", onClick: handleUndo } })

规则：

  • 信息提示 Toast：显示 3s
  • 操作提示 Toast（带撤销）：显示 5s
  • Toast 位置：BottomNav 上方
  • 同一时间只显示一个 Toast（新的替换旧的）
  1. 实现模式：
function DataCard({ data, isLoading, error }) {
  if (isLoading) return <DataCardSkeleton />
  if (error) return <DataCardError onRetry={refetch} />
  if (!data || data.length === 0) return <DataCardEmpty />
  return <DataCardContent data={data} />
}
  1. 检查 prefers-reduced-motion——当用户偏好减少动态效果时，禁用 animate-pulse。

评论

支持 Markdown