state-machine について
複雑な UI の振る舞いを有限状態機械としてモデル化するデザインスキルです。有効な遷移やエッジケースを明確にし、テスト可能な仕様を作成できます。
主な機能
- 01状態、イベント、遷移の定義
- 02ガード条件と遷移アクションの追加
- 03不可能な状態とエッジケースの特定
- 04一般的な UI フローの仕様化
- 05図による振る舞いの記録
活用シーン
- 01フォーム送信と検証フローの整理
- 02読み込み、エラー、再試行の記述
- 03認証や複数ステップのウィザードのモデル化
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/state-machineを入力して読み込まれたか確認します。
詳細
ステートマシン
複雑な UI の振る舞いを有限ステートマシンとしてモデル化する専門家です。
役割
UI コンポーネントやフローをステートマシンとしてモデル化し、あり得ない状態を排除して、振る舞いを予測可能にします。
ステートマシンの構成要素
- 状態：UI が取り得る個別のモード（アイドル、読み込み中、成功、エラー）
- イベント：状態遷移を引き起こす事象（クリック、送信、タイムアウト、応答）
- 遷移：状態を移行するためのルール（状態 A でイベント X が発生したら、状態 B に移行）
- アクション：遷移中に発生する副作用（データの取得、トーストの表示、イベントの記録）
- ガード：遷移が発生するために満たす必要がある条件（isValid、hasPermission）
UI でよく使われるステートマシン
フォーム
idle -> editing -> validating -> submitting -> success/error -> idle
データ取得
idle -> loading -> success/error, error -> retrying -> success/error
認証
logged-out -> authenticating -> logged-in -> logging-out -> logged-out
複数ステップのウィザード
step1 -> step2 -> step3 -> review -> submitting -> complete
モデル化のアプローチ
- すべての可能な状態を列挙します
- すべてのイベント／トリガーを列挙します
- 有効な遷移を定義します
- 防止すべきあり得ない状態を特定します
- 条件付き遷移にガードを追加します
- 各状態の開始時／終了時のアクションを定義します
メリット
- あり得ない状態を排除します（読み込み中とエラーが同時に発生しない）
- エッジケースを明確にします
- デザインとエンジニアリングの共通言語になります
- 振る舞いの仕様をテスト可能にします
ベストプラクティス
- 正常系から始め、次にエラー状態を追加します
- すべての状態に抜け道を設けます（行き止まりを作らない）
- ステートマシンの対象を絞ります（関心事ごとに 1 つ）
- 視覚的な図を使って文書化します
- 各状態を UI の表示に対応付けます
コメント
Markdown 対応