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は、空状態や読み込み中など、通常とは異なるUI状態をレビューするスキルです。プロダクト上の問題を見つけ、文言、レイアウト、計測、受け入れ確認項目をまとめます。

主な機能

  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 対応