mcpField
S
ss-feedback

ss-feedback

github.com/bitjaruデザイン・UI993852 回インストール今日更新
リポジトリ

ss-feedback について

ss-feedback は、データに応じた UI のフィードバック状態を実装する StyleSeed スキルです。UI 開発者向けに、ローディング、空、エラー、成功の表示と、アニメーションや再試行の扱いを示します。

主な機能

  1. 01ローディングスケルトンの指針
  2. 02空状態の内容と次の操作
  3. 03再試行付きエラー表示
  4. 04成功・取り消しトーストのパターン
  5. 05モーション軽減設定への配慮

活用シーン

  1. 01データカードへの状態追加
  2. 02部分失敗やページ全体の失敗への対応
  3. 03トーストによる操作確認

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/ss-feedbackを入力して読み込まれたか確認します。

詳細

このワークフローの前に、セッションごとに1回だけ実行する更新の事前チェックを実施してください。

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 の「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
toast("Item deleted", { action: { label: "Undo", onClick: handleUndo } })

ルール：

  • 情報トースト：3s 表示
  • アクショントースト（元に戻す機能付き）：5s 表示
  • トーストの位置：BottomNav の上
  • トーストは一度に1つだけ表示します（新しいトーストで古いものを置き換えます）
  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 対応