composable-svelte-components_skill

Overview

This skill is a concise reference for the Composable Svelte UI component library built around shadcn-svelte components. It helps you pick components, understand props and variants, and apply accessibility and state integration patterns with the Composable Architecture. Use it to implement designs, wire up store-driven behavior, and choose the right visual primitives for common UI patterns.

How this skill works

The skill catalogs components (navigation, forms, data display, feedback, layout) and describes their props, typical variants, and integration patterns. It explains how components read reactive state from the Composable Architecture ($store), dispatch actions for interactions, and use callbacks like onOpenChange or onValueChange. It also maps component intent to concrete usage scenarios and points to specialized packages for graphics, code/media, charts, and maps.

When to use it

• Implement overlays: choose Modal, Sheet, Drawer, Alert or Popover based on screen real estate and intent.
• Build form UIs: use Input, Select, Checkbox, RadioGroup, Switch, Textarea, Combobox for state-driven forms.
• Display lists and summaries: use Table, Card, Badge, Avatar for structured and profile data.
• Show progress and status: use Toast, Progress, Spinner, Skeleton for loading and notifications.
• Organize content: use Accordion, Tabs, Collapsible for expand/collapse and multi-view layouts.

Best practices

• Keep state authoritative in the Composable Architecture store; pass values and handlers from $store to components.
• Prefer semantic components with accessible props (aria labels, onOpenChange) and provide sensible fallbacks (AvatarFallback, empty state).
• Use visual variants consistently (badge variants, button variants) to communicate status and affordance across the app.
• Choose overlay type by intent: full interruption for Modals, mobile-first interactions for Sheets, quick confirmations for Alerts, and contextual actions for Popovers.
• Render feedback components from explicit loading/error/success states so UI transitions remain predictable and testable.

Example use cases

• Checkout flow: use Modal for payment confirmation, Form components for billing info, Progress for upload status.
• Mobile filter panel: use Sheet to expose filters and Select/Checkbox controls tied to store filters.
• Admin tables: use Table with sorting/filtering, Badge for status, Avatar for user rows and Toast for bulk action results.
• Settings sidebar: use Drawer or Collapsible with Switches and RadioGroup to toggle preferences.
• Profile cards: use Card with Avatar, Badge for user role, and Button dispatching store actions to follow/unfollow.