skills.rest
tututwo
tututwoCOMMUNITY
Explore all skills by this author →
Website𝕏@_tuyukunGitHub

shadcn-svelte

Identify and describe pre-built shadcn-svelte UI components for json-render Svelte apps.

Updated Apr 28, 2026
Search Tags:#catalog#svelte#tailwind#design-system#shadcn-svelte#ui-components
One-click install
npx skills add https://github.com/tututwo/heather-birthday-itenary --skill shadcn-svelte-tututwo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-svelte
Source: https://github.com/tututwo/heather-birthday-itenary/tree/main/.agents/skills/shadcn-svelte
Command: npx skills add https://github.com/tututwo/heather-birthday-itenary --skill shadcn-svelte-tututwo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pre-built shadcn-svelte UI components accelerate building polished Svelte apps with Tailwind CSS.

Core Features & Use Cases

  • 36 pre-built components built on Svelte 5 + Tailwind CSS for rapid UI assembly.
  • Two entry points: catalog and runtime components to optimize bundling and integration.
  • Selective imports to minimize bundle size and tailor UI for your app.

Quick Start

Install the package and import only the components you need to scaffold your UI.

Frequently Asked Questions about shadcn-svelte

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

FAQPage Schema
How do I find pre-built shadcn-svelte UI components for my Svelte project?▼

Pre-built shadcn-svelte UI components are identified through a catalog-based selection system for Svelte projects. This enables rapid UI assembly by providing 36 ready-to-use components built on Svelte 5 and Tailwind CSS.

Can I use shadcn-svelte components for runtime rendering in a json-render Svelte app?▼

Yes, shadcn-svelte components support runtime rendering in json-render Svelte apps. The system provides two entry points, catalog and runtime components, to optimize bundling and integration for your specific application architecture.

How do I import only the Svelte UI components I need to minimize bundle size?▼

You can minimize bundle size in your Svelte app by using selective imports from the component catalog. This allows you to tailor the UI by including only the specific pre-built components required for your application.

Does shadcn-svelte work with Tailwind CSS and Svelte 5?▼

Yes, shadcn-svelte is built on Svelte 5 and Tailwind CSS. It provides 36 pre-built UI components designed to accelerate building polished Svelte applications with Tailwind styling integration.

What is the best way to assemble a UI from a component catalog in a Svelte app?▼

The best way to assemble UI from a component catalog in a Svelte app is using json-render. This approach pairs catalog-based component selection with runtime rendering to optimize both bundling and integration.

How do I package shadcn-svelte resources safely for a Svelte project?▼

To safely package shadcn-svelte resources, use a SKILL.md frontmatter with name and description, alongside optional scripts, references, and assets directories. This structure exposes resources and ensures safe packaging for your Svelte project.

Related Skills

Explore More Software Engineering Skills→
hasnahasna

svelte

Convert JSON UI specifications into Svelte 5 component trees.

Official
Intermediate
pch007pch007
1

shadcn-svelte

Provide shadcn-svelte components with catalog and runtime entry points for json-render Svelte apps.

Community
Intermediate
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced
exceptionlessexceptionless
2.5k

svelte-components

Develop Svelte 5 UI components using runes and shadcn-svelte.

Official
Intermediate