skills.rest
hasna
hasnaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

codegen

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

Updated Jun 24, 2026
Search Tags:#frontend#code generation#cross-platform#json-render#ui specs#code exporter#prop serialization
One-click install
npx skills add https://github.com/hasna/render --skill codegen-hasna
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: codegen
Source: https://github.com/hasna/render/tree/main/skills/codegen
Command: npx skills add https://github.com/hasna/render --skill codegen-hasna

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the tedious, error-prone manual work of converting json-render UI specs into framework-specific code for React, Vue, Svelte, and other platforms, saving development time and ensuring consistency across projects.

Core Features & Use Cases

  • Spec Analysis Tools: Traverse UI specs to collect used components, referenced state paths, and triggered actions to inform code generation.
  • Prop Serialization: Automatically convert spec prop values into valid, escaped framework-specific code (JSX, HTML, etc.) without manual formatting.
  • Custom Exporter Building: Use pre-built utilities and type definitions to create code generators for any framework (Next.js, Remix, Vue, Svelte) from your json-render catalog.
  • Use Case: Imagine you have a json-render e-commerce product page spec. Use this Skill to generate the full set of framework-specific component files, page routes, and type definitions in one go, instead of manually writing each piece of code.

Quick Start

Use the codegen skill to generate a complete Next.js project structure from your attached json-render dashboard UI spec.

Frequently Asked Questions about codegen

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

FAQPage Schema
How do I generate React or Vue code from a UI specification?▼

Generate framework-specific production code from json-render UI specification trees using tree traversal, prop serialization, and code generator interface utilities to output valid, escaped, schema-compliant code for React, Vue, Svelte, and Solid.

Can I build a custom code exporter for Svelte or Next.js?▼

Yes, you can build custom code exporters for Svelte, Next.js, Remix, or React Native by leveraging pre-built utilities and type definitions to create code generators from your json-render catalog.

How does prop serialization work when converting UI specs to code?▼

Prop serialization automatically converts spec prop values into valid, escaped framework-specific code, such as JSX or HTML, eliminating manual formatting and ensuring schema compliance during code generation.

Does this code generation approach work for cross-platform frontend development?▼

Yes, this code generation approach supports cross-platform frontend development workflows, providing utilities to output valid, schema-compliant code for React, Vue, Svelte, Solid, React Native, Next.js, and Remix.

What is the best way to convert a json-render dashboard spec into a complete project structure?▼

The best way to convert a json-render dashboard spec into a complete project structure is to apply code generation utilities that analyze used components, referenced state paths, and triggered actions to build framework-specific files and routes.

Related Skills

Explore More Software Engineering Skills→
hasnahasna

svelte

Convert JSON UI specifications into Svelte 5 component trees.

Official
Intermediate
BrunoAMSilvaBrunoAMSilva

openapi-to-application-code

Generate framework-specific application scaffolds from OpenAPI specifications.

Community
Advanced
hasnaxyzhasnaxyz

codegen

Generate framework-ready files and serialized props from json-render UI specifications.

Official
Intermediate
pch007pch007
1

codegen

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

Community
Advanced