codegen

Generate framework-specific code exporters from json-render UI trees.

1|Updated Jun 19, 2026
One-click install
npx skills add https://github.com/pch007/json-render --skill codegen-pch007
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: codegen
Source: https://github.com/pch007/json-render/tree/main/skills/codegen
Command: npx skills add https://github.com/pch007/json-render --skill codegen-pch007

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generates code from json-render UI trees to accelerate building reliable, framework-specific exporters and tooling.

Core Features & Use Cases

  • Tree-traversal helpers to inspect specs and extract used components, state paths, and actions.
  • Serialization utilities to convert spec props into code-friendly representations for multiple frameworks.
  • Capability to build custom generators that output Next.js, Remix, or other framework artifacts from UI specs.

Quick Start

Generate a Next.js project scaffold from a json-render spec using the codegen utilities.

Frequently Asked Questions about codegen

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

FAQPage Schema
How do I generate Next.js code from a UI spec?▼

To generate Next.js code from a UI spec, you use codegen utilities to transform json-render UI trees into runnable source files. It provides serialization and traversal helpers to extract components and output framework-specific artifacts.

What is the best way to build a custom code exporter for Remix?▼

The best way to build a custom code exporter for Remix is using codegen to inspect json-render UI specs. It helps collect used components, state paths, and actions, serializing props to create framework-specific exporters.

How do json-render UI trees transform into runnable source files?▼

json-render UI trees transform into runnable source files through codegen's tree-traversal and serialization utilities. These tools inspect specs, extract used components, and convert props into code-friendly representations for generation.

Can I use codegen to extract state paths and actions from a UI spec?▼

Yes, you can use codegen to extract state paths and actions from a UI spec. It provides tree-traversal helpers designed to inspect json-render UI trees and collect used components for code generation.

Does codegen support TypeScript for building framework exporters?▼

Yes, codegen supports TypeScript for building framework exporters. It provides type utilities alongside traversal and serialization helpers to inspect json-render specs and generate code for frameworks like Next.js or Remix.