vercel-labs/json-render
26 skills40.6k installs410k starsGitHub
Install
npx skills add https://github.com/vercel-labs/json-renderSkills in this repo
1ReactReact renderer that transforms JSON specs into React component trees using a catalog-based architecture. Developers use it when building dynamic UIs from JSON, creating AI-generated component specs, or developing component catalogs without writing JSX directly. Key workflows include defining typed component catalogs with Zod schemas, implementing state management via StateProvider with optional external stores (Redux, Zustand), enabling two-way prop binding via $bindState expressions, and handling events through an action system. Built-in actions (setState, pushState, removeState, validateForm) manage state mutations automatically. Supports visibility conditions, computed expressions, state watchers, and validation providers for form fields. Define type-safe component catalogs with Zod schema validation for props Two-way binding via $bindState on component value props with useBoundProp hook Built-in state actions (setState, pushState, removeState, validateForm) require no catalog declaration External state store integration for Redux, Zustand, XState via StateStore interface Event system with action dispatching, visibility conditions, and state watchers on elements Convert JSON el.4.9kinstalls2Corecore is the foundational json-render skill for working with @json-render/core when defining schemas, catalogs, and AI prompt generation for structured UI and video specs. Schemas use defineSchema to declare spec and catalog object shapes with optional promptTemplate hooks for custom LLM instructions. Catalogs map component and action names via defineCatalog with Zod-validated props and human-readable descriptions that agents must conform to when emitting Spec JSON. SpecStream provides JSONL streaming utilities through createSpecStreamCompiler for progressive spec building as partial patches arrive from models. Dynamic prop expressions support $state reads, $bindState two-way binding, $bindItem repeat scopes, $cond branches, and $template string interpolation resolved at render time. catalog.prompt() generates system prompts from the schema template with optional customRules arrays. Developers reach for core when bootstrapping a json-render pipeline, extending a component catalog, debugging invalid agent-generated specs, or wiring streaming compilers before specs hit a renderer.3.8kinstalls3CodegenThe codegen skill documents @json-render/codegen utilities for generating code from json-render UI trees when building custom exporters for Next.js, Remix, or other frameworks. It covers depth-first traverseSpec walks, collectUsedComponents, collectStatePaths, and collectActions helpers for spec introspection. Serialization APIs include serializePropValue, serializeProps, escapeString, and SerializeOptions for quotes and indent control. Types define GeneratedFile and CodeGenerator interfaces returning path and content file arrays. A sample generateNextJSProject function demonstrates collecting components, traversing the spec, and emitting package.json and page files. Installation uses npm install @json-render/codegen. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for json-render codegen pipelines in agent-driven UI generation workflows. The workflow follows the source SKILL.md contract with progressive reference loading, clear trigger phrases, and practical steps developers can apply directly in agent sessions.2.8kinstalls4McpThe mcp skill. MCP Apps integration for json-render. Use when building MCP servers that render interactive UIs in Claude, ChatGPT, Cursor, or VS Code, or when integrating json-render with the Model Context Protocol. creates an that registers a tool and a HTML resource 2. The tool description includes the catalog prompt so the LLM knows how to generate valid specs 3. The HTML resource is a Vite-bundled single-file React app with json-render renderers 4. The workflow follows the source SKILL.md contract with progressive reference loading, clear trigger phrases, and practical steps developers can apply directly in agent sessions. The workflow follows the source SKILL.md contract with progressive reference loading, clear trigger phrases, and practical steps developers can apply directly in agent sessions. The workflow follows the source SKILL.md contract with progressive reference loading, clear trigger phrases, and practical steps developers can apply directly in agent sessions.2.8kinstalls5Next@json-render/next is a Next.js renderer that transforms JSON specs into complete multi-page Next.js applications with automatic route handling, layout composition, SSR, and metadata generation. Developers use it when building AI-generated applications, creating multi-page sites from structured data, or implementing spec-driven development patterns. Key workflows include defining specs with layouts and routes, configuring server-side data loaders for async content, and wiring up catch-all route files that leverage generateMetadata and generateStaticParams for SEO and static optimization.2.4kinstalls6DevtoolsThe devtools skill is designed for add a drop-in json-render inspector for spec trees, state, actions, and live stream patches. @json-render/devtools A floating inspector panel for json-render apps. Framework-agnostic core + per-framework adapters (React, Vue, Svelte, Solid). Invoke when the user debugs json-render specs, runtime state, dispatched actions, or stream patches.2.2kinstalls7DirectivesThe directives skill pre-built custom directives for json-render formatting math string manipulation and i18n Use when working with json-render directives defining custom directives with defineDirective or adding format math concat count truncate pluralize join or t to specs json-render directives Pre-built custom directives for json-render core Drop them into your catalog and renderer to add formatting math string manipulation and i18n Quick Start typescript import standardDirectives from json-render directives Wire into prompt generation const prompt catalog prompt directives standardDirectives Wire into the renderer React example import JSONUIProvider Renderer from json-render react JSONUIProvider registry registry directives standardDirectives Renderer spec spec registry registry JSONUIProvider To add factory directives like createI18nDirective spread the array typescript import standardDirectives createI18nDirective from json-render directives const directives standardDirectives createI18nDirective config Defining Custom Directives Use defineDirective from json-render core typescript import defineDirective resolvePropValue from json-render core import z from zod const doubleD.2.1kinstalls8React PdfThe react-pdf skill renders PDF documents from JSON specs via @json-render/react-pdf built on @react-pdf/renderer. Installation uses @json-render/core plus @json-render/react-pdf npm packages. Quick start shows Spec objects with root element, Document and Page types, and renderToBuffer export for buffers, streams, or files. Agents map JSON element trees to PDF components, handle invoice or report templates, and integrate server-side PDF generation in Node or edge handlers. Use when generating PDFs from JSON specs, working with @json-render/react-pdf, or rendering structured documents programmatically. Renders PDF from JSON Spec via @json-render/react-pdf Built on @react-pdf/renderer with renderToBuffer export Install @json-render/core and @json-render/react-pdf together Spec root/elements tree maps Document, Page, and child components Supports buffers, streams, and file output for server generation react-pdf generates PDF documents from JSON specs using @json-render/react-pdf PDF buffer or file from Spec JSON using renderToBuffer and react-pdf components User mentions @json-render/react-pdf, JSON spec PDF, or renderToBuffer Teams generating invoices, reports, or PDFs from structur.1.7kinstalls9React Three FiberThe react three fiber skill React Three Fiber 3D renderer for json-render. Use when working with @json-render/react-three-fiber, building 3D scenes from JSON specs, rendering meshes/lights/models/environments, or integrating Three.js with json-render catalogs. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include `Box` -- width, height, depth, material; `Sphere` -- radius, widthSegments, heightSegments, material; `Cylinder` -- radiusTop, radiusBottom, height, material; `Cone` -- radius, height, material. Reference commands include import { defineCatalog } from "@json-render/core";; import { schema } from "@json-render/react/schema";. Use when developers or agents need structured guidance for react three fiber tasks with evidence grounded in the bundled SKILL.md rather than generic advice. `Box` -- width, height, depth, material `Sphere` -- radius, widthSegments, heightSegments, material `Cylinder` -- radiusTop, radiusBottom, height, material `Cone` -- radius, height, material `Torus` -- radius, tube, material `Plane` -- width, height, material `Capsule` -- radius, length, material `AmbientLight.1.6kinstalls10ShadcnThe shadcn skill Pre-built shadcn/ui components for json-render. Use when working with @json-render/shadcn, adding standard UI components to a catalog, or building web UIs with Radix UI + Tailwind CSS components. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include **Card** - Container with optional title, description, maxWidth, centered; **Stack** - Flex container with direction, gap, align, justify; **Grid** - Grid layout with columns (number) and gap; **Separator** - Visual divider with orientation. Reference commands include Add custom components alongside standard ones:. Use when developers or agents need structured guidance for shadcn tasks with evidence grounded in the bundled SKILL.md rather than generic advice. **Card** - Container with optional title, description, maxWidth, centered **Stack** - Flex container with direction, gap, align, justify **Grid** - Grid layout with columns (number) and gap **Separator** - Visual divider with orientation **Tabs** - Tabbed navigation with tabs array, defaultValue, value **Accordion** - Collapsible sections with items array and type (single/multi.1.6kinstalls11ZustandThe zustand skill is designed for zustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand. @json-render/zustand Zustand adapter for json-render's StateStore interface. Wire a Zustand vanilla store as the state backend for json-render. Invoke when the user integrating json-render with Zustand for state management via @json-render/zustand.1.3kinstalls12React NativeThe react-native skill documents @json-render/react-native, a renderer converting JSON specs into native mobile component trees with data binding, visibility conditions, actions, and dynamic props. Quick start uses defineCatalog with react-native schema, standardComponentDefinitions, standardActionDefinitions, defineRegistry for custom components, and Renderer wrapped in StateProvider, VisibilityProvider, and ActionProvider. Standard layout components include Container, Row, Column, ScrollContainer, SafeArea, Pressable, Spacer, and Divider. Content covers Heading, Paragraph, Label, Image, Avatar, Badge, and Chip. Inputs include Button, TextInput, Switch, Checkbox, Slider, and SearchBar. Feedback and composite components span Spinner, ProgressBar, Card, ListItem, and Modal bottom sheet. Visibility syntax supports $state paths with eq, not, and AND arrays. Pressable plus setState pattern builds interactive tab bars without custom action handlers. Custom components extend the catalog with zod props while standard ones remain built-in. Use when working with @json-render/react-native, AI-generated mobile specs, or mobile component catalogs from JSON.1.3kinstalls13RemotionThe remotion skill documents @json-render/remotion, a renderer that converts JSON timeline specs into Remotion video compositions. Developers import the Renderer component and Player from @remotion/player, passing a TimelineSpec with composition fps, width, height, and durationInFrames plus tracks, clips, and optional audio. Standard catalog components include TitleCard, TypingText, ImageSlide, SplitScreen, QuoteCard, StatCard, TextOverlay, and LowerThird via defineCatalog with standardComponentDefinitions and transition or effect definitions. Custom clips extend the catalog with zod props and are passed through Renderer inputProps components map. Timeline JSON defines composition metadata, enabled tracks, clip component names, props, from frame, and durationInFrames. Use when building video catalogs or rendering AI-generated timelines with json-render and Remotion.1.1kinstalls14ImageThe image json-render skill converts JSON UI specs into SVG and PNG images using the @json-render/image package powered by Satori. It supports OG image generation, social cards, and AI-generated visual assets from declarative JSON rather than hand-coded canvas logic. Agents define component registries and layout specs then render raster or vector outputs for sharing pipelines. The skill pairs with other json-render renderers for multi-target content from one spec source. JSON specs to SVG and PNG via @json-render/image. Satori-powered OG images and social cards. Declarative layout specs instead of canvas code. AI-generated image rendering from JSON definitions. Pairs with json-render multi-renderer ecosystem. Render JSON specs into SVG and PNG images via @json-render/image and Satori.1.1kinstalls15Remotion Best PracticesThe remotion-best-practices skill documents best practices for Remotion video creation in React including composition structure, timing, assets, rendering performance, and preview workflows. Agents building programmatic video with json-render or Remotion directly follow conventions for sequences, spring animations, and server-side render settings. Guidance helps avoid jank, memory blowups, and incorrect frame timing in generated marketing or social videos. The skill tags remotion, video, react, animation, and composition concerns. Remotion React video composition best practices. Sequence timing, springs, and asset management guidance. Preview and server-side render performance patterns. Programmatic marketing and social video workflows. Pairs with json-render Remotion renderer ecosystem. Apply Remotion best practices for React-based programmatic video creation and composition.1kinstalls16React EmailThe react-email json-render skill turns JSON specs into HTML or plain-text emails using @react-email/components and @react-email/render through the @json-render/react-email package. Agents build transactional or marketing email layouts declaratively from specs shared with web renderers in the json-render family. It supports responsive email components, preview workflows, and plain-text fallbacks for deliverability. The skill triggers when generating emails from JSON specs or integrating react-email with json-render pipelines. JSON specs to HTML or plain-text emails. @json-render/react-email with @react-email/components. Transactional and marketing email from declarative specs. Plain-text fallback generation for deliverability. json-render multi-target spec sharing with web renderers. Render JSON specs to HTML or plain-text emails via @json-render/react-email.941installs17VueThe vue json-render skill provides a Vue 3 renderer that converts JSON specs into Vue component trees with data binding, visibility rules, and actions via @json-render/vue. Agents define component registries mapping spec types to Vue SFCs or script components then render AI-generated layouts in Vue apps. It supports the json-render pattern of declarative UI from specs shared across React, Vue, and email renderers. The skill triggers when building Vue UIs from JSON or working with @json-render/vue packages. Vue 3 renderer for json-render JSON specs. @json-render/vue component registry and data binding. Visibility rules and actions on spec-driven trees. AI-generated Vue layouts from declarative JSON. Multi-renderer json-render ecosystem for Vue targets. Render Vue 3 UIs from JSON specs with @json-render/vue component registries.936installs18InkThe ink skill documents @json-render/ink, an Ink terminal renderer that converts JSON specs into interactive terminal component trees. It uses defineCatalog with the Ink schema, standardComponentDefinitions, and standardActionDefinitions from the catalog package. Custom components extend the catalog via defineRegistry while standard components are built-in. Specs use a flat element map with a root key pointing to the top-level element, supporting data binding, visibility conditions, actions, and dynamic props. Quick start covers JSONUIProvider wrapping a Renderer with spec and registry props. The skill explains component catalog structure, action definitions, and rendering patterns for AI-generated terminal UIs. Use when building terminal UIs from JSON, working with @json-render/ink, or creating terminal component catalogs.891installs19Skill CreatorGuides end-to-end skill authoring: gather concrete usage examples, plan reusable scripts/references/assets, initialize via init_skill.py, write imperative SKILL.md with triggers only in YAML description, and package with package_skill.py validation. Enforces concise context, degrees of freedom matched to task fragility, and three-level progressive disclosure (metadata, body, bundled resources). Covers anatomy rules (no README clutter), reference splitting patterns, and iteration after real usage. Includes init/package scripts and references for workflows and output patterns.886installs20SvelteDocuments @json-render/svelte: a Svelte 5 renderer converting JSON specs into component trees via Renderer and JsonUIProvider. Covers defineCatalog with zod props, BaseComponentProps with emit/children/bindings, defineRegistry with actions, element-tree spec format, visibility conditions, and built-in setState actions. Explains dynamic props ($state, $bindState, $cond), getBoundProp for two-way binding, context helpers, and createUIStream/createChatUI for streaming AI-generated UI. Components map spec types to Svelte files through a registry object.867installs21ReduxThe redux skill documents @json-render/redux, a StateStore adapter that connects json-render to Redux or Redux Toolkit. It covers installing @json-render/redux with core, react, and redux or @reduxjs/toolkit, defining a slice with replaceUiState reducer, creating reduxStateStore with store, selector, and dispatch callbacks, and wrapping the tree in StateProvider. The selector picks the json-render slice from the Redux tree while dispatch replaces the selected slice with the next model. Use when AI-generated JSON specs must sync with existing Redux state or when teams standardize on RTK slices for UI models.762installs22JotaiThe jotai skill explains @json-render/jotai, wiring a writable Jotai atom as json-render StateStore through jotaiStateStore. Installation pairs @json-render/jotai with core, react, and jotai. Basic usage creates uiAtom, passes it to jotaiStateStore, and wraps StateProvider. For apps with an existing Jotai Provider, pass the shared createStore instance so json-render and useAtom share state. API documents required atom option and optional store for custom Jotai providers. Use when JSON-driven UIs should participate in atomic Jotai state alongside React components.753installs23Shadcn SvelteThe shadcn-svelte skill documents @json-render/shadcn-svelte, providing 36 pre-built shadcn-svelte components for json-render Svelte apps on Svelte 5 and Tailwind CSS. Two entry points split server-safe catalog schemas at /catalog from Svelte implementations in the main package. Usage explicitly picks needed definitions rather than spreading all components, pairing shadcnComponentDefinitions in defineCatalog with matching shadcnComponents in defineRegistry. Renderer setup wraps JsonUIProvider and Renderer with spec and registry props. Component families include layout Card Stack Grid, navigation Tabs Accordion, forms Input Select, and feedback Alert Dialog. Use when generating JSON specs for Svelte web UIs with shadcn-svelte styling.745installs24XstateThe xstate skill documents @json-render/xstate, connecting XState Store atoms to json-render StateStore through xstateStoreStateStore. Requires @xstate/store v3 plus json-render core and react packages. Usage creates an atom with createAtom, wraps it with xstateStoreStateStore, and supplies StateProvider to the React tree. The adapter exposes json-render reads and writes through the XState Store atom model for spec-driven UIs that share state with Stately patterns. Use when teams already model UI state with @xstate/store and want JSON-rendered components on the same atom.708installs25SolidThe solid skill covers @json-render/solid for rendering JSON specs into Solid component trees with fine-grained reactivity. Quick start wraps JSONUIProvider and Renderer with a registry and optional spec prop. Catalog creation uses defineCatalog with the Solid schema and zod prop definitions for components and actions. Components receive ComponentRenderProps with element, children, onAction, and state bindings. Registry pairs catalog definitions with Solid implementations via defineRegistry. Troubleshooting addresses reactivity pitfalls specific to Solid versus React adapters. Use when building SolidJS apps that render AI-generated JSON UI specs.702installs26YamlThe yaml skill documents YAML as a spec format for json-render alongside JSON, covering schema validation, catalog definition, and registry wiring for YAML-driven UIs. Agents learn to structure flat element maps, root keys, actions, visibility conditions, and data bindings in YAML syntax for human-editable specs. Integration patterns mirror JSON adapters with parsers that load YAML into the same Spec type consumed by Renderer providers. Use when teams prefer YAML for AI-generated or hand-edited UI specs in json-render pipelines.684installs