state-machine について
UI コンポーネントやフローを有限状態機械としてモデル化するスキルです。設計・開発チームが有効な遷移を定義し、エッジケースを明らかにして、テスト可能な振る舞いを記述できます。
主な機能
- 01状態とイベントの定義
- 02遷移とガード条件の指定
- 03不可能な状態の特定
- 04一般的な UI フローのモデル化
- 05状態と UI 表現の対応付け
活用シーン
- 01フォームの動作設計
- 02データ取得状態の仕様化
- 03認証フローのモデル化
- 04複数ステップのウィザード設計
インストール
コマンドをコピーしてターミナルで実行します。
$
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 対応