PlugWiki

react Skill (vercel-labs json-render): JSON to React UI

Teaches your agent the @json-render/react package, which turns a JSON spec (often AI-generated) into a React component tree.

Installs
17.3K
on skills.sh
Stars
18.9K
on GitHub
Updated
Nov 2026
last repo commit

This skill is named react but covers one library, @json-render/react from Vercel Labs. It shows how to define a catalog of allowed components with Zod props, map them to React components in a registry, and render a JSON spec with the Renderer. It also covers named slots, visibility conditions, state, events, watchers, built-in actions and two-way form binding.

It is a documentation skill of one file with no scripts. It loads when you work with @json-render/react, build React UIs from JSON, create component catalogs or render AI-generated specs. Your project needs the npm packages @json-render/core and @json-render/react.

Good for

  • React developers building generative UI where an AI returns JSON that is rendered with components you define
  • Teams adding forms, state and actions to json-render specs
  • Anyone who needs the agent to use json-render's current API instead of guessing

Install react

Claude Code

  1. 1

    Copy this prompt.

    Install the react skill in Claude Code. Run this command:

npx skills add https://github.com/vercel-labs/json-render --skill react

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

  1. Quick Start
  2. Creating a Catalog
  3. Spec Structure (Element Tree)
  4. Named Slots
  5. Visibility Conditions
  6. Providers
  7. External Store (Controlled Mode)
  8. Dynamic Prop Expressions
  9. Event System
  10. State Watchers
  11. Built-in Actions
  12. useBoundProp
  13. BaseComponentProps
  14. defineRegistry
  15. Key Exports

Key facts

Author
Vercel Labs (json-render repo)
Repo
vercel-labs/json-render
License
Apache-2.0 (as listed by the crawl)
Installs on skills.sh
17,329 (Nov 2, 2026)
GitHub stars
18,872 (repo, Nov 2, 2026)
Last commit
2026-11-01
Files
1 file: SKILL.md
Covers
@json-render/react only
License (README badge)
Apache-2.0

What it includes

  • defineRegistry plus Renderer: render a spec with your React components

    Minimal example with a Card component.

    Quick Start

  • defineCatalog with Zod prop schemas, slots and descriptions for each component

    The catalog is the list of components the AI is allowed to use.

    Creating a catalog

  • Element tree with children, plus top-level slots like header and footer

    Use children for the default slot and slots for the others. Do not use slots.default.

    Spec structure and named slots

  • Show or hide elements from state with $state, $and, $or and helper functions

    Helpers include visibility.when, unless, eq, and, or.

    Visibility conditions

  • StateProvider, ActionProvider, VisibilityProvider and ValidationProvider

    StateProvider also has a controlled mode with an external store.

    Providers

  • Components emit named events; elements can watch state paths to trigger actions

    The on() handle exposes emit, shouldPreventDefault and bound.

    Events and watchers

  • Props can read from state instead of fixed values

    Includes $bindState and $bindItem for two-way binding.

    Dynamic prop expressions

  • setState, pushState, removeState and validateForm, handled automatically

    validateForm writes { valid, errors } to state.

    Built-in actions

  • Two-way binding for inputs and a base type for reusable component libraries

    BaseComponentProps is meant for libraries not tied to one catalog.

    useBoundProp and BaseComponentProps

  • Table of the package's hooks, store helpers and types

    Includes useUIStream for streaming specs from an API endpoint and createStateStore.

    Key exports

From the official docs

Questions

What does this react skill do?

It teaches the agent how to use @json-render/react. That means defining a catalog, writing a registry, rendering a JSON spec, and handling state, events, actions and form binding.

Is this a general React skill?

No. Despite the name, it only covers the json-render React renderer from Vercel Labs. For general React advice you need a different skill.

How do I install it?

Use the install box above. Your project also needs the npm packages: the json-render README shows npm install @json-render/core @json-render/react.

Does it work in Claude Code, Codex and Cursor?

SKILL.md and the README name no clients. It is a standard SKILL.md file that the skills CLI can place for supported agents.

Do I need an API key?

None is mentioned. The skill is one documentation file with no scripts. Your own app may use a model API to generate specs.

Why does my named slot render nothing?

SKILL.md says to use children for the default slot and the element's slots object for the others, such as slots.header. Do not use slots.default.

What do the built-in actions do?

setState, pushState, removeState and validateForm are handled for you and added to AI prompts without being declared in the catalog. validateForm writes the validity and errors to state.

Is it safe?

It is Markdown with code samples and no scripts. Specs generated by a model are limited to the components in your catalog, but you still review what your actions do.

Information

updated Nov 2, 2026

Repository
vercel-labs/json-render
Folder
skills/react

vercel-labs/json-renderskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4
  1. react SKILL.md (json-render) · github.com
  2. json-render README · github.com
  3. skills.sh listing · skills.sh
  4. vercel-labs/json-render · github.com

Updated Nov 2, 2026.