react

Name: react
Author: vercel-labs

4.7kinstalls849forks

How to install react?

vercel-labs/json-render/react

$npx -y skills add vercel-labs/json-render --skill react

Installs into the current project.

Summary

React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.

Files · 1

View on GitHub

SKILL.md

1	# @json-render/react
2
3	React renderer that converts JSON specs into React component trees.
4
5	## Quick Start
6
7	```typescript
8	import { defineRegistry, Renderer } from "@json-render/react";
9	import { catalog } from "./catalog";
10
11	const { registry } = defineRegistry(catalog, {
12	components: {
13	Card: ({ props, children }) => <div>{props.title}{children}</div>,
14	},
15	});
16
17	function App({ spec }) {
18	return <Renderer spec={spec} registry={registry} />;
19	}
20	```
21
22	## Creating a Catalog
23
24	```typescript
25	import { defineCatalog } from "@json-render/core";
26	import { schema } from "@json-render/react/schema";
27	import { defineRegistry } from "@json-render/react";
28	import { z } from "zod";
29
30	// Create catalog with props schemas
31	export const catalog = defineCatalog(schema, {
32	components: {
33	Button: {
34	props: z.object({
35	label: z.string(),
36	variant: z.enum(["primary", "secondary"]).nullable(),
37	}),
38	description: "Clickable button",
39	},
40	Card: {
41	props: z.object({ title: z.string() }),
42	description: "Card container with title",
43	},
44	},
45	});
46
47	// Define component implementations with type-safe props
48	const { registry } = defineRegistry(catalog, {
49	components: {
50	Button: ({ props }) => (
51	<button className={props.variant}>{props.label}</button>
52	),
53	Card: ({ props, children }) => (
54	<div className="card">
55	<h2>{props.title}</h2>
56	{children}
57	</div>
58	),
59	},
60	});
61	```
62
63	## Spec Structure (Element Tree)
64
65	The React schema uses an element tree format:
66
67	```json
68	{
69	"root": {
70	"type": "Card",
71	"props": { "title": "Hello" },
72	"children": [
73	{ "type": "Button", "props": { "label": "Click me" } }
74	]
75	}
76	}
77	```
78
79	## Visibility Conditions
80
81	Use `visible` on elements to show/hide based on state. New syntax: `{ "$state": "/path" }`, `{ "$state": "/path", "eq": value }`, `{ "$state": "/path", "not": true }`, `{ "$and": [cond1, cond2] }` for AND, `{ "$or": [cond1, cond2] }` for OR. Helpers: `visibility.when("/path")`, `visibility.unless("/path")`, `visibility.eq("/path", val)`, `visibility.and(cond1, cond2)`, `visibility.or(cond1, cond2)`.
82
83	## Providers
84
85	\| Provider \| Purpose \|
86	\|----------\|---------\|
87	\| `StateProvider` \| Share state across components (JSON Pointer paths). Accepts optional `store` prop for controlled mode. \|
88	\| `ActionProvider` \| Handle actions dispatched via the event system \|
89	\| `VisibilityProvider` \| Enable conditional rendering based on state \|
90	\| `ValidationProvider` \| Form field validation \|
91
92	### External Store (Controlled Mode)
93
94	Pass a `StateStore` to `StateProvider` (or `JSONUIProvider` / `createRenderer`) to use external state management (Redux, Zustand, XState, etc.):
95
96	```tsx
97	import { createStateStore, type StateStore } from "@json-render/react";
98
99	const store = createStateStore({ count: 0 });
100
101	<StateProvider store={store}>{children}</StateProvider>
102
103	// Mutate from anywhere — React re-renders automatically:
104	store.set("/count", 1);
105	```
106
107	When `store` is provided, `initialState` and `onStateChange` are ignored.
108
109	## Dynamic Prop Expressions
110
111	Any prop value can be a data-driven expression resolved by the renderer before components receive props:
112
113	- `{ "$state": "/state/key" }` - reads from state model (one-way read)
114	- `{ "$bindState": "/path" }` - two-way binding: reads from state and enables write-back. Use on the natural value prop (value, checked, pressed, etc.) of form components.
115	- `{ "$bindItem": "field" }` - two-way binding to a repeat item field. Use inside repeat scopes.
116	- Filtered lists: `repeat` plus an `$item` visible condition on the same container renders only matching items: `{ "repeat": { "statePath": "/tasks", "key": "id" }, "visible": { "$item": "status", "eq": "todo" }, "children": ["task-card"] }`. AND-composed `$state` conjuncts gate the container shell; `$item`/`$index` conjuncts filter items.
117	- `{ "$cond": <condition>, "$then": <value>, "$else": <value> }` - conditional value
118	- `{ "$template": "Hello, ${/name}!" }` - interpolates state values into strings
119	- `{ "$computed": "fn", "args": { ... } }` - calls registered functions with resolved args
120
121	```json
122	{
123	"type": "Input",
124	"props": {
125	"value": { "$bindState": "/form/email" },
126	"placeholder": "Email"
127	}
128	}
129	```
130
131	Components do not use a `statePath` prop for two-way binding. Use `{ "$bindState": "/path" }` on the natural value prop instead.
132
133	Components receive already-resolved props. For two-way bound props, use the `useBoundProp` hook with the `bindings` map the renderer provides.
134
135	Register `$computed` functions via the `functions` prop on `JSONUIProvider` or `createRenderer`:
136
137	```tsx
138	<JSONUIProvider
139	functions={{ fullName: (args) => `${args.first} ${args.last}` }}
140	>
141	```
142
143	## Event System
144
145	Comp

People who liked this also viewed

6 picks

Type

hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026262k37k
request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026165k181k
analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026161k507
explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026161k507
ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026160k181k
scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026149k181k

react

4.7kinstalls849forks

View on GitHub

How to install react?

vercel-labs/json-render/react

$npx -y skills add vercel-labs/json-render --skill react

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# @json-render/react
2
3	React renderer that converts JSON specs into React component trees.
4
5	## Quick Start
6
7	```typescript
8	import { defineRegistry, Renderer } from "@json-render/react";
9	import { catalog } from "./catalog";
10
11	const { registry } = defineRegistry(catalog, {
12	components: {
13	Card: ({ props, children }) => <div>{props.title}{children}</div>,
14	},
15	});
16
17	function App({ spec }) {
18	return <Renderer spec={spec} registry={registry} />;
19	}
20	```
21
22	## Creating a Catalog
23
24	```typescript
25	import { defineCatalog } from "@json-render/core";
26	import { schema } from "@json-render/react/schema";
27	import { defineRegistry } from "@json-render/react";
28	import { z } from "zod";
29
30	// Create catalog with props schemas
31	export const catalog = defineCatalog(schema, {
32	components: {
33	Button: {
34	props: z.object({
35	label: z.string(),
36	variant: z.enum(["primary", "secondary"]).nullable(),
37	}),
38	description: "Clickable button",
39	},
40	Card: {
41	props: z.object({ title: z.string() }),
42	description: "Card container with title",
43	},
44	},
45	});
46
47	// Define component implementations with type-safe props
48	const { registry } = defineRegistry(catalog, {
49	components: {
50	Button: ({ props }) => (
51	<button className={props.variant}>{props.label}</button>
52	),
53	Card: ({ props, children }) => (
54	<div className="card">
55	<h2>{props.title}</h2>
56	{children}
57	</div>
58	),
59	},
60	});
61	```
62
63	## Spec Structure (Element Tree)
64
65	The React schema uses an element tree format:
66
67	```json
68	{
69	"root": {
70	"type": "Card",
71	"props": { "title": "Hello" },
72	"children": [
73	{ "type": "Button", "props": { "label": "Click me" } }
74	]
75	}
76	}
77	```
78
79	## Visibility Conditions
80
81	Use `visible` on elements to show/hide based on state. New syntax: `{ "$state": "/path" }`, `{ "$state": "/path", "eq": value }`, `{ "$state": "/path", "not": true }`, `{ "$and": [cond1, cond2] }` for AND, `{ "$or": [cond1, cond2] }` for OR. Helpers: `visibility.when("/path")`, `visibility.unless("/path")`, `visibility.eq("/path", val)`, `visibility.and(cond1, cond2)`, `visibility.or(cond1, cond2)`.
82
83	## Providers
84
85	\| Provider \| Purpose \|
86	\|----------\|---------\|
87	\| `StateProvider` \| Share state across components (JSON Pointer paths). Accepts optional `store` prop for controlled mode. \|
88	\| `ActionProvider` \| Handle actions dispatched via the event system \|
89	\| `VisibilityProvider` \| Enable conditional rendering based on state \|
90	\| `ValidationProvider` \| Form field validation \|
91
92	### External Store (Controlled Mode)
93
94	Pass a `StateStore` to `StateProvider` (or `JSONUIProvider` / `createRenderer`) to use external state management (Redux, Zustand, XState, etc.):
95
96	```tsx
97	import { createStateStore, type StateStore } from "@json-render/react";
98
99	const store = createStateStore({ count: 0 });
100
101	<StateProvider store={store}>{children}</StateProvider>
102
103	// Mutate from anywhere — React re-renders automatically:
104	store.set("/count", 1);
105	```
106
107	When `store` is provided, `initialState` and `onStateChange` are ignored.
108
109	## Dynamic Prop Expressions
110
111	Any prop value can be a data-driven expression resolved by the renderer before components receive props:
112
113	- `{ "$state": "/state/key" }` - reads from state model (one-way read)
114	- `{ "$bindState": "/path" }` - two-way binding: reads from state and enables write-back. Use on the natural value prop (value, checked, pressed, etc.) of form components.
115	- `{ "$bindItem": "field" }` - two-way binding to a repeat item field. Use inside repeat scopes.
116	- Filtered lists: `repeat` plus an `$item` visible condition on the same container renders only matching items: `{ "repeat": { "statePath": "/tasks", "key": "id" }, "visible": { "$item": "status", "eq": "todo" }, "children": ["task-card"] }`. AND-composed `$state` conjuncts gate the container shell; `$item`/`$index` conjuncts filter items.
117	- `{ "$cond": <condition>, "$then": <value>, "$else": <value> }` - conditional value
118	- `{ "$template": "Hello, ${/name}!" }` - interpolates state values into strings
119	- `{ "$computed": "fn", "args": { ... } }` - calls registered functions with resolved args
120
121	```json
122	{
123	"type": "Input",
124	"props": {
125	"value": { "$bindState": "/form/email" },
126	"placeholder": "Email"
127	}
128	}
129	```
130
131	Components do not use a `statePath` prop for two-way binding. Use `{ "$bindState": "/path" }` on the natural value prop instead.
132
133	Components receive already-resolved props. For two-way bound props, use the `useBoundProp` hook with the `bindings` map the renderer provides.
134
135	Register `$computed` functions via the `functions` prop on `JSONUIProvider` or `createRenderer`:
136
137	```tsx
138	<JSONUIProvider
139	functions={{ fullName: (args) => `${args.first} ${args.last}` }}
140	>
141	```
142
143	## Event System
144
145	Comp

People who liked this also viewed

6 picks

Type