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

★ 8.1 · vibe-coding

Разработка на Svelte — это скилл для Claude Code, который превращает JSON-спецификации в дерево Svelte-компонентов через рендерер @json-render/svelte на базе Svelte 5. Берут, когда нужно собрать UI из декларативного JSON без ручной вёрстки каждого экрана, когда AI-агент генерирует спецификацию интерфейса и её надо сразу отобразить, или когда строится каталог типовых компонентов с описанием пропсов и валидацией схемы. Внутри — компоненты `Renderer` и `JsonUIProvider`, реестр компонентов через `defineRegistry`, каталог через `defineCatalog` с Zod-схемами, двустороннее связывание состояния (`$bindState`, `$bindItem`), событийная система через `emit`, условная видимость элементов и встроенные экшены (`setState`, `pushState`, `pop`). Контексты `StateContext`, `ActionContext`, `VisibilityContext`, `ValidationContext` компонуются через `JsonUIProvider`. Стек: TypeScript, Svelte 5, пакет `@json-render/svelte` — устанавливается через npm, встраивается в любой Svelte-проект. Направление — рендеринг JSON в UI, а не генерация JSON из компонентов. Подойдёт для проектов, где структура интерфейса приходит динамически — от AI или бэкенда; не подходит, если спецификации нет и UI жёстко зафиксирован.