skills.rest
vercel-labs
vercel-labsOFFICIAL
Explore all skills by this author →
Website𝕏@vercelGitHub

svelte

Transform json-render specs into live Svelte component trees.

15.9k|859|Updated Jan 14, 2026
Search Tags:#typescript#ui#catalog#component#svelte#renderer#json-render
One-click install
npx skills add https://github.com/vercel-labs/json-render --skill svelte-vercel-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte
Source: https://github.com/vercel-labs/json-render/tree/main/skills/svelte
Command: npx skills add https://github.com/vercel-labs/json-render --skill svelte-vercel-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts json-render specs into live Svelte component trees, enabling developers to build dynamic UIs from AI-generated specifications with predictable rendering.

Core Features & Use Cases

  • Create a catalog and register Svelte components
  • Render specs into nested component trees
  • Integrate with the @json-render/svelte workflow to build reusable UI catalogs

Quick Start

Declare a catalog with defineCatalog, implement Card and Button components, and render a spec with 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 specs into live Svelte UI components?▼

You can render JSON specs into live Svelte UIs by defining a catalog with defineCatalog, registering Svelte components, and passing the spec through the Renderer to build a live component tree.

What is a json-render spec and how does it work with Svelte?▼

A json-render spec is a JSON structure defining UI elements, processed by a JsonUIProvider that streams the data to map specification nodes against a registered component catalog for predictable dynamic rendering.

Can I render AI-generated UI specifications in a Svelte project?▼

Yes, you can render AI-generated UI specifications in a Svelte project by applying a Svelte-based renderer to map the AI-generated JSON specs to registered components within your catalog.

Do I need TypeScript to build a Svelte component catalog with JSON rendering?▼

TypeScript is supported when building a Svelte component catalog, but the core requirement is defining a catalog with defineCatalog and implementing components to render json-render specs into live UI component trees.

What's the best way to create a reusable UI component catalog in Svelte?▼

The best way to create a reusable UI catalog in Svelte is to use defineCatalog to register your components and integrate with the @json-render/svelte workflow, establishing a render pipeline for your JSON specifications.

Related Skills

Explore More Software Engineering Skills→
hasnahasna

svelte

Convert JSON UI specifications into Svelte 5 component trees.

Official
Intermediate
tututwotututwo

svelte

Convert JSON-Render specs into executable Svelte component trees.

Community
Intermediate
hasnahasna

shadcn

Integrates reusable UI components into your Tailwind and React projects via the managed screen reader.

Official
Intermediate
xztxyxztxy

svelte

Convert JSON UI specs into runnable Svelte component trees.

Community
Intermediate