ChonSong
ChonSong/skill-retriever
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/ChonSong/skill-retriever --skill ux-feedback命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | ux-feedback |
| description | Add appropriate user feedback states (loading, success, error, empty) to a component or page |
| risk | unknown |
| source | https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-feedback |
| source_repo | bitjaru/styleseed |
| source_type | community |
| date_added | 2026-07-01T00:00:00.000Z |
| license | MIT |
| license_source | https://github.com/bitjaru/styleseed/blob/main/LICENSE |
Use this skill when you need add appropriate user feedback states (loading, success, error, empty) to a component or page.
/ss-copy/ss-a11y/ss-componentTarget: $ARGUMENTS
Read the target file and identify all data-dependent areas.
Read the design language reference:
DESIGN-LANGUAGE.md sections on Loading States (Skeleton), Empty States, Error StatesFor each data-dependent area, implement ALL 4 states:
// 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>
Rules:
animate-pulse (1.5s cycle)<EmptyState
icon={PackageIcon}
title="No activity yet"
description="Create your first project to get started."
action={<Button>Create Project</Button>}
/>
Rules:
text-text-tertiarytext-text-secondary<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>
Rules:
// Toast notification for action confirmations
toast("Changes saved")
// With undo for destructive actions
toast("Item deleted", { action: { label: "Undo", onClick: handleUndo } })
Rules:
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} />
}
prefers-reduced-motion — disable animate-pulse when reduced motion is preferred.