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.