REPO PACKAGE
vercel-labs json-render
COMMUNITY26skills
2ready to use
LABSCO SUMMARY
Twelve of the 26 are renderers that turn the same JSON spec into a different output — React, Vue, Svelte, Solid, React Native, Next.js full-app scaffolding, Ink terminal UI, Satori-based images, PDF documents via react-pdf, HTML email via react-email, Remotion video timelines, and React Three Fiber 3D scenes. Four more are state-store adapters — Redux, Zustand, Jotai, and XState — for the same StateStore interface, and six are infrastructure: core (schemas and catalogs), codegen, devtools, directives ($format, $math, and the rest), the YAML wire format, and an MCP Apps integration for Claude, ChatGPT, Cursor, and VS Code. Two more are prebuilt component catalogs, shadcn and shadcn-svelte.
This is for a team building AI-generated interfaces across more than one target from a single JSON schema — a dashboard that needs to render the same catalog to a web app and a React Native screen, for instance. It is not for anyone who wants a single default framework or a finished set of components; you still design your own catalog and every component in it, in whichever of the twelve renderers you use.
READ THE FULL ANALYSIS
Two of the 26 have nothing to do with json-render. skill-creator is Anthropic's own generic guide for writing a SKILL.md file, and remotion-best-practices documents the standalone Remotion library rather than the @json-render/remotion package — both read as if they were dropped into this repository's skill folder rather than written for it. The dependency histogram draws the same line on its own: local_tool covers 24 of them, needing an actual @json-render package installed, and ready covers exactly the other 2 — the same two that are not about json-render.
The README documents more packages than the repository ships skills for. Its own package table lists devtools-react, devtools-vue, devtools-svelte, and devtools-solid as separate framework adapters for the inspector panel; only one devtools skill exists, covering the framework-agnostic core. If you need a framework-specific adapter's install path, you are reading the table yourself rather than asking a skill for it.
ALSO IN THIS PACKAGE
MCP SERVERS
1 itemMCP SERVER
json-render
stdio · npx tsx examples/mcp/server.ts --stdioWHAT'S INSIDE
26 showing · 26 totalReady to use
Nothing else to set up — install it and go.
26 of 26
SETUP
Showing all 26 skills
codegen
Build your own code exporter without the tedious half: walking the JSON screen description, collecting every component, data path and action in it, and formatting values as code are already done, so your generator only decides which files come out.
core
The part of json-render where you declare which components an AI is allowed to use and what each one accepts; from that list it writes the model's instructions, then checks and repairs the JSON that comes back.
devtools
A panel you drop into the running app to see what is actually going on inside it — the screen description as it stands, the live data, every action fired, and each change as the AI streams it in.
directives
Ready-made bits of logic that live inside the JSON itself — formatting, arithmetic, joining text, translation — so a generated screen can present a value properly without anyone writing code for it.
image
Turns a JSON description of a picture into a real SVG or PNG file, the kind of image that shows up as the preview when someone shares a link.
ink
Terminal programs have screens too, and this draws one — menus, tables, spinners, progress bars — from a JSON description rather than hand-written code, so a model can produce the whole thing.
jotai
If your app already keeps its data in Jotai, this points json-render at that same store, so the generated screen and the rest of your app never hold two different versions of the truth.
mcp
Lets an assistant such as Claude, ChatGPT or Cursor show a real, clickable interface from your app instead of a wall of text, by serving it over the Model Context Protocol.
next
One JSON file can describe a whole site — several pages, a shared layout, the wording search engines pick up — and this turns it into a working Next.js app.
react
The JSON an AI writes becomes live React components on screen, and they are your own components rather than generic ones, because you hand it the list of what it may use.
react-email
Email is the format that comes out looking different in every app that opens it, so this renders a JSON description into HTML built from pieces made for email, with a plain-text copy alongside.
react-native
A JSON description of a screen, drawn with a phone's own native buttons, lists, modals and tab bars inside a React Native app rather than as a web page.
react-pdf
An invoice, a report or a table, described in JSON and handed back as a finished PDF — written to disk, streamed out, or kept in memory to send straight to a browser.
react-three-fiber
A 3D scene — shapes, lights, a camera, a loaded model — described in JSON and rendered live in the browser on top of Three.js.
redux
A json-render screen normally keeps its own data. This makes it use your app's Redux store instead, so there is one set of data rather than two copies that can drift apart.
remotion
A video described as a timeline in JSON — title cards, overlays, transitions between scenes — turned into something you can play and export, with nobody writing the video code by hand.
remotion-best-practices
Remotion is a way of building videos by writing React code; this is the shelf of short how-to notes that goes with it, and it points you at the one covering the problem in front of you.
shadcn
The buttons, dialogs, tables and forms most web apps are made of, already written up in a form a model can work from, so a generated screen is assembled out of real shadcn/ui pieces instead of from nothing.
shadcn-svelte
For a Svelte app: 36 shadcn-svelte building blocks — cards, dialogs, forms, data tables — described so a model knows what each one takes, so what it generates looks like a designed product.
skill-creator
Making a new skill for Claude from start to finish — working out what it should cover, writing it, and packaging it into a single file you can hand to someone else.
solid
A JSON description of a screen, turned into a live SolidJS interface in which only the values that actually changed get redrawn.
svelte
Hand it a JSON description of a screen and it builds the Svelte 5 version, using whichever of your own components you said it was allowed to use.
vue
A Vue 3 app can take a screen described in JSON — written by a person or by a model — and render it with the app's own components, with no hand-written template for each one.
xstate
Some apps keep everything they know in one XState store; this hands that store to json-render to read and write, so the generated screen is not carrying a second copy of the same data.
yaml
The model can write a screen out in YAML instead of JSON; this reads that text as it streams in, so the page fills in line by line and a later change arrives as a small edit rather than the whole screen again.
zustand
Zustand is a small library for keeping an app's data in one place; this wires it underneath a json-render screen, so the screen and the rest of the app always read the same data.
No skill in this package matches that.
HOW TO GET IT
WHOLE PACKAGEInstall the whole package (26 skills)
npx skills add vercel-labs/json-renderSINGLE SKILLOr install a single skill
npx skills add vercel-labs/json-render --skill <name> --full-depthPick the skill name from the Skills tab — each entry there installs independently.