Xstate
- 708 installs
- 15.8k repo stars
- Updated July 8, 2026
- vercel-labs/json-render
The xstate skill documents @json-render/xstate, connecting XState Store atoms to json-render StateStore through xstateStoreStateStore.
About
The xstate skill documents @json-render/xstate, connecting XState Store atoms to json-render StateStore through xstateStoreStateStore. Requires @xstate/store v3 plus json-render core and react packages. Usage creates an atom with createAtom, wraps it with xstateStoreStateStore, and supplies StateProvider to the React tree. The adapter exposes json-render reads and writes through the XState Store atom model for spec-driven UIs that share state with Stately patterns. Use when teams already model UI state with @xstate/store and want JSON-rendered components on the same atom.
- xstateStoreStateStore adapts @xstate/store atoms.
- Requires @xstate/store v3 or newer.
- createAtom holds the json-render state model.
- StateProvider connects spec rendering to the atom.
- Pairs json-render with Stately state patterns.
Xstate by the numbers
- 708 all-time installs (skills.sh)
- +16 installs in the week ending Jul 27, 2026 (Skillselion tracking)
- Ranked #479 of 2,277 Frontend Development skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
xstate capabilities & compatibility
- Capabilities
- xstatestorestatestore adapts @xstate/store atoms · requires @xstate/store v3 or newer. · createatom holds the json render state model. · stateprovider connects spec rendering to the ato
- Use cases
- documentation
npx skills add https://github.com/vercel-labs/json-render --skill xstateAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 708 |
|---|---|
| repo stars | ★ 15.8k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 8, 2026 |
| Repository | vercel-labs/json-render ↗ |
How do I apply xstate using the workflow in its SKILL.md?
Integrate @xstate/store atoms as json-render StateStore via @json-render/xstate.
Who is it for?
Developers following the xstate skill for the tasks it documents.
Skip if: Tasks outside the xstate scope described in SKILL.md.
When should I use this skill?
User mentions xstate or related triggers from the skill description.
What you get
Working xstate setup aligned with the documented patterns and constraints.
- XState-backed StateProvider configuration
By the numbers
- Requires @xstate/store v3+
Files
@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/storeRequires @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
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.576k29.4kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.261k29.4k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.249k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita201k66.9kVercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.173k29.4kFAQ
What does xstate do?
Integrate @xstate/store atoms as json-render StateStore via @json-render/xstate.
When should I use xstate?
Invoke when Integrate @xstate/store atoms as json-render StateStore via @json-render/xstate.
Is xstate safe to install?
Review the Security Audits panel on this page before installing in production.