state-ux-flow-builder について
読み込み、エラー、空、成功の各状態で一貫した UX を設計するスキルです。データ取得、複雑な状態遷移、即時更新の実装パターンを扱います。
主な機能
- 01ローディングスケルトン
- 02再試行可能なエラー状態
- 03操作を促す空状態
- 04エラーバウンダリー
- 05状態管理パターン
- 06楽観的更新と段階的読み込み
活用シーン
- 01データ取得画面の状態設計
- 02XState による複数段階のフロー処理
- 03更新時の即時フィードバック提供
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/state-ux-flow-builderを入力して読み込まれたか確認します。
詳細
状態と UX フローの構築
アプリケーションのすべての状態（読み込み中、エラー、空、成功）で、一貫した UX フローを作成します。
出力コンポーネント
すべての実装に含めるもの：（1）読み込み中のスケルトン、（2）再試行機能付きのエラー状態、（3）アクション付きの空状態、（4）成功ビュー、（5）エラーバウンダリ、（6）状態管理パターン（useState/XState/server）。
主なパターン
データ取得フロー：読み込み中か確認 → エラーに対処 → 空の状態を表示 → データを表示
ステートマシン：複数の状態と遷移を伴う複雑なフローには XState を使用
楽観的更新：エラー時にロールバックしつつ、UI から即座にフィードバックを返す
プログレッシブ読み込み：コンテンツを読み込みながら段階的に表示する
ベストプラクティス
すべての状態に必ず対応し、スピナーよりスケルトンを優先し、再試行の仕組みを用意し、一貫性のあるエラー UI と空状態の UI を使用し、ARIA ライブリージョンを追加して、エラーバウンダリを実装します。
コメント
Markdown 対応