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

★ 8.1 · web-development

Разработка компонентов на React — это скилл для Claude Code, который превращает JSON-спецификации в деревья React-компонентов через пакет @json-render/react. Берут, когда нужно генерировать интерфейс из данных без ручного написания JSX, когда ИИ должен отдавать готовые UI-спецификации, которые сразу рендерятся в браузере, или когда строится каталог переиспользуемых компонентов с типизированными пропсами. Внутри — defineRegistry для регистрации реализаций компонентов, defineCatalog с Zod-схемами пропсов, Renderer-компонент, принимающий spec и registry. Поддерживаются именованные слоты (default, header, footer), условная видимость через операторы $state/$and/$or, двустороннее связывание состояния через $bindState и $bindItem, динамические выражения $cond/$template/$computed, а также внешние стор-адаптеры (Redux, Zustand, XState) через StateProvider с prop store. Стек: TypeScript, React, Zod; подключается как npm-пакет. Направление — рендеринг JSON-спецификаций в React-компоненты, а не обратное преобразование React-кода в JSON. Подойдёт для low-code-конструкторов, AI-генерируемых форм и динамических каталогов; не подходит, если компоненты не на React или если JSON-спецификаций нет вовсе.