Skip to main content
affpapa.org
RU EN
skill CX Codex

json-render-generative-ui — Claude Code skill: how to install

Guides AI agents in creating generative UI via json-render, converting structured JSON specs into safe components across React, Vue, or PDF.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add reason-machines/trending-skills --skill json-render-generative-ui -a claude-code
Open on GitHub

What json-render-generative-ui does

The skill equips coding assistants with guidelines for implementing Generative UI via the json-render framework. Instead of writing raw JSX or template strings, the model returns a flat JSON spec containing element types, properties, and relationships.

Three concepts govern the process: catalogs, registries, and renderers. You define accepted UI elements with Zod validation in a catalog. The registry then binds each schema key to an implementation. Supported platforms include React, Vue, Svelte, Solid, React Native, Remotion video, and react-pdf.

Rendering fails if an element type is omitted from the registry. You must install @json-render/core and the platform adapter package in your project beforehand.

What it helps with

  • restrict generated layouts to an approved component catalog
  • render AI-produced JSON trees in React or Svelte
  • output generative component structures into PDF or video
  • handle user events via configured catalog actions

Example prompts for the agent

  • Create a json-render component catalog with cards and action buttons
  • Configure a React renderer to display items from a JSON spec
  • Set up a PDF generation pipeline using json-render and react-pdf

How to install json-render-generative-ui

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill json-render-generative-ui -a claude-code

2Manually: put the files in place

~/.claude/skills/json-render-generative-ui/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/json-render-generative-ui/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about json-render-generative-ui

How to install json-render-generative-ui in Claude Code?

Install the skill using npx skills add reason-machines/trending-skills --skill json-render-generative-ui -a claude-code.

What is json-render-generative-ui?

It instructs AI models to emit structured JSON specifications instead of raw markup, ensuring predictable rendering into frontend components.

Which UI targets are compatible with json-render?

It supports React, Vue, Svelte, Solid, React Native, email rendering, Remotion video, and PDF documents.

Similar skills

Everything for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set139

translate-book-parallel Turns a full book in PDF, DOCX or EPUB into another language. Each slice of text gets its own context window, so a long file does not get cut short. CX Codex +1 1,300installs toon-format Encodes JSON data into compact TOON syntax to trim prompt tokens by roughly 40%. Helps agents format inputs efficiently for language models. CX Codex +1 1,300installs autoresearch-genealogy A skill for AI-assisted genealogy research: it structures searches, source checks, document notes, and family-tree work in Claude Code. CX Codex +1 1,300installs karpathy-jobs-bls-visualizer This skill scrapes Occupational Outlook Handbook data, scores occupations with an LLM and renders an interactive jobs treemap. CX Codex +1 1,300installs modly-image-to-3d This skill walks your agent through installing Modly, a desktop app that turns a photo into a 3D mesh on your own GPU — no cloud, no API keys. CX Codex +1 1,300installs git-city-3d-github-visualization A skill for building on Git City, a project that turns GitHub profiles into 3D pixel-art buildings with Next.js and Three.js. CX Codex +1 1,300installs codex-autoresearch-loop Runs an autonomous edit-test-revert loop against measurable repository metrics. It stacks working changes in git and rolls back regressions without manual supervision. CX Codex +1 1,200installs openhanako-personal-ai-agent This skill guides OpenHanako setup as a personal AI agent with memory, personality, custom skills, and task delegation. CX Codex +1 1,200installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor