core
The core package provides schema definition, catalog mapping, and spec streaming utilities for json-render. Build type-safe component and action definitions, generate AI prompts, and handle dynamic prop expressions with state binding and visibility conditions.
The core package lets you define schemas and catalogs for json-render UI generation with AI prompt support.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-08
The core package lets you define schemas and catalogs for json-render UI generation with AI prompt support. The core package provides schema definition, catalog mapping, and spec streaming utilities for json-render. Build type-safe component and action definitions, generate AI prompts, and handle dynamic prop expressions with state binding and visibility conditions.
Use it when
- json-render core supports spec streaming through JSONL compilation, allowing you to generate AI prompts and refine specs incrementally.
- The core package provides utilities to generate AI prompts directly from your schema definitions.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
vercel-labs/json-render/core · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I define schemas and catalogs in json-render core?
The core package lets you define JSON schemas for UI/spec generation with catalogs that map components and actions. You create type-safe component and action definitions, then use catalogs to organize them for dynamic UI rendering. This foundation enables state-driven spec generation and conditional rendering based on your application's needs.
What is json-render spec streaming and how does it work?
json-render core supports spec streaming through JSONL compilation, allowing you to generate AI prompts and refine specs incrementally. The streaming approach lets you build dynamic, state-driven UI specs with conditional rendering, making it easy to integrate AI-powered refinement modes into your workflow.
How can I create AI prompts from a schema using core?
The core package provides utilities to generate AI prompts directly from your schema definitions. By leveraging your component and action catalogs, you can automatically create structured prompts that guide AI models in generating or refining UI specs, streamlining the AI-assisted design process.
How do dynamic prop expressions and state binding work in core?
core enables dynamic prop expressions through state binding and visibility conditions. You define computed functions and template interpolation that reference state values, allowing props to update reactively. Combined with state watchers and action triggers, this creates fully responsive, state-driven UI specifications.
What validation capabilities does json-render core provide?
The core package includes spec validation with cross-field checks using Zod validation for component props. It supports form validation, auto-fix capabilities, and ensures your specs conform to schema constraints before rendering, maintaining type safety throughout your UI generation pipeline.
Can core integrate with external state management systems?
Yes, core supports integration with external state management through reactive watchers and action triggers. You can bind your specs to external state stores, enabling seamless synchronization between your UI specifications and application state while maintaining full reactivity and control.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
@json-render/core
Core package for schema definition, catalog creation, and spec streaming.
Key Concepts
- Schema: Defines the structure of specs and catalogs (use
defineSchema) - Catalog: Maps component/action names to their definitions (use
defineCatalog) - Spec: JSON output from AI that conforms to the schema
- SpecStream: JSONL streaming format for progressive spec building
Defining a Schema
import { defineSchema } from "@json-render/core";
export const schema = defineSchema((s) => ({
spec: s.object({
// Define spec structure
}),
catalog: s.object({
components: s.map({
props: s.zod(),
description: s.string(),
}),
}),
}), {
promptTemplate: myPromptTemplate, // Optional custom AI prompt
});
Creating a Catalog
```typescript import { defineCatalog } from "@json-render/core"; import { schema } from "./schema"; import { z } from "zod";
export const
(truncated - see the full file via the links below)
File tree — 1 file
skills/core/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Define and manage JSON schemas for UI/spec generation with catalogs”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This adapter bridges Jotai atoms into json-render's state layer, letting you manage UI state through Jotai's atom system. Pass an atom and optional Jotai store to the jotaiStateStore function, then wrap your json-render components in StateProvider to route all state reads and writes through Jotai.
This adapter bridges XState Store atoms into json-render's StateStore interface, letting you manage application state through @xstate/store. Pass an atom to the adapter and wrap your json-render components with the resulting store provider.
This adapter bridges Zustand and json-render by implementing the StateStore interface, letting you use a Zustand vanilla store as the backing state layer. Configure it with your store, optionally select a nested slice, and pass it to json-render's StateProvider to handle all state reads and writes through Zustand.
This skill guides you through building examples for Vercel's AI SDK functions—from text generation and streaming to structured outputs, agents, embeddings, and multimodal tasks. Use it to validate provider support, demonstrate features, or create test fixtures by following organized templates and running examples with the provided utility helpers.
This adapter bridges Redux (or Redux Toolkit) with json-render's state management layer, letting you use your Redux store as the backing state for dynamic UI generation. Configure it with your store instance, a selector for your UI slice, and a dispatch function to sync state changes back through Redux.
react-three-fiber bridges React and Three.js, letting you compose 3D scenes declaratively using familiar component patterns. Define complex 3D environments through JSON specifications and React's component model, then render them efficiently in the browser. Perfect for building interactive visualizations, games, and immersive web experiences.
More skills Add Provider Package (NOASSERTION)