Рендеринг React-компонентов из JSON-спецификаций

★ 8.1 · web-development

React Component Development is a Claude Code skill that converts JSON specifications into React component trees using the @json-render/react package. Reach for it when you want to render UIs from data without writing JSX by hand, when an AI pipeline needs to emit UI specs that render directly in the browser, or when you're building a typed component catalog for a low-code or form-builder system. The core API includes defineRegistry to wire up component implementations, defineCatalog with Zod prop schemas, and a Renderer component that accepts a spec and a registry. Features include named slots (default, header, footer), conditional visibility via $state/$and/$or expressions, two-way state binding through $bindState and $bindItem, dynamic prop expressions ($cond, $template, $computed), and external store adapters (Redux, Zustand, XState) passed to StateProvider via the store prop. Stack: TypeScript, React, Zod; installed as an npm package. The direction is JSON-spec-to-React rendering, not the reverse — it does not serialize existing React trees into JSON. Works well for AI-generated forms, dynamic catalogs, and low-code builders; not the right fit if your component layer is Vue, Svelte, or another framework, or if there are no JSON specs to drive the rendering.