Vue 3 — динамический UI из JSON-спецификаций

★ 8.1 · vibe-coding

Vue.js Development is a Claude Code skill that wires @json-render/vue — a Vue 3 renderer from the json-render ecosystem — converting JSON specifications into a live Vue component tree with data binding, conditional rendering, and an action system. Reach for it when you need to generate UI dynamically from JSON: building forms or dashboards whose structure is defined at runtime, rendering AI-generated interface specs without hardcoding layouts, or keeping UI specs decoupled from component implementation. Under the hood: `defineRegistry` maps catalog entries to h()-based render functions; `Renderer` mounts the spec tree; `StateProvider`, `ActionProvider`, `VisibilityProvider`, and `ValidationProvider` handle state, events, and validation; composables (`useStateStore`, `useAction`, `useBoundProp`, `useUIStream`) expose fine-grained reactive access. Supports named slots, dynamic prop expressions (`$state`, `$bindState`, `$cond`, `$computed`), built-in actions (`setState`, `pushState`, `removeState`), spec streaming via `useUIStream`/`useChatUI`, and external store integration with Pinia or VueUse. Install via npm: `npm install @json-render/vue @json-render/core zod`; peer dependencies are Vue ^3.5.0 and zod ^4.0.0. The direction is rendering JSON specs into Vue — not authoring those specs (AI generation logic lives on the other side).