valtio-define

Valtio-based reactive state management with Pinia-like API for React. Core API includes defineStore for creating stores with state, actions, and getters, plus useStore hook for React component access Advanced features cover subscriptions, patch operations, inline reactive JSX components via Signal, and conversion to useState-like hooks Plugin system enables store extensions, including built-in persistent storage plugin for state hydration Full TypeScript support with comprehensive type definitions

INSTALLATION
npx skills add https://github.com/hairyf/skills --skill valtio-define
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$2a

Topic

Description

Reference

Subscriptions

Subscribe to state changes

advanced-subscribe

Patch

Update state with patch operations

advanced-patch

Signal

JSX component for inline reactive values

advanced-signal

Store to State

Convert store to useState-like hooks

advanced-store-to-state

Features

Topic

Description

Reference

Plugin System

Extend stores with plugins

feature-plugin-system

Persistent Plugin

Persist state to storage

feature-persistent-plugin

Quick Start

import { defineStore, useStore } from 'valtio-define'

const store = defineStore({

  state: () => ({ count: 0 }),

  actions: {

    increment() { this.count++ },

  },

  getters: {

    doubled() { return this.count * 2 },

  },

})

function Counter() {

  const state = useStore(store)

  return (

    <div>

      <div>Count: {state.count}</div>

      <div>Doubled: {state.doubled}</div>

      <button onClick={store.increment}>Increment</button>

    </div>

  )

}
BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card