skills.rest
firstsun-dev
firstsun-devOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react

Renders JSON specs into React component trees using the json-render library.

3|1|Updated Apr 29, 2026
Search Tags:#react#zod#component catalog#json-render#ui rendering#state binding#json spec
One-click install
npx skills add https://github.com/firstsun-dev/skills --skill react-firstsun-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/firstsun-dev/skills/tree/main/plugins/frontend-product-design/skills/react
Command: npx skills add https://github.com/firstsun-dev/skills --skill react-firstsun-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @json-render/react, @json-render/core, zod.

What problem does it solve? Building React UIs from AI-generated or data-driven JSON specifications requires a renderer that maps spec elements to typed components, manages state, and handles events. This Skill provides the conventions and APIs of @json-render/react so you can define catalogs, registries, and renderers without guessing the library's patterns. ## Core Features & Use Cases - Catalog and Registry Definition: Define component catalogs with Zod prop schemas and create type-safe registries via defineCatalog and defineRegistry. - State and Binding System: Use StateProvider, $bindState two-way bindings, visibility conditions, and external StateStore integration with Redux, Zustand, or XState. - Events and Actions: Wire component events to actions with emit/on, built-in setState/pushState/removeState/validateForm actions, and state watchers. - Use Case: An AI agent generates a JSON spec describing a form with conditional fields; you render it with the Renderer component, bind inputs to state with $bindState, and validate the form with the built-in validateForm action. ## Quick Start Ask the agent to create a json-render catalog with Button and Card components and render a sample JSON spec using the React renderer.

Frequently Asked Questions about react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render a JSON spec as React components?▼

Create a catalog with defineCatalog, build a registry with defineRegistry mapping component names to React implementations, then pass the spec and registry to the Renderer component. The spec uses an element tree with type, props, and children fields.

How do I bind React form inputs to state in json-render?▼

Use the { "$bindState": "/path" } expression on the natural value prop of a form component, then read and write it with the useBoundProp hook. This provides two-way binding without a statePath prop on components.

Can json-render React work with Redux or Zustand?▼

Yes, create an external store with createStateStore and pass it to StateProvider via the store prop. When a store is provided, initialState and onStateChange are ignored, and external mutations trigger React re-renders automatically.

How do I conditionally show components based on state?▼

Add a visible field to an element using expressions like { "$state": "/path", "eq": value } or combine conditions with $and and $or. Helper functions such as visibility.when and visibility.eq generate these expressions programmatically.

Why is my two-way binding not updating state in json-render?▼

Binding fails when you use a statePath prop instead of the $bindState expression on the value prop. Components must use useBoundProp with the bindings map the renderer provides to write values back to state.

Related Skills

Explore More Software Engineering Skills→
StormHubStormHub

react

Convert JSON UI specs into executable React component trees.

Community
Advanced
TheBoomerDevTheBoomerDev

redux

Connect a Redux store to json-render's StateStore interface via selectors and dispatch.

Community
Intermediate
aashahinaashahin

svelte

Renders JSON specs into Svelte 5 component trees using json-render catalogs.

Community
Intermediate
vercel-labsvercel-labs
16.1k

devtools

Inspects spec trees, state, actions, and streams in json-render apps.

Official
Intermediate