Сборка UI на Svelte из JSON-спецификаций

★ 8.1 · vibe-coding

Svelte Development is a Claude Code skill that turns JSON specs into Svelte 5 component trees using the @json-render/svelte renderer. Reach for it when an AI agent produces a UI spec that needs to be rendered immediately, when you want to build screens from declarative JSON without manually coding each layout, or when you need a typed component catalog with validated props and schemas. The skill centers on `Renderer`, `JsonUIProvider`, `defineRegistry` and `defineCatalog` backed by Zod schemas, with two-way state binding (`$bindState`, `$bindItem`), a named-event system via `emit`, conditional element visibility, and built-in actions (`setState`, `pushState`, `pop`). Contexts — `StateContext`, `ActionContext`, `VisibilityContext`, `ValidationContext` — are composed through `JsonUIProvider`. Stack: TypeScript, Svelte 5, the `@json-render/svelte` npm package; drops into any Svelte project via standard install. The direction is JSON-to-UI rendering, not extracting JSON from existing components. Well-suited for projects where interface structure arrives dynamically from an AI pipeline or backend; not the right fit when the UI is fully static and hand-coded upfront.