skills.rest
memoirlabs
memoirlabsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

svelte

Convert JSON UI specifications into Svelte 5 component trees.

6|Updated Mar 26, 2026
Search Tags:#state management#svelte#component catalog#json-render#ui renderer#dynamic bindings#event actions
One-click install
npx skills add https://github.com/memoirlabs/mog --skill svelte-memoirlabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte
Source: https://github.com/memoirlabs/mog/tree/main/.agents/skills/svelte
Command: npx skills add https://github.com/memoirlabs/mog --skill svelte-memoirlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Svelte turns UI definitions from JSON into real Svelte component trees, removing the need to hand-code repetitive component wiring when you already have a structured UI spec.

Core Features & Use Cases

  • JSON spec to Svelte component trees: Render an element-tree spec into live Svelte components using a registry of component implementations.
  • Catalog-driven component definitions: Define component props and validation via a schema-powered catalog so specs are structured and predictable.
  • State, visibility, and actions from the spec: Use state-bound props, visibility conditions, and event-to-action dispatch (including built-in state actions) to drive interactive UIs.

Quick Start

Render a JSON UI spec as a Svelte component tree by registering your components and passing the spec through JsonUIProvider and Renderer.

Frequently Asked Questions about svelte

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

FAQPage Schema
How do I render JSON UI specs as Svelte components?▼

To render JSON UI specs as Svelte components, register your components in a registry and pass the structured element-tree spec through JsonUIProvider and Renderer to generate a live Svelte 5 component tree.

What is catalog-driven component definition in Svelte JSON rendering?▼

Catalog-driven component definition in Svelte JSON rendering uses a schema-powered catalog to define component props and validation, ensuring the structured element-tree specs remain predictable and structured.

Can I wire state management and event actions into a JSON UI spec for Svelte?▼

Yes, you can wire state management into a JSON UI spec by using state-bound props, visibility conditions, and event-to-action dispatch with built-in state actions to drive interactive Svelte UIs.

Do I need a Svelte renderer with a registry to convert JSON to UI components?▼

Yes, converting JSON UI specifications into Svelte component trees requires a Svelte renderer with a registry to support streamed specs, dynamic prop expressions, and action updates via contexts.

How does dynamic prop expression binding work in Svelte JSON UI rendering?▼

Dynamic prop expression binding in Svelte JSON UI rendering applies state-bound props and visibility conditions directly from the structured spec, updating the component tree via provided contexts.

What are the limitations of using JSON specs to build Svelte component trees?▼

Building Svelte component trees from JSON specs requires pre-registering all components in a schema-powered catalog and lacks support for environments without a Svelte renderer with a registry.

Related Skills

Explore More Software Engineering Skills→
StormHubStormHub

react

Convert JSON UI specs into executable React component trees.

Community
Advanced
hasnaxyzhasnaxyz

svelte

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

Official
Advanced
raiden076raiden076
2

svelte

Transform JSON-render specs into runnable Svelte 5 components.

Community
Advanced
hasnahasna

react

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

Official
Intermediate