skills.rest
aashahin
aashahinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

svelte

Renders JSON specs into Svelte 5 component trees using json-render catalogs.

Updated Jun 22, 2026
Search Tags:#svelte#svelte 5#component catalog#streaming ui#json-render#ui rendering#ai-generated ui
One-click install
npx skills add https://github.com/aashahin/ai-skills --skill svelte-aashahin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte
Source: https://github.com/aashahin/ai-skills/tree/main/svelte
Command: npx skills add https://github.com/aashahin/ai-skills --skill svelte-aashahin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @json-render/svelte, @json-render/core, zod.

What problem does it solve? Building AI-generated or data-driven user interfaces in Svelte requires manually mapping JSON specifications to components. This Skill provides the patterns to render JSON specs into live Svelte 5 component trees with state, actions, and streaming support. ## Core Features & Use Cases - JSON-to-UI Rendering: Convert json-render specs into Svelte component trees using Renderer, JsonUIProvider, and a component registry. - Catalogs and Registries: Define component catalogs with Zod-validated props and wire them to Svelte components and action handlers via defineCatalog and defineRegistry. - State, Events, and Streaming: Use visibility conditions, two-way state bindings ($bindState), named event emission, and createUIStream/createChatUI for streaming AI-generated interfaces. - Use Case: Build a chat interface where an AI generates a settings panel spec, stream it with createUIStream, and render it live with your registered Card and Button components. ## Quick Start Render a JSON UI spec in my Svelte app by setting up a catalog, registry, and Renderer with my existing components.

Frequently Asked Questions about svelte

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render a JSON UI spec in Svelte?▼

Use the Renderer component from @json-render/svelte inside a JsonUIProvider, passing a spec object and a registry mapping type names to Svelte components. The spec uses an element tree format with a root key and typed elements containing props and children.

How to create a component catalog for json-render in Svelte?▼

Call defineCatalog with the Svelte schema and a components map where each entry defines Zod-validated props and a description. Then use defineRegistry to bind catalog entries to actual Svelte components and action handlers.

Does @json-render/svelte support streaming AI-generated UI?▼

Yes, createUIStream streams specs from an API endpoint and exposes spec and isStreaming reactive state for progressive rendering. createChatUI supports combined chat and UI responses from a chat endpoint.

How do I bind component props to state in json-render Svelte?▼

Use the $bindState expression in the spec for read-write state binding, and the getBoundProp helper inside components to get a reactive current value. The bindings prop maps prop names to state paths.

Can I conditionally show elements based on state in json-render?▼

Yes, elements support a visible field with conditions like $state truthy checks, eq equality, not, $and, and $or combinators. The VisibilityContext evaluates these against the shared state model.

Related Skills

Explore More Software Engineering Skills→
StormHubStormHub

react

Convert JSON UI specs into executable React component trees.

Community
Advanced
HouseGarofaloHouseGarofalo
3

svelte-kit

Guide SvelteKit 2 development with Svelte 5 runes and server-side rendering.

Official
Advanced
hasnaxyzhasnaxyz

solid

Render structured JSON UI specs into SolidJS components with reactive bindings.

Official
Advanced
vercel-labsvercel-labs
15.9k

vue

Convert JSON UI specifications into Vue 3 component trees.

Official
Advanced