ajianaz/skills-collection/shadcn-svelte-management

Svelte Component Management

Primary Focus: Svelte Ecosystem

Specialized in Svelte component libraries and their management:

• shadcn-svelte: Svelte adaptation of shadcn/ui
• Skeleton UI: Modern, accessible Svelte component library
• Melt UI: Headless components for Svelte
• Custom components: Built from scratch with Tailwind CSS

Prerequisites

For Svelte Projects

Verify project setup:

# Check if SvelteKit project
ls src/routes/ src/lib/

For shadcn-svelte Projects

If using shadcn-svelte:

npx shadcn-svelte@latest init

For Skeleton UI Projects

If using Skeleton UI:

npm install @skeletonlabs/skeleton

Quick Add Workflow for Svelte

For simple component additions (e.g., "add a date picker"):

Option 1: shadcn-svelte

npx shadcn-svelte@latest add button
npx shadcn-svelte@latest add card
npx shadcn-svelte@latest add dialog

Option 2: Skeleton UI

npm install @skeletonlabs/skeleton
# Import in app.css: @import '@skeletonlabs/skeleton/theme';

Option 3: Custom Component

Create custom component with Tailwind CSS:

<!-- src/lib/components/DatePicker.svelte -->
<script lang="ts">
  import { createEventDispatcher } from 'svelte';
 
  export let value: Date = new Date();
  export let placeholder = 'Select date';
 
  const dispatch = createEventDispatcher();
</script>
 
<input
  type="date"
  bind:value
  {placeholder}
  on:change={(e) => dispatch('change', { value: e.target.value })}
  class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
/>

Complex Build Workflow for Svelte

For multi-component features (e.g., "build a login form"), see references/workflows.md.

When to use Complex Build:

• Feature requires 3+ components
• Need component hierarchy planning
• Building complete sections (forms, dashboards, modals)
• Integrating with SvelteKit's form actions and load functions

Svelte-specific considerations:

• Use SvelteKit's form actions for form handling
• Leverage progressive enhancement patterns
• Consider accessibility with Svelte's ARIA support
• Use Svelte stores for state management

Svelte Component Patterns

Common Component Categories

• Forms: form, input, select, checkbox, radio-group, textarea
• Layout: card, dialog, sheet, drawer, tabs, container
• Feedback: alert, toast, skeleton, progress, spinner
• Navigation: button, dropdown-menu, navigation-menu, breadcrumb
• Data Display: table, badge, avatar, accordion, carousel

Svelte-specific Patterns

• Form Actions: Integration with SvelteKit's form handling
• Progressive Enhancement: Works without JavaScript, enhanced with it
• Reactive Components: Using Svelte's reactivity for dynamic UI
• Transitions: Built-in Svelte transitions for smooth animations

Installation Examples

# shadcn-svelte
npx shadcn-svelte@latest add button card form
 
# Skeleton UI
npm install @skeletonlabs/skeleton
# Add to app.css: @import '@skeletonlabs/skeleton/theme';
 
# Melt UI
npm install @melt-ui/svelte

After Implementation

Always run audit:

shadcn___get_audit_checklist

Custom Styling & Theming

Shadcn provides structural foundation with default styling. For custom aesthetics:

Svelte Component Library Ecosystem

Primary Libraries

1. shadcn-svelte

npx shadcn-svelte@latest init
npx shadcn-svelte@latest add [component-name]

• Components in: src/lib/components/ui/
• Theme in: src/app.css
• Config: components.json

2. Skeleton UI

npm install @skeletonlabs/skeleton

• Import in: src/app.css → @import '@skeletonlabs/skeleton/theme';
• Components: Import from @skeletonlabs/skeleton
• Theme: CSS variables in src/app.css

3. Melt UI

npm install @melt-ui/svelte

• Headless components
• Build with Tailwind CSS
• Full accessibility support
• Works with SvelteKit

4. Custom Components

• Build from scratch with Tailwind CSS
• Use Svelte transitions and actions
• Integrate with SvelteKit patterns

Customization Strategies

For shadcn-svelte:

1. Modify CSS variables in src/app.css
2. Extend Tailwind config for custom themes
3. Override component styles with class: directives

For Skeleton UI:

1. Use CSS custom properties for theming
2. Leverage Skeleton's theme system
3. Combine with custom Tailwind utilities

For Custom Components:

1. Build with Svelte's component syntax
2. Use Tailwind for styling
3. Add Svelte transitions for animations
4. Ensure accessibility with ARIA attributes

Invoke `frontend-design` skill when:

• User wants unique/distinctive visual style beyond default theme
• Need custom typography, color schemes, or motion effects
• Building landing pages or marketing sites requiring creative design
• User mentions "custom styling", "unique design", "not generic"

Workflow for Svelte projects:

1. Choose appropriate component library (shadcn-svelte, Skeleton, Melt, or custom)
2. Use shadcn-svelte-management patterns adapted for Svelte
3. Invoke frontend-design for visual customization:

• Custom CSS variables in src/app.css
• Tailwind theme extensions in tailwind.config.js
• Svelte transitions and animations
• Typography and color refinements

Customization targets:

• src/app.css - CSS variables, custom fonts, theme imports
• tailwind.config.js - theme colors, fonts, animations
• src/lib/components/ui/ - component-level overrides
• Component-level class: directives for dynamic styling