json-render
15k

Skills

json-render ships with skills that teach AI coding agents how to use each package. Install a skill and your agent in Cursor, Claude Code, or Codex can generate json-render UIs without manual guidance.

Available Skills#

  • core — Core schemas, catalogs, and AI prompt generation.
  • react — React renderer that turns JSON specs into React component trees.
  • react-pdf — PDF renderer using @react-pdf/renderer.
  • react-email — Email renderer that produces HTML or plain-text emails.
  • react-native — React Native renderer for native mobile UIs.
  • shadcn — Pre-built shadcn/ui components (Radix UI + Tailwind).
  • image — Image renderer that turns JSON specs into SVG and PNG via Satori.
  • remotion — Remotion renderer for video generation from JSON timeline specs.
  • vue — Vue 3 renderer for Vue component trees.
  • svelte — Svelte 5 renderer for Svelte component trees.
  • solid — SolidJS renderer for fine-grained reactive component trees.
  • codegen — Code generation utilities for building custom exporters.
  • mcp — MCP Apps integration for Claude, ChatGPT, Cursor, and VS Code.
  • redux — Redux adapter for json-render's StateStore interface.
  • zustand — Zustand adapter for json-render's StateStore interface.
  • jotai — Jotai adapter for json-render's StateStore interface.
  • xstate — XState Store adapter for json-render's StateStore interface.

Installation#

npx skills add vercel-labs/json-render --skill core
npx skills add vercel-labs/json-render --skill react
npx skills add vercel-labs/json-render --skill react-pdf
npx skills add vercel-labs/json-render --skill react-email
npx skills add vercel-labs/json-render --skill react-native
npx skills add vercel-labs/json-render --skill shadcn
npx skills add vercel-labs/json-render --skill image
npx skills add vercel-labs/json-render --skill remotion
npx skills add vercel-labs/json-render --skill vue
npx skills add vercel-labs/json-render --skill svelte
npx skills add vercel-labs/json-render --skill solid
npx skills add vercel-labs/json-render --skill codegen
npx skills add vercel-labs/json-render --skill mcp
npx skills add vercel-labs/json-render --skill redux
npx skills add vercel-labs/json-render --skill zustand
npx skills add vercel-labs/json-render --skill jotai
npx skills add vercel-labs/json-render --skill xstate

After installing, your AI agent will automatically activate the right skill when it encounters a matching request.

core#

The foundational skill. Teaches agents how to define catalogs, create schemas, build specs, and generate AI prompts. This is the starting point for any json-render project and covers defineCatalog, defineSchema, specSchema, toPrompt, and the full spec format.

react#

Teaches agents how to render JSON specs as React component trees using JsonRender, JsonRenderClient, and useJsonRender. Covers custom component registries, client-side interactivity, state management, and streaming integration.

react-pdf#

Teaches agents how to generate PDFs from JSON specs using @react-pdf/renderer. Covers the PDF-specific component registry, page layout, and styling.

react-email#

Teaches agents how to render JSON specs as HTML or plain-text emails using React Email components. Covers the email-specific registry and rendering pipeline.

react-native#

Teaches agents how to render JSON specs as native mobile UIs with React Native. Covers the native component registry and platform-specific considerations.

shadcn#

Teaches agents how to use the pre-built shadcn/ui component registry with json-render. Includes Radix UI primitives, Tailwind styling, and the full set of available shadcn components.

image#

Teaches agents how to turn JSON specs into SVG and PNG images using Satori. Covers the image-specific registry, dimensions, fonts, and rendering options.

remotion#

Teaches agents how to generate videos from JSON timeline specs using Remotion. Covers compositions, sequences, timeline structure, and video rendering.

vue#

Teaches agents how to render JSON specs as Vue 3 component trees. Covers the Vue renderer API, custom component registries, and reactivity integration.

svelte#

Teaches agents how to render JSON specs as Svelte 5 component trees. Covers the Svelte renderer API and component registration.

solid#

Teaches agents how to render JSON specs as SolidJS component trees. Covers Solid-specific reactive patterns, provider wiring, bindings, actions, and streaming.

codegen#

Teaches agents how to use code generation utilities to export UI specs as framework-specific source code. Covers the codegen pipeline and custom exporter creation.

mcp#

Teaches agents how to build MCP Apps that serve json-render UIs inside AI tools like Claude, ChatGPT, Cursor, and VS Code. Covers MCP server setup, tool definitions, and UI streaming.

redux#

Teaches agents how to connect a Redux store to json-render's StateStore interface for state-driven UIs.

zustand#

Teaches agents how to connect a Zustand store to json-render's StateStore interface for lightweight state management.

jotai#

Teaches agents how to connect Jotai atoms to json-render's StateStore interface for atomic state management.

xstate#

Teaches agents how to connect an XState Store to json-render's StateStore interface for state-machine-driven UIs.

Source#

All skill files are in the skills/ directory of the repository.