codegen

Generate source code from json-render UI specs for Next.js and Remix exporters.

15.9k|859|Updated Jan 14, 2026
One-click install
npx skills add https://github.com/vercel-labs/json-render --skill codegen-vercel-labs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: codegen
Source: https://github.com/vercel-labs/json-render/tree/main/skills/codegen
Command: npx skills add https://github.com/vercel-labs/json-render --skill codegen-vercel-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

## What problem does it solve? Code generation utilities for json-render UI trees that automate exporting code from UI specs, reducing manual coding effort.

## Core Features & Use Cases

  • Tree traversal and spec analysis to extract components, states, and actions.
  • Serialization helpers to convert props and values into code-ready formats.
  • Exporter scaffolding to generate framework-specific boilerplate for Next.js, Remix, or other stacks.
  • Custom code exporters to tailor outputs for your project templates.

### Quick Start Run the codegen tool on a json-render spec to generate initial code scaffolds and exporter-ready artifacts.

Frequently Asked Questions about codegen

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate source code from a json-render UI spec?

To generate source code from a json-render UI spec, use codegen utilities to traverse the spec tree, serialize props, and produce typed GeneratedFile artifacts for your framework.

Can I scaffold framework-specific exporters for Next.js and Remix using UI specs?

Yes, you can scaffold framework-specific exporters for Next.js and Remix by applying codegen utilities to json-render UI specs to generate boilerplate and framework-ready code artifacts.

How does spec traversal collect used components for code generation?

Spec traversal analyzes the json-render UI tree to extract and collect used components, states, and actions, converting them into code-ready formats for serialization.

What is the best way to automate exporting code from UI specs without manual coding?

Automating code exports from UI specs is best handled by code generation utilities that traverse json-render trees, serialize values, and produce exporter-ready artifacts, reducing manual effort.

Do I need specific dependencies to produce typed outputs across different ecosystems?

No specific dependencies are required. The codegen utilities operate independently to traverse json-render specs, serialize props, and produce typed outputs across frameworks like Next.js and Remix.