codegen Skill (vercel-labs json-render) for Claude Code: What It Does and How to Install It

Teaches the agent the @json-render/codegen API for turning a json-render UI spec into code.

Installs: 8.9K; on skills.sh
Stars: 18.9K; on GitHub
Updated: Nov 2026; last repo commit

This is an API reference the agent reads when you work with @json-render/codegen. It covers walking a spec depth-first with traverseSpec, collecting the components, state paths and actions a spec uses, and serializing props into JSX attributes. It ends with a sketch of a custom generator that returns a list of files for a Next.js project.

It starts from one command, npm install @json-render/codegen, run in your project. The skill folder holds only SKILL.md. The json-render README lists codegen as one of its packages, described as utilities for generating code from json-render UI trees.

Good for

Developers using json-render who want to generate code from a UI spec
Teams building a custom code exporter for Next.js, Remix or another framework

Install codegen

Claude Code

Copy this prompt.

Install the codegen skill in Claude Code. Run this command:

npx skills add https://github.com/vercel-labs/json-render --skill codegen

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for @json-render/codegen.

Sections in SKILL.md

Installation
Tree Traversal
Serialization
SerializeOptions
Types
Building a Custom Generator

Key facts

Author: vercel-labs (repo owner of json-render)
License: Apache-2.0
Installs on skills.sh: 8,887 (Nov 2, 2026)
GitHub stars: 18,872 for the whole json-render repo (Nov 2, 2026)
Last repo commit: Nov 1, 2026
Audits on skills.sh: Gen Agent Trust Hub: pass, Socket: pass, Snyk: pass
What it includes: 1 file: SKILL.md
Needs: The @json-render/codegen npm package in your project

What it includes

npm install @json-render/codegen in the project
Runs code · Installation
traverseSpec, collectUsedComponents, collectStatePaths and collectActions
traverseSpec walks the spec depth-first and calls back with the element, key, depth and parent.
Read · Tree traversal
serializePropValue, serializeProps and escapeString turn props into code text
SerializeOptions sets quotes (single or double) and indent.
Try: “Serialize these props as JSX attributes”
Read · Serialization
GeneratedFile and CodeGenerator, whose generate(spec) returns files
Read · Types
A sketch of generateNextJSProject(spec) that collects components and state paths
The sketch leaves the file contents as comments for you to fill in.
Try: “Write a generator that exports this json-render spec as a Next.js page”
Write · Custom generator

From the official docs

Permissions

Low risk

The agent adds an npm package and writes generator code in your project. Review the dependency change and the new files before you commit.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It adds an npm dependency
SKILL.md starts with npm install @json-render/codegen. Review the change to package.json and the lockfile. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only switch exists.
Sign-in and keys	SKILL.md names no key or token.
Scopes	Installs the @json-render/codegen npm package in your project Writes generator code in your project when you ask for an exporter

Questions

What does the codegen skill do?

It gives the agent the API of the @json-render/codegen package. With it the agent can walk a json-render spec, collect what it uses and write code that generates files from the spec.

How do I install it?

Use the install box at the top of this page. The skill is one SKILL.md file. The package it describes is installed separately in your project with npm.

What is json-render?

It is the project this skill belongs to. Its README lists @json-render/codegen among its packages, described as utilities for generating code from json-render UI trees.

Does it need an API key?

No key is named in SKILL.md.

Is it safe?

It bundles no scripts. It does tell the agent to install an npm package into your project and to write generator code there, so review the dependency change and the new files.

Is it only for Next.js?

No. SKILL.md calls the utilities framework-agnostic and names Next.js, Remix and other frameworks as targets. Its example generator is for Next.js.

Information

updated Nov 2, 2026

Repository: vercel-labs/json-render
Folder: skills/codegen

vercel-labs/json-render skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

codegen SKILL.md · github.com
json-render README · github.com