vercel-labs/json-render
33 skills22.8k installs496k starsGitHub
Install
npx skills add https://github.com/vercel-labs/json-renderSkills in this repo
1ReactThis skill documents @json-render/react for solo builders who want UIs driven by JSON instead of hand-written JSX for every AI iteration. You define a component catalog with Zod prop schemas, register React implementations through defineRegistry, and render any incoming spec with Renderer. That pattern fits agent products where the model emits structured layout JSON, internal admin tools generated from prompts, or design systems you want to constrain so invalid props fail at parse time. The skill stays focused on the React renderer package—catalog creation, type-safe props, and wiring—not on hosting or auth. Use it when you already chose json-render on the core side and need the React binding that turns specs into real buttons, cards, and nested children in your Next or Vite app.2.3kinstalls2Corecore is the json-render foundation skill for working with @json-render/core when you need to define schemas, build component catalogs, and generate AI prompts that produce conformant JSON specs for UI or video generation. Solo builders adopting Vercel’s json-render pattern use it during the build phase to lock structure before rendering—schemas via defineSchema, catalogs via defineCatalog, and streaming progressive specs via SpecStream. The workflow centers on TypeScript and Zod: each component entry documents props and human-readable descriptions so models emit predictable JSON rather than free-form markup. It pairs with agentic frontends where the LLM fills a spec you validate and render. This is library-oriented procedural knowledge, not a deployed component gallery, and it assumes comfort with typed schema design.1.6kinstalls3ShadcnThe shadcn skill documents how to adopt Vercel’s @json-render/shadcn package when a solo builder is rendering structured UI from JSON catalogs with familiar shadcn/ui primitives. It explains the two entry points so you can keep server catalogs free of React while still registering matching client implementations. The intended pattern is selective: choose only the component definitions your product surfaces, mirror them in the registry, and avoid dumping the entire library into every app. That discipline keeps agent-generated UIs smaller, easier to review, and closer to how hand-authored Next.js apps compose Radix-backed controls. Use it whenever you extend a json-render catalog, add standard forms and layout chrome, or teach an agent which UI nodes are legal in your design system. It assumes comfort with TypeScript imports and Tailwind-styled components rather than teaching CSS from scratch.1.2kinstalls4React Pdfreact-pdf is a Vercel json-render skill for solo builders who need dependable PDF output from structured JSON rather than hand-coded layout every time. It documents how to install @json-render/core and @json-render/react-pdf, define a Spec with root elements such as Document, Page, Heading, and Table, and produce buffers for downloads, streams for HTTP responses, or files on disk. Use it when you are adding invoices, receipts, reports, or printable summaries to a SaaS or API product inside Claude Code, Cursor, or Codex. The skill is phase-specific to build backend integration work: you already have or will define the JSON spec contract, then wire rendering into your route handlers or background tasks. It complements json-render authoring skills by closing the loop to a binary deliverable customers can save or print.1.2kinstalls5React Three FiberReact Three Fiber for json-render helps solo builders who want agent- or config-driven 3D UIs without hand-writing every Three.js scene graph node. The skill documents the two package entry points so server code can own catalog schemas while the client mounts threeComponents inside ThreeCanvas. You pick definitions from threeComponentDefinitions, wire defineRegistry, and render JSON specs into lights, meshes, models, and environment blocks. It fits indie SaaS dashboards, product configurators, and marketing embeds where LLMs or backends emit structured scene JSON. Intermediate familiarity with React and basic R3F concepts helps; the skill emphasizes catalog composition rather than low-level shader authoring.1.1kinstalls6ZustandZustand is a Prism-listed agent skill for the json-render ecosystem: it teaches how to adapt a Zustand v5 vanilla store to json-render’s StateStore interface via @json-render/zustand. Solo builders shipping agent-driven or schema-driven UIs with @json-render/react use it when they already standardize on Zustand for client state and need json-render components to subscribe and mutate that store consistently. The workflow covers installation, creating bearStore-style vanilla stores, wrapping them with zustandStateStore, and mounting StateProvider in React. Advanced setups map a nested slice with selector/updater so only part of a larger app store backs the render tree. It is narrow by design—no general Zustand patterns—only the bridge json-render expects. Use during frontend build when json-render is in the stack and Zustand is the chosen state layer.1kinstalls7React Nativereact-native is the React Native renderer package for Vercel’s json-render stack. Solo and indie builders use it when they want server-driven or agent-generated UI described as JSON—common for mobile apps that accept AI layout output, internal admin shells, or shared catalogs across web and native. The skill walks through defineCatalog with the react-native schema, standard and custom component registration via defineRegistry, and rendering with the Renderer component. It assumes familiarity with TypeScript, Zod, and React Native primitives. It matters because it keeps one spec format for dynamic UIs instead of rewriting layouts by hand every time the model or API changes. Invoke it during Build when you are wiring catalogs, extending standard definitions, or debugging binding and action handlers on device.985installs8RemotionRemotion is an agent skill for turning JSON timeline specifications into real Remotion video compositions using the @json-render/remotion package. Solo builders shipping demos, marketing clips, or in-app video previews install it when their agent outputs structured timeline JSON rather than hand-authored Remotion code. The skill documents how to mount the Renderer inside @remotion/player with duration, fps, and canvas size driven by the spec, and how to register standard clip, transition, and effect definitions—or layer custom zod-validated components on top. It fits builder workflows where LLMs or json-render catalogs generate timelines that must render consistently in the browser. Use it while implementing frontend video features, not as a substitute for Remotion encoding, hosting, or distribution pipelines you still configure at ship and launch.876installs9Image@json-render/image is the image renderer in the json-render family: it takes a typed JSON Spec and produces SVG or PNG output using Satori, which solo builders use for automated OG images, share cards, and server-side graphics without hand-coding every layout. The skill walks through renderToPng, the root/elements Spec model, loading font data Satori requires, and wiring defineCatalog with the package schema plus standardComponentDefinitions. You can extend the catalog with custom components whose props are validated with zod, which is especially useful when an agent emits structured layout JSON you want to render deterministically. It targets indie SaaS and content sites that need consistent branding on metadata images, plus agent workflows that generate visual specs instead of binary assets. Complexity is intermediate because fonts, catalog composition, and async rendering need a real Node/TypeScript setup. Use it while integrating the package during Build, then reuse the same pipeline for Launch SEO assets and Grow content distribution.822installs10CodegenCodegen is an agent skill documenting @json-render/codegen utilities for solo builders who render UIs from JSON specs and need to emit real framework code—not hand-translate every node. It covers tree traversal, harvesting component types, state paths, and action names, plus prop serialization rules including $state references. Use it when you extend json-render with a custom Next.js or Remix exporter, debug generated JSX, or teach an agent how props should stringify. The skill is phase-specific to Build frontend work but also supports agent-tooling when your product generates UI from LLM output. Install the npm package in the repo you are generating into; the skill itself is reference procedural knowledge rather than a hosted MCP. Intermediate complexity reflects TypeScript generics and exporter design choices rather than copy-paste snippets alone.802installs11Mcpmcp is an agent skill from the json-render ecosystem for developers shipping agent-native products. It documents how @json-render/mcp serves declarative UI specs as MCP Apps—interactive panels inside Claude, ChatGPT, Cursor, VS Code, and compatible hosts. On the server you define a component catalog (often shadcn-backed), expose createMcpApp with name, version, catalog, and prebuilt HTML, then connect over stdio. On the client, useJsonRenderApp loads the spec inside an iframe and renders through JSONUIProvider. Solo builders use it when an MCP tool should show forms, dashboards, or workflows—not just JSON blobs—while staying aligned with json-render’s schema and action model. It assumes you are already in a TypeScript monorepo building custom agent tools, not configuring off-the-shelf SaaS alone.797installs12Remotion Best PracticesRemotion Best Practices is an agent skill that packages domain knowledge for building videos with Remotion—React components that render to MP4 and related outputs. Solo and indie builders use it whenever an AI coding assistant touches Remotion code so answers follow established patterns for compositions, timing, assets, audio trimming, charts, optional Three.js scenes, and caption tracks. The skill instructs the agent to consult granular rule files (for example animations, calculate-metadata, can-decode, extract-frames) rather than improvising APIs that break renders or preview. It fits builders shipping explainers, launch reels, dashboard walkthroughs, or programmatic marketing clips without hiring a motion team. Invoke it during implementation and refactors in a TypeScript/React repo that already uses Remotion; pair it with your own design specs and asset pipeline. It does not replace Remotion docs or a render farm—it steers the agent toward correct, consistent Remotion idioms.789installs13VueThe vue skill documents how solo builders integrate @json-render/vue to turn JSON specifications into real Vue 3 interfaces—ideal when agents or backends emit UI JSON instead of hand-written SFCs. It walks through installing the packages, defining a Zod-typed component catalog, and wiring a registry whose entries use Vue’s h() to map spec nodes to DOM and child slots. That pattern supports AI-generated layouts, internal admin tools, and dynamic dashboards where the source of truth stays JSON. Builders shipping SaaS or agent-facing products who already use Vue 3 and want a schema-safe bridge from LLM output to rendered UI should invoke it during frontend implementation, before hard-coding screens that duplicate what the spec already describes.754installs14React EmailReact-email is a Prism-listed agent skill for the json-render family that turns JSON specifications into production HTML or plain-text email using @react-email/components and @react-email/render. Solo builders and small teams invoke it when they are already on @json-render/react-email, building transactional or lifecycle messages from data, maintaining an email component catalog, or piping AI-generated layouts into a typed render path. The documented flow centers on defineCatalog, standard component definitions, and a spec tree with root and elements such as Html, Body, Container, and Heading. It suits agentic products that want one schema for web and email-like outputs without hand-maintaining separate template languages for every send. Expect intermediate familiarity with TypeScript and the json-render catalog model rather than drag-and-drop ESP editors alone.740installs15Inkink documents how solo builders use @json-render/ink to turn JSON specifications into interactive terminal UIs with Ink. You define a catalog with Zod schemas—standard Ink components and actions plus your own widgets—then register renderers for custom pieces while built-ins stay automatic. JSONUIProvider and Renderer accept a spec and registry so AI agents or pipelines can emit structured UI JSON instead of imperative terminal code. The skill fits indie developers shipping CLIs, coding agents, or local tools that need forms, lists, and actions in the console. It reduces repeat layout work when specs change often and keeps terminal UX consistent with the broader json-render ecosystem used elsewhere in a project.737installs16Skill Creatorskill-creator from vercel-labs/json-render is a meta agent skill for designing and packaging procedural knowledge your coding agent can reuse when working with JSON-driven UI rendering. Solo builders shipping agent-assisted frontends benefit when they need consistent SKILL.md files that describe how to compose, validate, and extend render pipelines rather than improvising prompts each session. The skill sits early in agent-tooling work: define invoke triggers, outputs, and guardrails, then connect those skills to json-render usage in Build. Prism lists it for developers who treat skills as versioned capabilities alongside application code. Exact checklist counts depend on the full SKILL.md in the repo; treat this entry as the authoring entrypoint for that package, not a substitute for reading the upstream skill body and license terms before installation.685installs17SvelteThe Svelte skill documents @json-render/svelte, the Svelte 5 renderer that turns JSON specifications into composable UI using a component registry you own. Solo builders shipping agent-driven or API-backed products use it when UI structure arrives as JSON—common with LLM-generated layouts—or when they want one catalog schema shared across render targets. Quick start wraps Renderer inside JsonUIProvider and passes spec plus registry entries such as Card and Button. Catalog authoring uses defineCatalog from @json-render/core with the Svelte schema and zod objects for each component’s props and descriptions. Component authors implement Svelte files against BaseComponentProps so the renderer can inject props consistently. This fits indie SaaS dashboards, internal tools, and experimental agent UIs where the spec layer stays separate from presentation. Intermediate familiarity with Svelte 5 runes ($props), TypeScript, and zod is assumed.672installs18ReduxRedux is a phase-specific integration skill for the json-render stack: it teaches how to connect @json-render/redux to a Redux or Redux Toolkit store so declarative, agent-driven UI trees persist state through familiar Redux patterns. Solo builders on React SaaS dashboards who already centralize UI state in slices can adopt json-render without a parallel state system. The skill walks through npm installs, defining a ui slice with a replace-style reducer, configuring configureStore, and passing store, selector, and dispatch into reduxStateStore before wrapping children in StateProvider from @json-render/react. It is narrowly scoped to the adapter contract rather than general Redux architecture, which keeps agent sessions focused on copy-pasteable wiring. Use when a spec or PR already chose json-render and you need Redux as the single source of truth for rendered component state during Build.606installs19JotaiThe jotai skill documents how solo builders connect Vercel json-render to Jotai as the state backend. It targets indie developers shipping React or agent-driven UIs who already chose json-render for schema-driven rendering but want familiar atom-based state instead of a custom store. Install the scoped packages, create a Record<string, unknown> atom for UI state, pass it to jotaiStateStore, and wrap the tree in StateProvider from @json-render/react. When the app already uses Jotai Provider with createStore(), pass the same store into the adapter so json-render and hand-written components share one source of truth. Use this skill whenever the agent is integrating json-render with Jotai—not for picking a state library from scratch or for non-React stacks.597installs20SolidThe solid skill documents how solo and indie builders use @json-render/solid to turn json-render specifications into Solid component trees with fine-grained reactivity. It is for anyone shipping agent- or API-driven UIs who already chose json-render and need the Solid-specific catalog, registry, and provider wiring—not a generic React or Vue guide. Use it when you are defining Zod-backed catalogs, hooking Renderer and JSONUIProvider, implementing bindings and actions, or debugging updates that should track spec slices without over-rendering. The workflow mirrors Vercel’s json-render stack: defineCatalog with schema, register Solid components that accept ComponentRenderProps, then render null-safe specs inside a provider. Complexity sits at intermediate because you must understand Solid signals, Zod schemas, and the core json-render mental model. It does not replace @json-render/core docs for cross-framework concepts; it narrows implementation detail to Solid so your coding agent stops guessing provider APIs and reactivity edge cases.565installs21XstateThe xstate skill documents the @json-render/xstate adapter that lets solo builders standardize on XState Store while still using json-render for AI- or schema-driven UI. json-render expects a `StateStore` implementation; this package bridges an `@xstate/store` atom created with `createAtom` so your declarative render tree and imperative state transitions share one source of truth. Installation pulls @json-render/xstate alongside core, react bindings, and @xstate/store at version three or newer. You instantiate the atom with your initial StateModel (for example a counter or form slice), pass it to `xstateStoreStateStore`, and supply the result to `StateProvider` so child json-render components read and patch state through XState rather than ad-hoc React context. The skill is narrow and integration-focused—ideal when you are already committed to Stately’s store model for agent-built dashboards, configurators, or dynamic layouts and need the official wiring contract spelled out for your coding agent.561installs22Shadcn Svelteshadcn-svelte is an agent skill for solo builders shipping json-render–driven Svelte apps who want production-grade UI without reinventing primitives. It documents how to import `shadcnComponentDefinitions` for catalog schemas that stay free of Svelte on the server, and `shadcnComponents` when you need runtime implementations alongside those definitions. The workflow centers on `defineCatalog` from `@json-render/core`, the Svelte schema package, and a curated subset of the 36 bundled components—cards, stacks, headings, buttons, and related layout and form patterns—so agents do not dump the entire library into every project. Use it when you are standardizing a Svelte catalog UI, aligning AI-generated layouts with shadcn-svelte, or migrating a json-render app to Tailwind-based components. Intermediate familiarity with Svelte 5, json-render registries, and selective catalog composition is assumed; the payoff is faster, consistent frontends that match the json-render mental model.554installs23Yamlyaml is an agent skill for solo builders shipping AI-generated interfaces with Vercel json-render. It documents the @json-render/yaml package as an alternative wire format to JSONL, using fenced YAML blocks so models can stream partial UI specs and surgical edits. Builders learn how yamlPrompt assembles system prompts for standalone YAML-only output or inline chat replies wrapped in fences, with options for merge versus patch edit semantics. The streaming parser progressively parses YAML and emits JSON Patch diffs, which matters when you want incremental UI updates without re-parsing entire JSON blobs. AI SDK integration via a TransformStream bridges model tokens into json-render patch events your renderer already understands. Install it when you are implementing catalog-backed generative UI in TypeScript, tuning prompt rules like dark theme defaults, or debugging yaml-spec versus yaml-edit behavior. It assumes familiarity with @json-render/core catalogs and modern AI SDK pipelines rather than hand-written static components alone.524installs24NextThe next skill documents @json-render/next, a renderer that turns structured JSON application specs into working Next.js projects for solo and indie builders who want agent- or tool-generated UI without hand-wiring every route. It fits the build phase when you already have or are generating a NextAppSpec with metadata, layouts, and route-level page trees, and need correct wiring for App Router-style composition, slots, and SEO fields. You install @json-render/core, @json-render/react, and @json-render/next, define layouts with container and navigation primitives, then attach per-path pages with their own element roots. The workflow matters for AI-generated multi-page SaaS or marketing sites where the agent outputs JSON instead of dozens of TSX files. It is intermediate complexity because you must understand json-render element types and Next.js conventions together; it does not replace choosing hosting or auth—that comes later in ship and operate.455installs25Json Render ReactJSON Render React is a Vercel Labs skill for solo builders who want generative or configuration-driven UIs without letting models invent arbitrary JSX on every turn. It documents @json-render/react: you define a catalog with Zod-validated props, register React implementations, and feed a JSON spec through Renderer to produce a predictable component tree. That pattern fits indie SaaS dashboards, onboarding flows, and internal tools where the agent proposes layout JSON that must stay on-brand and safe. Use it while building the frontend contract between your LLM output and your design system, especially when pairing json-render/core schemas with React bindings. Complexity is intermediate because you must maintain catalogs, nullable fields, and child composition semantics. It is not a full design tool or CMS—it's the glue that makes AI output render consistently inside Next or Vite React apps your agent already edits.404installs26Json Render Corejson-render-core teaches solo builders how to use @json-render/core to lock down what AI may emit before any renderer turns JSON into UI or video. You define a schema with defineSchema, attach catalogs with defineCatalog and Zod prop shapes, and optionally supply prompt templates so model output conforms instead of drifting into invalid structures. SpecStream describes JSONL streaming for incremental specs—useful when agents compose interfaces piece by piece. Typical flow: schema file, catalog with components like Button, then prompt generation hooks for your agent stack. It pairs with json-render renderers elsewhere in the monorepo but this skill stays at the contract layer. Intermediate builders already comfortable with TypeScript and Zod get the most value when wiring agentic frontends or programmatic media pipelines.351installs27Devtoolsdevtools documents how to install and place `@json-render/devtools`—a framework-agnostic inspector with React, Vue, Svelte, and Solid adapters—so solo builders can see why a generative UI element fails to render. Triggers cover adding devtools, debugging json-render, inspecting specs, tracing runtime state, following stream patches, and tapping action logs. You install the core package plus one adapter matching your renderer, then mount `<JsonRenderDevtools />` under the same provider as your `<Renderer />` without extra wiring. The panel is meant for local and staging diagnosis of spec keys, catalogs, and dispatched actions, not for end-user features. Production builds stay clean because the component no-ops under production NODE_ENV. This is a narrow integration skill for teams already on json-render who need visibility comparable to component devtools in traditional frontends.306installs28Directivesdirectives is a build-phase frontend skill for solo builders using Vercel’s json-render stack to turn LLM JSON UI specs into React interfaces. It explains how to import standardDirectives, attach them to prompt generation and the renderer, and extend the set with factories like createI18nDirective. When you need custom behavior, the skill walks through defineDirective from @json-render/core with zod-validated params—useful for $format, $math, $concat, $count, $truncate, $pluralize, $join, and $t-style localization. Install it when your agent is editing catalogs, debugging directive resolution, or adding a new $directive without breaking the spec contract. It assumes TypeScript familiarity and pairs with json-render core and React packages. The outcome is consistent directive behavior between what the model is prompted to emit and what the client actually evaluates.165installs29Json Render Remotionjson-render-remotion teaches solo builders how to use the Remotion renderer package in the json-render stack so JSON timeline specifications become real video compositions. You wire the Remotion Player to the shared Renderer, pass a TimelineSpec as inputProps, and optionally define catalogs with standard transitions, effects, and components—or extend them with custom Zod-defined clips. The skill fits indie SaaS and content products where an agent or backend emits structured video JSON rather than Remotion project files. It assumes you already chose json-render for declarative UI or media and need the video-specific entry point, catalog patterns, and composition sizing from the spec object.157installs30Json Render Shadcnjson-render-shadcn documents how to plug the official shadcn/ui pack into json-render for solo builders shipping agent-driven or JSON-specified web interfaces. The package exposes thirty-six components with a deliberate split: import definitions from the catalog entry for server-safe schema work, then map the same keys to React implementations in the registry. The skill stresses selecting only the Card, Stack, Heading, Button, Input, and other pieces your app actually needs rather than bulk-spreading every definition. It complements json-render core patterns—defineCatalog, defineRegistry, and empty or custom actions—so Tailwind-styled UIs stay consistent with Radix accessibility defaults while remaining machine-generatable from catalog JSON.153installs31Json Render React Nativejson-render-react-native is an agent skill for solo builders shipping React Native apps who want UIs driven by JSON instead of one-off JSX for every screen. It documents how to use @json-render/react-native with defineCatalog, standard and custom component definitions, defineRegistry, and the Renderer to turn specs into native trees with binding, visibility, and actions. Use it when you are on @json-render/react-native, building mobile UIs from JSON, extending a mobile component catalog, or rendering model-generated layout specs on device. It pairs naturally with agent workflows that output structured UI JSON and keeps mobile parity with web json-render patterns. Intermediate complexity: you need TypeScript, Zod, and RN component familiarity.151installs32Json Render Imagejson-render-image is a Vercel Labs agent skill for the @json-render/image package, which converts JSON specifications into SVG and PNG using Satori. Solo builders shipping landing pages, blogs, or SaaS marketing sites use it when they want programmatic OG images and social cards that stay in sync with product data or AI-generated layouts, instead of maintaining one-off static designs. The workflow starts from a Spec with root elements, Frame and Heading nodes, and optional custom Badge-style components registered through defineCatalog and Zod. You wire fonts explicitly, can extend standardComponentDefinitions, and call renderToPng for share-ready bitmaps. It pairs naturally with json-render core specs and fits TypeScript-heavy Next or Node stacks where share metadata is part of the build, not a post-launch afterthought.39installs33Json Render React Emailjson-render-react-email is the React Email bridge for the json-render ecosystem, built for solo SaaS founders who want emails defined as JSON—not hand-maintained JSX strings—so agents can propose layouts safely. You define a catalog with standard component definitions, build a spec graph of Html, Head, Body, Container, Heading, and Text nodes, then call renderToHtml to emit production HTML or plain text suitable for providers like Resend or Postmark. The skill activates when you touch @json-render/react-email, transactional or marketing templates, or AI-generated email specs that must compile to responsive, inline-styled messages. It sits early in Build for template systems and resurfaces in Grow lifecycle work when onboarding drips and receipts need consistent branding. Compared to ad-hoc React Email files, this path keeps structure machine-readable for validation, versioning, and agent edits while still leveraging the mature @react-email/components styling model.17installs