Agent skill · software engineering · yonatangross
json-render-catalog
json-render catalogs for AI-safe generative UI: Zod-typed components, @json-render/shadcn, YAML specs, patch/merge/diff edits. Use when defining component catalogs for AI-generated UIs.
Why this skill is useful
Provides domain-specific patterns and integration commands for json-render that AI wouldn't reliably generate on its own.
What it needs
Requires @json-render/core installed locally. About 10k tokens when loaded. Last updated 2026-08-06. 215 stars on the source repository.
What this skill does
Upstream version reference: @json-render/core 0.21.3 (2026-10-24). json-render Component Catalogs json-render (Vercel Labs, 12.9K stars, Apache-2.0) is a framework for AI-safe generative UI. AI generates flat-tree JSON (or YAML) specs constrained to a developer-defined catalog — the catalog is the contract between your design system and AI output. If a component or prop is not in the catalog, AI cannot generate it. Storybook → catalog import (#1529, 2026-04) When the project ships a Storybook setup, import the catalog from Storybook stories instead of hand-writing one. The bundled importer at scripts/storybook-to-catalog.mjs reads a @storybook/addon-mcp list-all-documentation manifest and emits a Zod-typed catalog.ts plus a components.tsx registry. Storybook becomes the single source of truth — adding a story automatically expands the AI-allowed surface; removing one shrinks it. AI safety is enforced at import: callbacks, raw object props, and z.any() are dropped. Full mapping: references/storybook-import.md. Companion fixture for testing: references/storybook-fixture.json. New in 2026-04 → 2026-10 (json-render 0.14 → 0.21) proto paths (0.21): only the setByPath, addByPath and removeByPath helpers ignore a path with a proto segment, without an error. createStateStore().set() / update() and createStoreAdapter write through immutableSetByPath, which has no guard, and no helper rejects constructor or prototype. So validate keys yourself before any state-store write: reject proto, constructor and prototype segments, and never use them as an element key, a state key or a patch path segment. RFC 6901 escaping is unchanged: write ~0 for ~ and ~1 for / inside a key. Experimental composition API (0.21): experimentalcomposeSpec and experimentalcreateEvaluator are the only new exports in @json-render/core 0.21 (verified against the 0.20.0 and 0.21.3 type definitions, no removals). They are marked experimental, so do not build a catalog workflow on them yet. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills yonatangross/json-render-catalog