shadcn-svelte_skill

Overview

This skill documents how to build accessible, consistent UI using shadcn-svelte components and the bits-ui patterns. It covers import conventions, trigger child snippets, dialog and sheet patterns, dropdowns, class merging, and navigation preferences to keep components predictable and keyboard-friendly. The guidance focuses on practical snippets, naming conventions, and common pitfalls.

How this skill works

It inspects common component usage and prescribes patterns that ensure single focusable triggers, proper ARIA prop delegation, and consistent state handling. The skill explains the child snippet trigger pattern, dialog open-state naming, dropdown option structuring, sheet layouts, and recommended class merging. It highlights the reasons behind each pattern so developers can apply them reliably across an application.

When to use it

• When creating triggerable UI (Tooltip, Popover, DropdownMenu, Dialog) to avoid double-tab issues
• When building modal dialogs and managing open/close state with clear naming
• When implementing dropdowns backed by option lists or enums
• When adding a slide-out sheet for filters or settings
• When deciding class merging strategies or navigation behavior for buttons

Best practices

• Import components using the namespace pattern (import * as X from '$comp/ui/x') and explicit named imports for primitives
• Always wrap custom trigger elements with the child snippet to keep a single tab stop and forward ARIA props
• Use descriptive open[ComponentName]Dialog state names (e.g., openInviteUserDialog) to avoid ambiguity
• Prefer Svelte array class syntax for conditional classes instead of legacy cn utilities
• Prefer native href navigation for Buttons; use onclick/goto only when navigation requires logic

Example use cases

• Tooltips for icon buttons: use Tooltip.Trigger with child snippet wrapping a Button sized for icons
• Creation dialog: bind a clearly named openCreateDialog state to Dialog.Root and render Dialog.Content only when open
• Status selector: DropdownMenu with options defined in a typed options.ts file and items mapped to handleSelect
• Filters sheet: Sheet.Root bound to openFiltersSheet and a right-side Sheet.Content with Footer actions
• Form actions: Buttons with href for simple navigation or onclick for save-and-redirect flows