V

valtio

by @hairyfv
4.2(59)

Offers Valtio proxy state management solutions for React and native JavaScript, simplifying frontend state logic.

valtiostate-managementreact-stateproxy-based-statefrontend-developmentGitHub
Installation
npx skills add hairyf/skills --skill valtio
compare_arrows

Before / After Comparison

1
Before

In React or native JavaScript projects, complex state management often leads to redundant code and convoluted logic. Data synchronization between components becomes difficult, debugging is complex, and development efficiency is affected.

After

Applying this skill, you can leverage Valtio proxy state management to simplify React and native JS applications. This enables reactive data flow, reduces boilerplate code, and significantly enhances development efficiency and code maintainability.

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

TopicDescriptionReference
ProxyCreate reactive state objects that track changescore-proxy
useSnapshotReact hook for render-optimized state accesscore-use-snapshot
SnapshotCreate immutable snapshots for comparison and Suspensecore-snapshot
SubscribeSubscribe to state changes from anywherecore-subscribe

Utils

TopicDescriptionReference
proxyMapObservable Map-like proxy for Map data structuresutils-proxy-map
proxySetObservable Set-like proxy for Set data structuresutils-proxy-set
subscribeKeySubscribe to changes of a specific propertyutils-subscribe-key
DevToolsRedux DevTools Extension integrationutils-devtools
RefCreate unproxied references for special objectsutils-ref

Guides

TopicDescriptionReference
Component StateIsolate component state using useRefguides-component-state
Computed PropertiesCreate computed properties with getters and settersguides-computed-properties
AsyncWork with promises and React Suspenseguides-async

Best Practices

TopicDescriptionReference
ActionsOrganize actions for mutating statebest-practices-actions
PersistencePersist state to localStorage or other storagebest-practices-persistence
State CompositionSplit and compose states for organizationbest-practices-state-composition

User Reviews (0)

Write a Review

Effect
Usability
Docs
Compatibility

No reviews yet

Statistics

Installs652
Rating4.2 / 5.0
Version
Updated2026年5月23日
Comparisons1

User Rating

4.2(59)
5
36%
4
51%
3
14%
2
0%
1
0%

Rate this Skill

0.0

Compatible Platforms

🔧Claude Code
🔧OpenClaw
🔧OpenCode
🔧Codex
🔧Gemini CLI
🔧GitHub Copilot
🔧Amp
🔧Kimi CLI

Timeline

Created2026年3月16日
Last Updated2026年5月23日