react-state-driven-ui
✓リデューサー + イベントを使用して、明示的な状態遷移の投影として React UI を作成します。マルチステップのフォーム、非同期操作、コンポーネント間の状態、ナビゲーション統合、リアルタイム更新、または複雑な検証を構築するときに使用します。明示的な状態遷移と分離された副作用を通じて、タイミングに依存するバグを排除します。
SKILL.md
Build predictable, testable React applications by treating UI as a pure projection of explicit state. This architectural pattern eliminates timing-dependent bugs, reduces cognitive overhead, and makes complex workflows manageable through clear state transitions and isolated side effects.
When to apply Use this skill when building features that require:
Technical approach Use this skill to design and implement UI behavior as a pure projection of state. Model behavior with reducer + events. Isolate side effects in React Query mutation callbacks.
リデューサー + イベントを使用して、明示的な状態遷移の投影として React UI を作成します。マルチステップのフォーム、非同期操作、コンポーネント間の状態、ナビゲーション統合、リアルタイム更新、または複雑な検証を構築するときに使用します。明示的な状態遷移と分離された副作用を通じて、タイミングに依存するバグを排除します。 ソース: lucascmelo/agent-skills。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/lucascmelo/agent-skills --skill react-state-driven-ui- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-06
- 更新日
- 2026-02-18
クイックアンサー
react-state-driven-ui とは？
リデューサー + イベントを使用して、明示的な状態遷移の投影として React UI を作成します。マルチステップのフォーム、非同期操作、コンポーネント間の状態、ナビゲーション統合、リアルタイム更新、または複雑な検証を構築するときに使用します。明示的な状態遷移と分離された副作用を通じて、タイミングに依存するバグを排除します。 ソース: lucascmelo/agent-skills。
react-state-driven-ui のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/lucascmelo/agent-skills --skill react-state-driven-ui インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/lucascmelo/agent-skills