V
valtio
by @hairyfv
4.2(59)
ReactおよびネイティブJavaScript向けにValtioプロキシ状態管理ソリューションを提供し、フロントエンドの状態ロジックを簡素化します。
インストール方法
npx skills add hairyf/skills --skill valtiocompare_arrows
Before / After 効果比較
1 组使用前
ReactまたはネイティブJavaScriptプロジェクトにおいて、複雑な状態管理はコードの冗長性やロジックの混乱を招きがちです。コンポーネント間のデータ同期が困難になり、デバッグが複雑化し、開発効率に影響を与えます。
使用後
このスキルを適用することで、Valtioプロキシ状態管理を活用し、ReactおよびネイティブJSアプリケーションを簡素化できます。これにより、リアクティブなデータフローを実現し、ボイラープレートコードを削減し、開発効率とコードの保守性を大幅に向上させます。
SKILL.md
Valtio makes proxy-state simple for React and vanilla JavaScript. It provides a minimal, flexible, and unopinionated API that turns objects into self-aware proxies, enabling fine-grained subscription and reactivity. Valtio shines at render optimization in React and is compatible with Suspense and React 18+.
The skill is based on Valtio v2.3.0, generated at 2026-01-29.
Core References
| Topic | Description | Reference |
|---|---|---|
| Proxy | Create reactive state objects that track changes | core-proxy |
| useSnapshot | React hook for render-optimized state access | core-use-snapshot |
| Snapshot | Create immutable snapshots for comparison and Suspense | core-snapshot |
| Subscribe | Subscribe to state changes from anywhere | core-subscribe |
Utils
| Topic | Description | Reference |
|---|---|---|
| proxyMap | Observable Map-like proxy for Map data structures | utils-proxy-map |
| proxySet | Observable Set-like proxy for Set data structures | utils-proxy-set |
| subscribeKey | Subscribe to changes of a specific property | utils-subscribe-key |
| DevTools | Redux DevTools Extension integration | utils-devtools |
| Ref | Create unproxied references for special objects | utils-ref |
Guides
| Topic | Description | Reference |
|---|---|---|
| Component State | Isolate component state using useRef | guides-component-state |
| Computed Properties | Create computed properties with getters and setters | guides-computed-properties |
| Async | Work with promises and React Suspense | guides-async |
Best Practices
| Topic | Description | Reference |
|---|---|---|
| Actions | Organize actions for mutating state | best-practices-actions |
| Persistence | Persist state to localStorage or other storage | best-practices-persistence |
| State Composition | Split and compose states for organization | best-practices-state-composition |
ユーザーレビュー (0)
レビューを書く
効果
使いやすさ
ドキュメント
互換性
レビューなし
統計データ
インストール数652
評価4.2 / 5.0
バージョン
更新日2026年5月23日
比較事例1 件
ユーザー評価
4.2(59)
5
36%
4
51%
3
14%
2
0%
1
0%
この Skill を評価
0.0
対応プラットフォーム
🔧Claude Code
🔧OpenClaw
🔧OpenCode
🔧Codex
🔧Gemini CLI
🔧GitHub Copilot
🔧Amp
🔧Kimi CLI
タイムライン
作成2026年3月16日
最終更新2026年5月23日