本文へ移動
cccskills
無料GitHub で公開

xstate

XState Store adapter for json-render's StateStore interface. Use when integrating json-render with @xstate/store for state management via @json-render/xstate.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md1.3 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

@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.

OptionTypeRequiredDescription
atomAtom<StateModel>YesAn @xstate/store atom (from createAtom) holding the json-render state model

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

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.

日本語の概要は準備中です。原文の説明を表示しています。

vercel-labs/json-render1.9万2026年10月8日 更新

core

無料

Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core, defining schemas, creating catalogs, or building JSON specs for UI/video generation.

日本語の概要は準備中です。原文の説明を表示しています。

vercel-labs/json-render1.9万2026年10月8日 更新

devtools

無料

Drop-in inspector panel for any json-render app. Use when the user wants to debug a generative UI, inspect the spec tree, edit state at runtime, see dispatched actions, follow stream patches live, browse a catalog, or pick DOM elements to find their spec keys. Triggers include "add devtools", "debug json-render", "inspect the spec", "why is this element not rendering", "see the state at runtime", or requests to tap streams / capture action logs for `@json-render/devtools`.

日本語の概要は準備中です。原文の説明を表示しています。

vercel-labs/json-render1.9万2026年10月8日 更新

React adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot @json-render/devtools-react in a React json-render app, including spec inspection, state editing, action and stream timelines, catalog browsing, or DOM picking.

日本語の概要は準備中です。原文の説明を表示しています。

vercel-labs/json-render1.9万2026年10月8日 更新

SolidJS adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot @json-render/devtools-solid in a SolidJS json-render app, including spec inspection, state editing, action and stream timelines, catalog browsing, or DOM picking.

日本語の概要は準備中です。原文の説明を表示しています。

vercel-labs/json-render1.9万2026年10月8日 更新

Svelte 5 adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot @json-render/devtools-svelte in a Svelte json-render app, including spec inspection, state editing, action and stream timelines, catalog browsing, or DOM picking.

日本語の概要は準備中です。原文の説明を表示しています。

vercel-labs/json-render1.9万2026年10月8日 更新

vercel-labs のスキルをすべて見る

このスキルの問題を報告する