svelte

Convert JSON-Render specs into executable Svelte component trees.

Updated Apr 28, 2026
One-click install
npx skills add https://github.com/tututwo/heather-birthday-itenary --skill svelte-tututwo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: svelte
Source: https://github.com/tututwo/heather-birthday-itenary/tree/main/.agents/skills/svelte
Command: npx skills add https://github.com/tututwo/heather-birthday-itenary --skill svelte-tututwo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts json-render specs into executable Svelte component trees, enabling developers to render dynamic UIs from JSON-driven specifications with predictable structure and behavior.

Core Features & Use Cases

  • Renderer that converts specs into composable Svelte components at runtime.
  • JsonUIProvider context that exposes state, actions, and visibility for dynamic UI generation.
  • Catalog/Registry helpers to define and register reusable UI components and workflows.
  • Use Case: build dashboards or catalogs from AI-generated UI specs in a type-safe, frontend-agnostic way.

Quick Start

Install dependencies and integrate the provider and renderer in your Svelte app to render specs.

Frequently Asked Questions about svelte

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

FAQPage Schema
How do I render dynamic UIs from JSON specifications in a Svelte app?

To render dynamic UIs from JSON specifications in Svelte, you can use a renderer that converts JSON specs into executable component trees at runtime. This approach enables predictable structure and behavior for dynamic UI generation.

What is a JSON-driven UI rendering pipeline and when do I need it?

A JSON-driven UI rendering pipeline is a system that converts JSON specs into executable component trees at runtime. You need it when building dashboards or catalogs from AI-generated UI specs in a type-safe, frontend-agnostic way.

Does this Svelte renderer support type-safe component integration?

Yes, the Svelte renderer supports type-safe component integration by satisfying requirements for a stable UI pipeline. It uses TypeScript to ensure predictable structure and behavior when rendering dynamic UIs from JSON specifications.

How do I set up a catalog of reusable components for JSON rendering in Svelte?

To set up a catalog of reusable components for JSON rendering in Svelte, use the provided catalog and registry helpers. These allow you to define and register UI components and workflows for on-demand rendering within your application.

Can I expose state and actions dynamically when rendering Svelte components from JSON?

Yes, you can expose state and actions dynamically when rendering Svelte components from JSON. The JsonUIProvider context exposes state, actions, and visibility specifically for dynamic UI generation from specifications.