Zustand
Wire Zustand v5 vanilla stores into json-render’s StateProvider so AI-generated UI specs read and write through your existing client state.
Overview
Zustand is an agent skill for the Build phase that integrates Zustand v5 vanilla stores with json-render’s StateStore via @json-render/zustand.
Install
npx skills add https://github.com/vercel-labs/json-render --skill zustandWhat is this skill?
- Installs @json-render/zustand with @json-render/core, @json-render/react, and zustand (Zustand v5+ required; v4 unsuppor
- zustandStateStore() implements json-render’s StateStore over createStore() from zustand/vanilla.
- Supports nested slices via selector and updater for partial state (e.g. ui vs auth).
- Documents required options table for store binding and slice mapping.
- Enables json-render reads/writes through Zustand instead of an in-memory default store.
Adoption & trust: 1k installs on skills.sh; 15k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want json-render’s StateProvider to drive UI from Zustand, but json-render expects its own StateStore contract instead of a raw Zustand API.
Who is it for?
Solo builders pairing json-render with Zustand v5 on React apps that need a single state backend for AI-rendered components.
Skip if: Projects on Zustand v4, apps not using json-render, or teams that only need generic Zustand tutorials without the json-render adapter.
When should I use this skill?
Integrating json-render with Zustand for state management via @json-render/zustand.
What do I get? / Deliverables
After following the skill, you have a zustandStateStore adapter (optionally scoped to a slice) wrapped in StateProvider so json-render updates flow through Zustand.
- Configured zustandStateStore adapter
- StateProvider wiring in React
Recommended Skills
Journey fit
Canonical shelf is Build because the skill is an integration adapter used while implementing json-render UIs, not during ideation or launch. Frontend subphase fits state management and React StateProvider wiring for rendered JSON UI trees.
How it compares
Integration adapter for json-render state—not a standalone state-management course or an MCP server.
Common Questions / FAQ
Who is zustand for?
Frontend-focused solo builders and indie devs using json-render on React who already use or want Zustand v5 as their client state store.
When should I use zustand?
During Build (frontend) when wiring @json-render/react StateProvider to a Zustand vanilla store, including nested slices with selector/updater.
Is zustand safe to install?
Review the Security Audits panel on this Prism page for ingested audit results; the skill itself documents npm packages and TypeScript usage only—verify versions and supply-chain before install.
SKILL.md
READMESKILL.md - Zustand
# @json-render/zustand Zustand adapter for json-render's `StateStore` interface. Wire a Zustand vanilla store as the state backend for json-render. ## Installation ```bash npm install @json-render/zustand @json-render/core @json-render/react zustand ``` Requires Zustand v5+. Zustand v4 is not supported due to breaking API changes in the vanilla store interface. ## Usage ```tsx import { createStore } from "zustand/vanilla"; import { zustandStateStore } from "@json-render/zustand"; import { StateProvider } from "@json-render/react"; // 1. Create a Zustand vanilla store const bearStore = createStore(() => ({ count: 0, name: "Bear", })); // 2. Create the json-render StateStore adapter const store = zustandStateStore({ store: bearStore }); // 3. Use it <StateProvider store={store}> {/* json-render reads/writes go through Zustand */} </StateProvider> ``` ### With a Nested Slice ```tsx const appStore = createStore(() => ({ ui: { count: 0 }, auth: { token: null }, })); const store = zustandStateStore({ store: appStore, selector: (s) => s.ui, updater: (next, s) => s.setState({ ui: next }), }); ``` ## API ### `zustandStateStore(options)` Creates a `StateStore` backed by a Zustand store. | Option | Type | Required | Description | |--------|------|----------|-------------| | `store` | `StoreApi<S>` | Yes | Zustand vanilla store (from `createStore` in `zustand/vanilla`) | | `selector` | `(state) => StateModel` | No | Select the json-render slice. Defaults to entire state. | | `updater` | `(nextState, store) => void` | No | Apply next state to the store. Defaults to shallow merge. Override for nested slices, or use `(next, s) => s.setState(next, true)` for full replacement. |