json-render Core Skill: Schemas, Catalogs and Specs for Generative UI

Teaches Claude the @json-render/core package, so it defines schemas and component catalogs and builds JSON specs for AI-generated UI correctly.

Installs: 16K; on skills.sh
Stars: 18.9K; on GitHub
Updated: Nov 2026; last repo commit

The core skill is a reference for @json-render/core, the base package of Vercel Labs' json-render, a framework where an AI generates UI as JSON using only the components in your catalog. It covers schemas, catalogs, prompt generation, streaming specs, validation, dynamic prop expressions, visibility conditions and state stores.

Claude uses it when you work with @json-render/core. It bundles only SKILL.md and no scripts. The package itself is installed in your project with npm, and the skill does not do that for you.

Good for

Developers building generative UI where AI picks from components you define
Teams streaming AI-generated UI specs into React, Vue, Svelte or Solid
Anyone adding validation, state and dynamic props to json-render specs

Install core

Claude Code

Copy this prompt.

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

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

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

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

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.

Sections in SKILL.md

Key Concepts
Experimental Decision-Model Composition
Defining a Schema
Creating a Catalog
Generating AI Prompts
SpecStream Utilities
Form Values in Action Handlers
Dynamic Prop Expressions
State Watchers
Validation
User Prompt Builder
Spec Validation
Visibility Conditions
Built-in Actions in Schema
StateStore
Key Exports

Key facts

Author: Vercel Labs (json-render)
License: Apache-2.0
Installs on skills.sh: 15,994 (Nov 2, 2026)
GitHub stars: 18,872 for the whole vercel-labs/json-render repo (Nov 2, 2026)
Last commit: Nov 1, 2026
What is inside: 1 file: SKILL.md. No scripts or other files.
Package: @json-render/core (npm), documented in the json-render README
Not the only skill: The repo has separate skills for React, Vue, Svelte, Solid, React Native, Remotion, Next and more

What it includes

Schema, catalog, spec and SpecStream
A schema defines the shape of specs and catalogs. A catalog maps component and action names to definitions. A spec is the JSON the AI produces. SpecStream is a JSONL format for streaming specs.
Try: “Define a json-render catalog with a Card, a Metric and a Button, then generate the system prompt.”
Key concepts
defineSchema and defineCatalog with Zod props
Code examples for both, plus catalog.prompt() to produce the AI system prompt with optional custom rules.
Define a schema and catalog
Compile streamed JSONL patches into a spec
createSpecStreamCompiler and related helpers for progressive rendering while a model responds.
SpecStream utilities
Prop expressions, state watchers, form values and built-in actions
How a spec reads data at render time and reacts to actions, with StateStore for external state.
Dynamic props, state and actions
Validation checks, spec validation, auto-fix and visibility conditions
validateSpec, autoFixSpec and the check helpers, plus rules for when an element is shown.
Validation and visibility
buildUserPrompt and buildEditUserPrompt for refine and edit flows
Edit modes are patch, merge and diff.
User prompt builders
experimental_composeSpec with a Gateway evaluator (v0.21.0 and later)
Marked experimental and subject to change. The example reads an AI_GATEWAY_API_KEY in your own server code.
Experimental decision-model composition
Quick list of about two dozen core exports
One-line purpose for each export, such as deepMergeSpec and diffToPatches.
Key exports table

From the official docs

Questions

What does the json-render core skill do?

It gives Claude the working knowledge of @json-render/core: how to define schemas and catalogs, generate AI prompts, stream and validate specs, and use state and actions.

How do I install it?

Use the install box at the top of this page. You also need the package in your project; the json-render README shows npm install @json-render/core plus a renderer package such as @json-render/react.

Why is the skill called just "core"?

It is the core package skill in the vercel-labs/json-render repo. Other skills in that repo cover React, Vue, Svelte, Solid, React Native, Remotion, Next and more. Other authors also publish skills with similar names, so check the repo.

Does it need an API key?

Not for the skill. The experimental decision-model section shows server code that reads an AI_GATEWAY_API_KEY, which is something you would set in your own app if you use it.

Is it safe to install?

It is a single Markdown file with code examples and no scripts, so it only adds instructions for Claude. Review the code Claude writes from it before you run it.

Which framework renderer do I need?

The core skill is framework-neutral. The README shows separate packages for React, Vue, Svelte, Solid, React Native, video, PDF, email, terminal UIs and 3D scenes, each used together with @json-render/core.

Information

updated Nov 2, 2026

Repository: vercel-labs/json-render
Folder: skills/core

vercel-labs/json-render skills.sh

Sources

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

Show all 2

github.com · github.com
github.com · github.com