shadcn-svelte

Integrate shadcn-svelte components with child snippet trigger patterns.

2.5k|507|Updated Feb 7, 2014
One-click install
npx skills add https://github.com/exceptionless/Exceptionless --skill shadcn-svelte-exceptionless
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shadcn-svelte
Source: https://github.com/exceptionless/Exceptionless/tree/main/.agents/skills/shadcn-svelte
Command: npx skills add https://github.com/exceptionless/Exceptionless --skill shadcn-svelte-exceptionless

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the process of building user interfaces using the shadcn-svelte component library, addressing common challenges with imports, component composition, and styling.

Core Features & Use Cases

  • Component Integration: Provides correct import patterns for various shadcn-svelte components like Dialog, DropdownMenu, and Button.
  • Composition Patterns: Demonstrates the recommended child snippet pattern for trigger components to ensure accessibility and proper prop delegation.
  • UI Element Management: Offers guidance on dialog naming conventions and preferred navigation methods (href over onclick).
  • Use Case: When adding a new modal dialog to your Svelte application using shadcn-svelte, this Skill will show you the exact import statements and the correct way to structure the dialog trigger and content for optimal user experience and accessibility.

Quick Start

Use the shadcn-svelte skill to import the Button and Input components and use the child snippet pattern for a Tooltip trigger.

Frequently Asked Questions about shadcn-svelte

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

FAQPage Schema
How do I correctly structure a shadcn-svelte dialog trigger to ensure accessibility?

To ensure accessibility for a shadcn-svelte dialog trigger, use the recommended `child` snippet pattern for proper prop delegation. This composition pattern correctly forwards necessary attributes to the underlying trigger element, maintaining optimal user experience and accessible interactions.

What is the best way to manage navigation in Svelte dropdown menus using shadcn-svelte?

The best way to manage navigation in Svelte dropdown menus is using `href` attributes over `onclick` handlers. Adhering to this preferred navigation method within shadcn-svelte ensures standard browser behaviors and proper routing integration in your frontend development.

How do I import and use interactive UI components like Button and Input in Svelte?

You import and use interactive UI components like Button and Input by following specific shadcn-svelte import patterns. Correct integration involves applying the proper component composition techniques to ensure the interactive elements function correctly within your Svelte application.

Can I use shadcn-svelte components for form inputs and modals in my Svelte application?

Yes, you can use shadcn-svelte components for form inputs and modals in your Svelte application. The component library facilitates frontend development by providing exact import statements and correct structural guidance for dialog management and interactive UI elements.

Why does my shadcn-svelte component trigger lose styling or functionality when composed?

Your shadcn-svelte component trigger loses styling or functionality when composed if you fail to use the `child` snippet pattern. Applying this specific pattern ensures proper prop delegation, preserving both the visual styling and the interactive accessibility of the trigger.