state-machine
状態・イベント・遷移を定義した有限ステートマシンとして、複雑なUIの振る舞いをモデル化します。状態管理のロジックを明示的に整理したい場面や、予測可能なUI制御が求められる場合に活用してください。
description の原文を見る
Model complex UI behavior as finite state machines with states, events, and transitions.
SKILL.md 本文
State Machine
あなたは複雑なUI動作を有限状態機械としてモデリングする専門家です。
あなたができること
UI コンポーネントとフローを状態機械としてモデリングし、不可能な状態を排除し、動作を予測可能にします。
状態機械のコンポーネント
- States（状態）: UI が存在できる異なるモード (idle、loading、success、error)
- Events（イベント）: 遷移を引き起こすもの (click、submit、timeout、response)
- Transitions（遷移）: 状態間を移動するルール (イベント X が状態 A で起こった場合、状態 B に移動)
- Actions（アクション）: 遷移中の副作用 (データ取得、トースト表示、イベントログ)
- Guards（ガード）: 遷移が成立するための条件 (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
モデリングのアプローチ
- 可能なすべての状態をリストアップ
- すべてのイベント/トリガーをリストアップ
- 有効な遷移を定義
- 防ぐべき不可能な状態を特定
- 条件付き遷移にガードを追加
- 状態ごとの entry/exit アクションを定義
メリット
- 不可能な状態を排除 (loading と error が同時に発生しない)
- エッジケースを可視化
- デザインとエンジニアリング間の共通言語
- テスト可能な動作仕様
ベストプラクティス
- ハッピーパスから始めて、エラー状態を追加
- すべての状態に抜け出す方法があるべき (デッドエンドなし)
- 状態機械の焦点を絞る (1 つの関心事につき 1 つ)
- ビジュアルダイアグラムで文書化
- 各状態を UI 表現にマッピング
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- owl-listener
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/owl-listener/designer-skills / ライセンス: MIT
関連スキル
agent-browser
AI エージェント向けのブラウザ自動化 CLI です。ウェブサイトとの対話が必要な場合に使用します。ページ遷移、フォーム入力、ボタンクリック、スクリーンショット取得、データ抽出、ウェブアプリのテスト、ブラウザ操作の自動化など、あらゆるブラウザタスクに対応できます。「ウェブサイトを開く」「フォームに記入する」「ボタンをクリックする」「スクリーンショットを取得する」「ページからデータを抽出する」「このウェブアプリをテストする」「サイトにログインする」「ブラウザ操作を自動化する」といった要求や、プログラマティックなウェブ操作が必要なタスクで起動します。
anyskill
AnySkill — あなたのプライベート・スキルクラウド。GitHubを基盤としたリポジトリからエージェントスキルを管理、同期、動的にロードできます。自然言語でクラウドスキルを検索し、オンデマンドでプロンプトを自動ロード、カスタムスキルのアップロードと共有、スキルバンドルの一括インストールが可能です。OpenClaw、Antigravity、Claude Code、Cursorに対応しています。
engram
AIエージェント向けの永続的なメモリシステムです。バグ修正、意思決定、発見、設定変更の後はmem_saveを使用してください。ユーザーが「覚えている」「記憶している」と言及した場合、または以前のセッションと重複する作業を開始する際はmem_searchを使用します。セッション終了前にmem_session_summaryを使用して、コンテキストを保持してください。
skyvern
AI駆動のブラウザ自動化により、任意のウェブサイトを自動化できます。フォーム入力、データ抽出、ファイルダウンロード、ログイン、複数ステップのワークフロー実行など、ユーザーがウェブサイトと連携する必要があるときに使用します。Skyvernは、LLMとコンピュータビジョンを活用して、未知のサイトも自動操作可能です。Python SDK、TypeScript SDK、REST API、MCPサーバー、またはCLIを通じて統合できます。
pinchbench
PinchBenchベンチマークを実行して、OpenClawエージェントの実世界タスクにおけるパフォーマンスを評価できます。モデルの機能テスト、モデル間の比較、ベンチマーク結果のリーダーボード提出、またはOpenClawのセットアップがカレンダー、メール、リサーチ、コーディング、複数ステップのワークフローにどの程度対応しているかを確認する際に使用します。
openui
OpenUIとOpenUI Langを使用してジェネレーティブUIアプリを構築できます。これらはLLM生成インターフェースのためのトークン効率的なオープン標準です。OpenUI、@openuidev、ジェネレーティブUI、LLMからのストリーミングUI、AI向けコンポーネントライブラリ、またはjson-render/A2UIの置き換えについて述べる際に使用します。スキャフォルディング、defineComponent、システムプロンプト、Renderer、およびOpenUI Lang出力のデバッグに対応しています。