From vercel-labs-json-render-1
Traverses json-render UI specs to collect components, state paths, and actions; serializes props for JSX; provides types for building custom code generators like for Next.js.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin vercel-labs-json-render-1This skill uses the workspace's default tool permissions.
Framework-agnostic utilities for generating code from json-render UI trees. Use these to build custom code exporters for Next.js, Remix, or other frameworks.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Framework-agnostic utilities for generating code from json-render UI trees. Use these to build custom code exporters for Next.js, Remix, or other frameworks.
npm install @json-render/codegen
import {
traverseSpec,
collectUsedComponents,
collectStatePaths,
collectActions,
} from "@json-render/codegen";
// Walk the spec depth-first
traverseSpec(spec, (element, key, depth, parent) => {
console.log(`${" ".repeat(depth * 2)}${key}: ${element.type}`);
});
// Get all component types used
const components = collectUsedComponents(spec);
// Set { "Card", "Metric", "Button" }
// Get all state paths referenced
const statePaths = collectStatePaths(spec);
// Set { "analytics/revenue", "user/name" }
// Get all action names
const actions = collectActions(spec);
// Set { "submit_form", "refresh_data" }
import {
serializePropValue,
serializeProps,
escapeString,
type SerializeOptions,
} from "@json-render/codegen";
// Serialize a single value
serializePropValue("hello");
// { value: '"hello"', needsBraces: false }
serializePropValue({ $state: "/user/name" });
// { value: '{ $state: "/user/name" }', needsBraces: true }
// Serialize props for JSX
serializeProps({ title: "Dashboard", columns: 3, disabled: true });
// 'title="Dashboard" columns={3} disabled'
// Escape strings for code
escapeString('hello "world"');
// 'hello \"world\"'
interface SerializeOptions {
quotes?: "single" | "double";
indent?: number;
}
import type { GeneratedFile, CodeGenerator } from "@json-render/codegen";
const myGenerator: CodeGenerator = {
generate(spec) {
return [
{ path: "package.json", content: "..." },
{ path: "app/page.tsx", content: "..." },
];
},
};
import {
collectUsedComponents,
collectStatePaths,
traverseSpec,
serializeProps,
type GeneratedFile,
} from "@json-render/codegen";
import type { Spec } from "@json-render/core";
export function generateNextJSProject(spec: Spec): GeneratedFile[] {
const files: GeneratedFile[] = [];
const components = collectUsedComponents(spec);
// Generate package.json, component files, main page...
return files;
}