skills.rest
hasnaxyz
hasnaxyzOFFICIAL
Explore all skills by this author →
GitHub

svelte

Convert json-render specifications into Svelte 5 component trees with typed registries.

Updated Jun 24, 2026
Search Tags:#svelte#frontend development#streaming ui#json-render#component registry#ui rendering#state binding
One-click install
npx skills add https://github.com/hasnaxyz/open-render --skill svelte-hasnaxyz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte
Source: https://github.com/hasnaxyz/open-render/tree/main/skills/svelte
Command: npx skills add https://github.com/hasnaxyz/open-render --skill svelte-hasnaxyz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build Svelte 5 interfaces from json-render specifications without manually wiring every component, state binding, and event handler.

Core Features & Use Cases

  • JSON to Svelte Rendering: Convert element-tree specs into live Svelte component trees with a registry of reusable components.
  • Catalog and Action Definition: Define component schemas, event actions, visibility rules, and two-way bindings for predictable AI-generated UIs.
  • Streaming UI Workflows: Support progressive rendering, chat-driven generation, and loading states for interactive app experiences.
  • Use Case: Create a settings panel, dashboard, or form flow from a JSON spec and let Svelte components handle rendering, state updates, and user interactions.

Quick Start

Use this skill to turn a json-render spec into a Svelte UI by wiring your component registry, provider, and renderer around the spec you want to display.

Frequently Asked Questions about svelte

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

FAQPage Schema
How do I render Svelte components from a JSON specification?▼

Render Svelte components from JSON by converting json-render specifications into live Svelte component trees using a typed component registry, state bindings, and event handling. This eliminates manual wiring for dynamic UI generation.

Can I use streaming UI workflows for chat-driven generation in Svelte?▼

Streaming UI workflows are supported for progressive rendering, chat-driven generation, and loading states in Svelte. This enables interactive app experiences by handling visibility context and optional action execution during interface rendering.

What is the best way to build an AI-generated dashboard interface in Svelte?▼

Build an AI-generated dashboard by defining a JSON spec and wiring a component registry, provider, and renderer around it. Svelte components will automatically handle the rendering, state updates, and user interactions based on the provided schema definitions.

Does this approach support two-way state bindings for interactive forms?▼

Two-way state bindings are supported for interactive forms and dashboards. The Skill applies typed component registries and validation context handling to ensure state updates and user interactions function reliably across the rendered Svelte UI.

Related Skills

Explore More Software Engineering Skills→
inpinitiinpiniti

react

Convert JSON specifications into React component trees with a typed registry.

Community
Advanced
sametozkalesametozkale

svelte

Convert json-render specifications into Svelte component trees.

Community
Intermediate
hasnaxyzhasnaxyz

react

Render JSON UI specifications into React component trees with type-safe catalogs.

Official
Advanced
xztxyxztxy

svelte

Convert JSON UI specs into runnable Svelte component trees.

Community
Intermediate