How to install xstate
npx skills add https://github.com/vercel-labs/json-render --skill xstateFull instructions (SKILL.md)
Source of truth, from vercel-labs/json-render.
name: xstate description: XState Store adapter for json-render's StateStore interface. Use when integrating json-render with @xstate/store for state management via @json-render/xstate.
@json-render/xstate
XState Store adapter for json-render's StateStore interface. Wire an @xstate/store atom as the state backend for json-render.
Installation
npm install @json-render/xstate @json-render/core @json-render/react @xstate/store
Requires @xstate/store v3+.
Usage
import { createAtom } from "@xstate/store";
import { xstateStoreStateStore } from "@json-render/xstate";
import { StateProvider } from "@json-render/react";
// 1. Create an atom
const uiAtom = createAtom({ count: 0 });
// 2. Create the json-render StateStore adapter
const store = xstateStoreStateStore({ atom: uiAtom });
// 3. Use it
<StateProvider store={store}>
{/* json-render reads/writes go through @xstate/store */}
</StateProvider>
API
xstateStoreStateStore(options)
Creates a StateStore backed by an @xstate/store atom.
| Option | Type | Required | Description |
|---|---|---|---|
atom | Atom<StateModel> | Yes | An @xstate/store atom (from createAtom) holding the json-render state model |
Related skills
More from vercel-labs/json-render and the wider catalog.
yaml
YAML wire format for json-render with streaming parser, prompt generation, and AI SDK transform. Use when working with @json-render/yaml, YAML-based spec streaming, yaml-spec/yaml-edit fences, or YAML prompt generation.
zustand
Zustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand.
codegen
Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for @json-render/codegen.
core
Core schema, catalog, and AI prompt generation for json-render specs.
next-browser
CLI that exposes Next.js component trees, props, hooks, PPR shells, and network data as shell commands for agents.
opensrc
Fetch dependency source code to give AI agents deeper implementation context. Use when the agent needs to understand how a library works internally, read source code for a package, fetch implementation details for a dependency, or explore how an npm/PyPI/crates.io package is built. Triggers include "fetch source for", "read the source of", "how does X work internally", "get the implementation of", "opensrc path", or any task requiring access to dependency source code beyond types and docs.