ux-feedback

UX フィードバック状態ジェネレーター

使用するタイミング

コンポーネントやページに適切なユーザーフィードバック状態（読み込み中、成功、エラー、空）を追加する必要がある場合に、このスキルを使用します。

使用しないタイミング

• 状態内の文言だけを対象にする場合 → /ss-copy を使用します
• 既存の状態に関するアクセシビリティの問題の場合 → /ss-a11y を使用します
• 新しいコンポーネントを作成する場合 → /ss-component を使用します
• 分析やエラーログの仕組みを対象にする場合 — UI の表示のみが対象です

対象：$ARGUMENTS

手順

1. 対象ファイルを読み、データに依存する領域をすべて特定します。

2. デザイン言語のリファレンスを読みます：

   • 対象プロジェクトに DESIGN-LANGUAGE.md がある場合は、「Loading States (Skeleton)」「Empty States」「Error States」の各セクションを読みます。このリファレンスは同梱されていません。ない場合は、プロジェクトの既存コンポーネントとトークンを使用します。

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
// Only offer Undo when handleUndo genuinely restores the deleted item.
toast("Item deleted", { action: { label: "Undo", onClick: handleUndo } })

ルール：

• 情報トースト：3s 表示します
• アクショントースト（元に戻す機能付き）：短時間で消えるトーストだけを復旧手段にしないでください。永続的な復旧手段を用意するか、表示時間を調整可能にします。
• トーストの位置：BottomNav の上
• トーストは一度に 1 つだけ表示します（新しいものが古いものに置き換わります）

4. 実装パターン：

function DataCard({ data, isLoading, error, refetch }) {
  if (isLoading) return <DataCardSkeleton />
  if (error) return <DataCardError onRetry={refetch} />
  if (!data || data.length === 0) return <DataCardEmpty />
  return <DataCardContent data={data} />
}

5. prefers-reduced-motion を確認します — 動きを抑える設定が優先されている場合は、animate-pulse を無効にします。

制限事項

• 上流のソースとローカルプロジェクトの状況にタスクが明確に合致する場合にのみ、このスキルを使用してください。
• 変更を適用する前に、コマンド、生成コード、依存関係、認証情報、外部サービスの動作を検証してください。
• 例を、環境固有のテスト、セキュリティレビュー、または破壊的もしくは高コストな操作に対するユーザーの承認の代わりとして扱わないでください。