Agent skill · design visual · aradotso
json-render-generative-ui
Generative UI framework that renders AI-generated JSON specs into type-safe UI components across React, Vue, Svelte, Solid, React Native, video, PDF, and email.
Why this skill is useful
Adds a framework for generating dynamic UIs from AI-generated JSON specs, enabling new capabilities in UI development.
What it needs
Requires @json-render/core, @json-render/image, @json-render/mcp, @json-render/react, @json-render/react-email, @json-render/react-native, @json-render/react-pdf, @json-render/react-three-fiber, @json-render/remotion, @json-render/solid, @json-render/svelte, @json-render/vue, @json-render/yaml, @json-render/zustand installed locally. About 9k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
json-render Generative UI Framework Skill by ara.so — Daily 2026 Skills collection. json-render is a Generative UI framework that lets AI generate dynamic interfaces from natural language prompts, constrained to a predefined component catalog. AI outputs JSON; json-render renders it safely and predictably across any platform. Installation Core Concepts Concept Description --- --- Catalog Defines allowed components and actions (the guardrails for AI) Spec AI-generated JSON describing which components to render and with what props Registry Maps catalog component names to actual render implementations Renderer Platform-specific component that takes a spec + registry and renders UI Actions Named events AI can trigger (e.g. exportreport, refreshdata) Spec Format The flat spec format uses a root key + elements map: Step 1: Define a Catalog Step 2: Define a Registry (React) Step 3: Render the Spec Generating Specs with AI (Vercel AI SDK) Streaming Specs Using Pre-built shadcn/ui Components Vue Renderer React Native Renderer PDF Generation Email Generation MCP Integration (Claude, ChatGPT, Cursor) State Management Integration YAML Wire Format Full Next.js App Router Example Common Patterns Conditional Component Availability Dynamic Props with Runtime Data Type-Safe Action Handling Troubleshooting Problem Cause Fix --- --- --- AI generates unknown component type Component not in catalog Add component to defineCatalog or update AI prompt Props validation error AI hallucinated a prop Tighten Zod schema, add .strict() or .describe() hints Renderer shows nothing root key doesn't match an elements key Check spec structure; root must reference a valid element ID Partial spec renders incorrectly Streaming not handled Use parseSpecStream utility or check for null elements before render Actions not firing onAction not passed to Renderer Pass onAction prop to <Renderer> shadcn components unstyled Missing Tailwind config Ensure @json-render/shadcn paths are in tailwind.config.js conten …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/json-render-generative-ui